Cards
Card Body

An example some text within a card body.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

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.

The Card Title

This is the card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
The Card Title

This is the card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
The Card Title

This is the card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

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 of the card.

Image
How to Be a Good Leader
March 21, 2017 8:30pm
Card Image Bottom

Places an image to the bottom of the card.

How to Be a Good Leader
March 21, 2017 8:30pm
Image
Image Overlays

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

Image
The Cat Prisoner

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

Image
The Ghost Town

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

Image
The Green Leaves

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

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.

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

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

Add an optional footer within a card.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

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.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

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>
    </ul>
  </div><!-- card-header -->
  <div class="card-body">...</div>
</div><!-- card -->
Background Variants

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

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.

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 -->
Card with Buttons & Options

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

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...