Card waves
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card">
<img class="card-img-top" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/chat.jpg">
<div class="position-relative overflow-hidden" style="height:50px;margin-top:-50px;">
<div class="position-absolute w-100 top-0 z-index-1">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body">
<h4>Soft UI 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="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/pool.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
</a>
<div class="colored-shadow" style="background-image: url("https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/pool.jpg");"></div></div>
<div class="card-body px-1 pt-3">
<p class="text-gradient text-primary 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 btn-outline-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">
<div class="blur-shadow-image">
<img class="img border-radius-lg" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/macbook.jpg">
</div>
<div class="colored-shadow" style="background-image: url("https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/macbook.jpg");"></div></div>
</div>
<div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
<h3>
<a href="javascript:;" class="text-dark font-weight-normal">Rover raised $65 million for pet sitting</a>
</h3>
<p>
Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover, which raised $65 million to expand its pet sitting and dog-walking businesses.. <a href="javascript:;" class="text-dark"> Read More </a>
</p>
<div class="author">
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-9.jpg" alt="..." class="avatar avatar-sm shadow me-2">
<p class="my-auto">Katie Roof</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-darker card-title 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">
<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 blur on image
<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/curved-images/curved-8.jpg">
</div>
<div class="colored-shadow" style="background-image: url("../../assets/img/curved-images/curved8.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-7">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-background move-on-hover">
<a href="javascript:;">
<div class="full-background" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/color-flats.jpg)"></div>
<div class="card-body pt-12">
<h4 class="text-white">Search and Discovery</h4>
<p>Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.</p>
</div>
</a>
</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 shadow-lg">
<a href="javascript:;">
<div class="p-3">
<img class="w-100 border-radius-md" src="../../assets/img/bruce-mars.jpg">
</div>
</a>
<div class="card-body blur justify-content-center text-center mt-n5 mx-4 mb-4 border-radius-md">
<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 background tilt
<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-background card-background-mask-primary tilt mt-md-0 mt-5" data-tilt="" style="will-change: transform; transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);">
<div class="full-background" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/toboshar.jpg)"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-lg up mb-5">
<svg width="40px" height="40px" viewBox="0 0 44 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>megaphone</title>
<g id="Basic-Elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rounded-Icons" transform="translate(-2168.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="Icons-with-opacity" transform="translate(1716.000000, 291.000000)">
<g id="megaphone" transform="translate(452.000000, 300.000000)">
<path d="M35.7958333,0.273166667 C35.2558424,-0.0603712374 34.5817509,-0.0908856664 34.0138333,0.1925 L19.734,7.33333333 L9.16666667,7.33333333 C4.10405646,7.33333333 0,11.4373898 0,16.5 C0,21.5626102 4.10405646,25.6666667 9.16666667,25.6666667 L19.734,25.6666667 L34.0138333,32.8166667 C34.5837412,33.1014624 35.2606401,33.0699651 35.8016385,32.7334768 C36.3426368,32.3969885 36.6701539,31.8037627 36.6666942,31.1666667 L36.6666942,1.83333333 C36.6666942,1.19744715 36.3370375,0.607006911 35.7958333,0.273166667 Z" id="Path"></path>
<path d="M38.5,11 L38.5,22 C41.5375661,22 44,19.5375661 44,16.5 C44,13.4624339 41.5375661,11 38.5,11 Z" id="Path" opacity="0.601050967"></path>
<path d="M18.5936667,29.3333333 L10.6571667,29.3333333 L14.9361667,39.864 C15.7423448,41.6604248 17.8234451,42.4993948 19.6501416,41.764381 C21.4768381,41.0293672 22.3968823,38.982817 21.7341667,37.1286667 L18.5936667,29.3333333 Z" id="Path" opacity="0.601050967"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<h1 class="text-white up mb-0">Find music and play it!</h1>
<p class="lead up">Music search</p>
<button type="button" class="btn btn-outline-white btn-lg mt-3 up">Get Started</button>
</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 shadow-none border bg-gradient-dark h-100 overflow-hidden">
<img src="../../assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute">
<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-secondary 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">
<div>
<i class="fas fa-check text-success text-sm" aria-hidden="true"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">Complete documentation</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm" aria-hidden="true"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">Working materials in Sketch</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm" aria-hidden="true"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">20GB cloud storage</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm" aria-hidden="true"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">100 team members</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>