<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
        }
    }
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css
  2. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css
  3. https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js