<div class="uk-margin"></div>
<div class="uk-section"><div class="owl-carousel owl-theme">
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
<div class="item">
<div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
<h3 class="uk-card-title">Credit Card Name</h3>
<p>Current Balance</p>
<h3>$000,000,000.00</h3>
</div>
</div>
</div>
</div>
.uk-section {
background-color: #666
}
.owl-carousel {
position: relative;
margin-top: 30px;
}
.owl-nav {
position: absolute;
top: -60px;
left: 10px;
}
.uk-card-primary {
border-radius: 8px;
}
h3 {
margin-top: 10px
}
.uk-card > :last-child {
margin-top:0;
margin-bottom: 10px
}
p {
margin-top: 30px;
margin-bottom: 0;
}
.owl-next {
background: #3286f0;
}
.owl-theme .owl-nav [class*='owl-'] {
background: #383838;
}
.owl-dots {
margin-top: 30px;
}
.uk-card-title {
padding-bottom: 20px
}
$('.owl-carousel').owlCarousel({
loop:false,
stagePadding: 15,
margin:10,
nav:true,
navText : ['<span class="uk-margin-small-right uk-icon" uk-icon="icon: chevron-left"></span>','<span class="uk-margin-small-left uk-icon" uk-icon="icon: chevron-right"></span>'],
responsive:{
0:{
items:1
},
640:{
items:2
},
960:{
items:3
},
1200:{
items:4
}
}
})