Cards

Multiple variants and options

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Basic sub title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula vitae eros tristique aliquet. Curabitur porta ornare fermentum. Mauris et tempor velit. Mauris scelerisque volutpat elit, eget egestas dolor lacinia at. Morbi consectetur congue dolor, at eleifend tellus consectetur et. Nunc tellus ex, elementum a convallis sit amet, efficitur laoreet odio. Mauris convallis non odio vel pharetra. Sed in nunc nec felis eleifend laoreet.


<div class="card card-custom mb-0">
  <div class="card-header">
    <div class="card-title">
      <h6 class="cart-title-lable">
        Basic <small>sub title</small>
      </h6>
    </div>
  </div>
  <div class="card-body">
    ...
  </div>
</div>
Card Icon and footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula vitae eros tristique aliquet. Curabitur porta ornare fermentum. Mauris et tempor velit. Mauris scelerisque volutpat elit, eget egestas dolor lacinia at. Morbi consectetur congue dolor, at eleifend tellus consectetur et. Nunc tellus ex, elementum a convallis sit amet, efficitur laoreet odio. Mauris convallis non odio vel pharetra. Sed in nunc nec felis eleifend laoreet.


<div class="card card-custom mb-0">
    <div class="card-header">                                
        <div class="card-title">
            <span class="d-flex mr-10">
                icon
            </span>
            <h6 class="cart-title-lable">
              Card Icon <small>and footer</small>
            </h6>
        </div>
    </div>
    <div class="card-body">
        ...
    </div>
    <div class="card-footer d-flex justify-content-between">
      <button type="button" class="btn btn-brand">
        Setting
      </button>
      <button type="button" class="btn btn-success-muted">
        Learn more
      </button>
    </div>
</div>

Card Header Navigation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula vitae eros tristique aliquet. Curabitur porta ornare fermentum. Mauris et tempor velit. Mauris scelerisque volutpat elit, eget egestas dolor lacinia at. Morbi consectetur congue dolor, at eleifend tellus consectetur et.

Go somewhere

Use text and background utilities to change the appearance of a card.

Card Primary sub title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula vitae eros tristique aliquet. Curabitur porta ornare fermentum. Mauris et tempor velit. Mauris scelerisque volutpat elit, eget egestas dolor lacinia at..

Brand muted sub title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula vitae eros tristique aliquet. Curabitur porta ornare fermentum. Mauris et tempor velit. Mauris scelerisque volutpat elit, eget egestas dolor lacinia at..