Skip to content

Card (Static)

A Static Card is a highly versatile graphic content block that can be used in a number of situations where the content does not need to be interactive.

How to use a Static Card

Static cards versatility make it difficult to narrow down to any one specific use case. On the basic structure, Static Cards require the header and body elements and greatly prefer that the header utilizes a background of some type. The graphic area of a Static Card can be animated; Just keep in mind that “static” means not-interactive. The optional footer can include a link or button with the card that triggers an external link or an action in some other control (such as a reveal).

Static cards have no fixed width — that is they conform to the size of their container and content.

Do

  • Use Static Cards to present non-interactive information.
  • Use Static Cards to highlight additional information in a text page, replacing the spot image.
  • Use Static Cards as the target of a Reveal interaction.
  • Use Static Cards in a small grid, along with other content.

Don’t

  • Use Static Cards as the only content on the page.
  • Forget the graphic! It’s hard to be a graphic content block without one. Graphics are required.
  • Use “white” or “blank” background images for the graphic on a card.
  • Use the graphic or animation in a Static Card to convey information that can’t be completely conveyed via short text.
  • Go wild with Static Cards! They work best when they’re breaking up walls of text — but it’s just as easy to create walls of cards, too.

Unstyled Example

Title

Card Content

Code Example

<div class="card static">
  <div class="card-state">
    <div class="card-header">
      <h3>Title</h3>
    </div>
    <div class="card-body">
      <p>Card Content</p>
    </div>
    <div class="card-footer"></div>
  </div>
</div>