General Cards

Card raised

Copy
<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&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
            </a>
          </div>
          <div class="card-body">
            <h4>Material Kit</h4>
            <p>
              One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That&#34;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>
Copy
<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

Copy
<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

Copy
<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

Copy
<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

Copy
<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(&#39;../../assets/img/examples/card-blog6.jpg&#39;)"></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

Copy
<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

Copy
<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

Copy
<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>