Card raised
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card shadow-lg mt-4">
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
<a class="d-block blur-shadow-image">
<img src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
</a>
</div>
<div class="card-body">
<h4>Material Design System</h4>
<p>
One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That"s pretty impressive.
</p>
<a href="javascript:;" class="text-primary icon-move-right">More about us
<i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>Card blog
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-blog card-plain">
<div class="position-relative">
<a class="d-block blur-shadow-image">
<img src="../../assets/img/bg5.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
</a>
</div>
<div class="card-body text-center px-1 pt-3">
<p class="mb-2 text-sm">Private Room • 1 Guests • 1 Sofa</p>
<a href="javascript:;">
<h5>
Single room in the center of the city
</h5>
</a>
<p>
As Uber works through a huge amount of internal management turmoil, the company is also consolidating and rationalizing more of its international business.
</p>
<button type="button" class="btn bg-gradient-primary btn-sm">From / Night</button>
</div>
</div>
</div>
</div>
</div>
</section>Card blog horizontal
<section class="py-8">
<div class="container">
<div class="row justify-space-between py-2">
<div class="card card-plain card-blog mt-5">
<div class="row">
<div class="col-md-4">
<div class="card-image position-relative border-radius-lg cursor-pointer">
<div class="blur-shadow-image">
<img class="img border-radius-lg" src="../../assets/img/examples/card-blog4.jpg">
</div>
</div>
</div>
<div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
<p class="text-xs text-uppercase font-weight-bold text-gradient text-info mb-2">Startups</p>
<h3 class="text-dark cursor-pointer">Lyft launching cross-platform service this week</h3>
<p>
Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses. Yet its own business model disruption is only part of the story — and <a href="javascript:;" class="text-dark"> Read More </a>
</p>
<div class="author">
<p class="mb-0">by<a class="ps-1 text-dark" href="javascript:;"><b>Megan Rose</b></a>, 2 days ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card image inside
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card shadow-lg">
<div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
<a href="javascript:;" class="d-block">
<img src="../../assets/img/annie-spratt.jpg" class="img-fluid border-radius-lg">
</a>
</div>
<div class="card-body pt-3">
<span class="text-gradient text-warning text-uppercase text-xs font-weight-bold my-2">Hub</span>
<a href="javascript:;" class="text-dark h5 d-block">
Shared Coworking
</a>
<p class="card-description mb-4">
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
</p>
<div class="author align-items-center">
<img src="../../assets/img/marie.jpg" alt="..." class="avatar shadow border-radius-lg">
<div class="name ps-3">
<span>Mathew Glock</span>
<div class="stats">
<small>Posted on 28 February</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card with colored shadow
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-plain card-blog mt-4">
<div class="card-image border-radius-lg position-relative">
<a href="javascript:;">
<div class="blur-shadow-image">
<img class="img border-radius-lg move-on-hover" src="../../assets/img/products/product-1-min.jpg">
</div>
</a>
</div>
<div class="card-body px-0">
<h5>
<a href="javascript:;" class="text-dark font-weight-bold">MateLabs mixes machine learning with IFTTT</a>
</h5>
<p>
If you’ve ever wanted to train a machine learning model
and integrate it with IFTTT, you now can with ...
</p>
<a href="javascript:;" class="text-info icon-move-right">Read More
<i class="fas fa-arrow-right text-sm" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>Card background
<section class="py-5">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-background">
<div class="full-background" style="background-image: url('../../assets/img/examples/card-blog6.jpg')"></div>
<div class="card-body body-left">
<div class="content-left text-start">
<h2 class="card-title text-white">Flexible office space means growing your team.</h2>
<p class="card-description">Rather than worrying about switching offices every couple years, you can instead stay in the same location and grow-up from your shared coworking space to an office that takes up an entire floor.</p>
<div class="author">
<img src="../../assets/img/team-2.jpg" alt="..." class="avatar mr-2">
<div class="name ms-2">
<span>Mathew Glock</span>
<div class="stats">
<small>Marketing Manager</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card profile
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-profile mt-md-0 mt-5">
<div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
<a class="d-block blur-shadow-image">
<img src="../../assets/img/examples/card-profile1.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
</a>
</div>
<div class="card-body text-center">
<h4 class="mb-0">Bruce Mars</h4>
<p>Atlanta, U.S.</p>
<div class="row justify-content-center text-center">
<div class="col-lg-4 col-4">
<h5 class="text-info mb-0">750</h5>
<small>Projects</small>
</div>
<div class="col-lg-4 col-4">
<h5 class="text-info mb-0">800+</h5>
<small>Hours</small>
</div>
<div class="col-lg-4 col-4">
<h5 class="text-info mb-0">24/7</h5>
<small>Support</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card rotate
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="rotating-card-container">
<div class="card card-rotate card-background mt-md-0 mt-5">
<div class="front front-background min-height-500" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/toboshar.jpg); background-size: cover;">
<div class="card-body pt-7 text-center">
<p class="text-sm text-white text-uppercase font-weight-normal">Music</p>
<h3 class="text-white mb-0">Find music and play it!</h3>
<p class="text-white opacity-8">Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out. It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good.</p>
</div>
</div>
<div class="back back-background min-height-500" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/toboshar.jpg)">
<div class="card-body pt-7 text-center">
<h3 class="text-white mb-0">Manage post</h3>
<p class="text-white opacity-8">As an Admin, you have shortcuts to edit, view or delete the posts.</p>
<div class="buttons-group">
<button type="button" class="btn btn-white btn-sm mt-3">Edit</button>
<button type="button" class="btn btn-white btn-sm mt-3">Share</button>
<button type="button" class="btn btn-white btn-sm mt-3">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card pricing
<section class="py-6">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card bg-gradient-dark h-100">
<div class="card-header bg-transparent text-sm-start text-center pt-4 pb-3 px-4">
<h5 class="mb-1 text-white">Premium</h5>
<p class="mb-3 text-sm text-white">Free access for 200 members</p>
<h3 class="font-weight-bolder mt-3 text-white">
$499 <small class="text-sm text-white font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn btn-sm btn-white w-100 border-radius-md mt-4 mb-2">Buy now</a>
</div>
<hr class="horizontal light my-0">
<div class="card-body">
<div class="d-flex pb-3">
<i class="material-icons my-auto text-white">done</i>
<span class="text-sm text-white ps-3">Complete documentation</span>
</div>
<div class="d-flex pb-3">
<i class="material-icons my-auto text-white">done</i>
<span class="text-sm text-white ps-3">Working materials in Sketch</span>
</div>
<div class="d-flex pb-3">
<i class="material-icons my-auto text-white">done</i>
<span class="text-sm text-white ps-3">20GB cloud storage</span>
</div>
<div class="d-flex pb-3">
<i class="material-icons my-auto text-white">done</i>
<span class="text-sm text-white ps-3">100 team members</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>