Card Block

An example some text within a card block.

Source Code

<div class="card card-body">
  <p class="card-text">...</p>
</div><!-- card -->

Card Titles, Text and Links

An example of using card title. In the same way, links are added and placed next to each other by adding link tag.

Source Code

<div class="card">
  <div class="card-body">
    <h5 class="card-title">The Card Title</h5>
    <p class="card-subtitle">This is the card subtitle</p>
    <p class="card-text">...</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div><!-- card -->

Card Image Top

Places an image to the top, bottom or overlay of the card.

Source Code

<div class="card">
  <img class="card-img-top img-fluid" src="../img/img12.jpg" alt="Image">
  <div class="card-body">
    <p class="card-text">...</p>
  </div>
</div><!-- card -->

Card Image Bottom

Places an image to the top, bottom or overlay of the card.

Source Code

<div class="card">
  <div class="card-body">
    <p class="card-text">...</p>
  </div>
  <img class="card-img-bottom img-fluid" src="../img/img12.jpg" alt="Image">
</div><!-- card -->

Image Overlays

Turn an image into a card background and overlay your card’s text.

Source Code

<div class="card bd-0">
  <img class="card-img img-fluid" src="../img/img11.jpg" alt="Image">
  <div class="card-img-overlay pd-30 d-flex align-items-start flex-column">
    <h6 class="tx-white mg-b-15">The Green Leaves</h6>
    <p class="tx-white tx-white-7 mg-b-auto">...</p>
    <p class="mg-b-0"><a href="" class="tx-white">Read more</a></p>
  </div><!-- card-img-overlay -->
</div><!-- card -->

Card Header With Color Variations

Add an optional header within a card.

Source Code

<div class="card bd-0">
  <div class="card-header bg-primary">
    Description
  </div><!-- card-header -->
  <div class="card-body bd bd-t-0 rounded-bottom">
    ...
  </div><!-- card-body -->
</div><!-- card -->

Class Reference

Class	Value
class="card-header bg-[value]"	SOLID: primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark GRADIENT: mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

Card With Footer

Add an optional footer within a card.

Source Code

<div class="card">
  <div class="card-body color-gray-lighter">...</div>
  <div class="card-footer">
    ...
  </div><!-- card-footer -->
</div><!-- card -->

Card With Navigation

Add a navigation in header of a card.

Source Code

<div class="card bd-0">
  <div class="card-header bg-dark">
    <ul class="nav nav-tabs nav-tabs-for-dark card-header-tabs">
      <li class="nav-item">
        <a class="nav-link bd-0 active pd-y-8" href="#">Popular</a>
      </li>
      <li class="nav-item">
        <a class="nav-link bd-0 tx-gray-light" href="#">Recent</a>
      </li>
      <li class="nav-item">
        <a class="nav-link bd-0 tx-gray-light" href="#">Top Rated</a>
      </li>
    </ul>
  </div><!-- card-header -->
  <div class="card-body">...</div>
</div><!-- card -->

Class Reference

Class	Description
class="card-header bg-[value]"	Set a card header background. Could be any value from known color.
nav-tabs-for-dark	A styles that make the tabs better in dark background. Recommended for dark background of card header.
card-header-tabs	The style for nav tabs that would fit for card header. Required when adding tabs to card header.

Background Variants

Cards include their own variant classes for quickly changing card background.

Source Code

<div class="card card-body tx-white bg-dark bd-0">
  Some quick example text to build on the card title...
</div><!-- card -->

Class Reference

Class	Value
class="card card-body bd-0 bg-[value]"	SOLID: primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark GRADIENT: mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

Card with Buttons & Options

Cards with some options in the right corner of header of card.