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>
    
  

Card Header & Footer

Add an optional header within a card.

Header

Card Title

Card subtitle

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

    
<div class="card">
  <div class="card-header">
    Header
  </div>
  <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 class="card-footer">
    Footer
  </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>
    
  

Card List View

List views may be contained within a cards by simply wrapping a .new-list-view element with .card

List View Items
  • Card Inline Form
  • Item
    • sub item 1
      • sub sub a
      • sub sub b
    • sub item 2
  • Editable Item
  • Read Only Item

A card-block paragraph of text dividing two lists inside a card.

A card-block paragraph of text.

    
<div class="card">
  <div class="card-header">
    List View Items
  </div>
  <ul class="new-list-view">
    <li>
      <div class="list-view-item">
        <div class="col col-100">Item</div>
      </div>
    </li>
    ...
  </ul>
</div>
    
  

Card with Alert

Cards can contain .alert in two different ways, inline or within a .card-block.

Success!

This is a card inline alert message.

The rest of the card...

This is an alert message inside a card-block.

The rest of the card...

    
<div class="card">
  <div class="alert alert-success">
    <h4>Success!</h4>
    <p>This is a card inline alert message.</p>
  </div>
  <div class="card-block">
    <p class="card-text">The rest of the card...</p>
  </div>
</div>

<div class="card">
  <div class="card-block">
    <div class="alert alert-info">
      <div class="alert-icon">
        <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-info-circle' /></svg>
      </div>
      <p>This is an alert message inside a card-block.</p>
    </div>
    <p class="card-text">The rest of the card...</p>
  </div>
</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. EThis card contains more text than its adjacent cards.

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>
    
  
anchor link to top of page