Cards

Flexible and extensible content containers with options for header, overlays, and colored backgrounds.

Basic Markup

Wrap card content within a .card. The .card-block class adds additional padding between elements (i.e. an image and text).

Card Title

Card subtitle

Example paragraph text to show how it's displayed within a card.

button 
    
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card Title</h4>
    <h5 class="card-subtitle">Card subtitle</h5>
    <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
    <a href="#" class="btn btn-primary">button</a>
  </div>
</div>

Sizing

Cards are block-level by default, so they’ll fill the available horizontal space. Constrain their widths via custom styles or predefined grid classes.

Card Title

Example paragraph text to show how it's displayed within a card.

button

Card Title

Example paragraph text to show how it's displayed within a card.

button 
    
<div class="row">
  <div class="col-sm-6">
    <div class="card card-block">
      <h3 class="card-title">Card Title</h3>
      <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
      <a href="#" class="btn btn-primary">button</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card card-block">
      <h3 class="card-title">Card Title</h3>
      <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
      <a href="#" class="btn btn-primary">button</a>
    </div>
  </div>
</div>

Overlay

Overlay another layer over the contents of an existing card by using .card-overlay. To make the overlay layer appear on hover, add .card-hover to the same div.

Card Title

Card subtitle

Example paragraph text to show how it's displayed within a card.

Overlay Title

Example paragraph text to show what overlayed text looks like within a card.

Hover over this card

Interactive Example

Example paragraph text to show how it's displayed within a card.

Overlay Title

Example paragraph text to show what overlayed text looks like within a card.

    
<div class="card">
  <!-- underlying card content -->
  <div class="card-block">
    <h4 class="card-title">Card Title</h4>
    <h5 class="card-subtitle">Card subtitle</h5>
  </div>
  <div class="card-block">
    <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
    <a href="#" class="btn btn-primary">button</a>
  </div>
  <!-- overlay content -->
  <div class="card-overlay card-hover">
    <h4 class="card-title">Overlay Title</h4>
    <p class="card-text">Example paragraph text to show what overlayed text looks like within a card.</p>
    <button class="btn btn-primary">button</button>
  </div>
</div>

Background Colors

Add variant class for changing the background-color and border-color of a card.

Card Success

Card subtitle

Example paragraph text to show how it's displayed within a card. Link Text

Card Info

Support card subtitle

Example paragraph text to show how it's displayed within a card. Link Text

Card Warning

Support card subtitle

Example paragraph text to show how it's displayed within a card. Link Text

Card Danger

Support card subtitle

Example paragraph text to show how it's displayed within a card. Link Text

    
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>

Add Card

If you're using cards to display a list of objects, use .card-add and .v-center at the end of the list to give users an option to add a another object to the list. A height on the .card-add must be set for content to center vertically.

add object

    
<div class="card card-add">
  <div class="card-block v-center">
    <svg class="cyclops-icon lg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus-circle"></use></svg>
    <p>add object</p>
  </div>
</div>

Card Decks

To get equal width ad height cards, use .card-deck and .card-deck-wrapper.

Card Title

Card subtitle

Example paragraph text to show how it's displayed within a card.

Card Title

Card subtitle

Example paragraph text to show how it's displayed within a card.

Card Title

Card subtitle

Example paragraph text to show how it's displayed within a card.

    
<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card Title</h4>
        <h5 class="card-subtitle">Card subtitle</h5>
      </div>
      <div class="card-block">
        <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card Title</h4>
        <h5 class="card-subtitle">Card subtitle</h5>
      </div>
      <div class="card-block">
        <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card Title</h4>
        <h5 class="card-subtitle">Card subtitle</h5>
      </div>
      <div class="card-block">
        <p class="card-text">Example paragraph text to show how it's displayed within a card.</p>
      </div>
    </div>
  </div>
</div>