Skip to content

Card (2-Sided)

2-Sided Cards have nearly the same use case as Static Cards, with the additional interaction of allowing the user to drill down for more information.

How to Use 2-Sided Cards

Like Static Cards, 2-sided cards are versatile. The structure is nearly identical to that of two static cards with a few exceptions:

  • On the initial (front) card, the header is required in order to provide a context for the information
  • On the secondary (back) card, the header is optional.
  • The footer element is required on both sides to allow for navigation.

2-Sided Cards are great at providing “Sample/Detail” interactions with the front displaying a graphic and a short question or scenario on the front, then detailed explanations on the back. Flashcards are another common use as are “hints” for a question or scenario.

2-Sided cards are interactions and should not contain a nested interaction within them.

Do

  • Use 2-Sided Cards for “Sample/Detail” interactions that allow for a graphic header.
  • Use 2-Sided Cards to highlight additional information in a text page, replacing the spot image.
  • Use 2-Sided Cards in a small grid, along with other content.

Don’t

  • Use 2-Sided Cards as the target of a Reveal action — There’s no practical way to add the accessibility necessary to make it usable.
  • Use 2-Sided Cards as the only content on the page.
  • Forget the graphic (especially on the “front”)! 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 2-Sided Card to convey information that can’t be completely conveyed via short text.
  • Go wild with 2-Sided Cards! They work best when they’re breaking up walls of text — but it’s just as easy to create walls of cards, too.
  • Attempt to include other interactions (Accordion, Tabs, Reveal) within an a 2-Sided Card.

Unstyled Example

Header

Body

 

Header (optional)

Body Content

 

Example Code

<div id="card-flip-unstyled" class="card flip">
  <div class="card-state">
    <div class="card-header">
      <h3>Header</h3>
    </div>
    <div class="card-body">
      <p>Body</p>
    </div>
    <div class="card-footer">
      &nbsp;
      <button type="button" data-next class="btn">Flip</button>
    </div>
  </div>
  <div class="card-state">
    <div class="card-header">
      <h3>Header <small>(optional)</small></h3>
    </div>
    <div class="card-body">
      <p>Body Content</p>
    </div>
    <div class="card-footer">
      <button type="button" data-next class="btn">Flip Back</button>
    </div>
  </div>
</div>
document.addEventListener('ready', function() { 
  // Initialize Component Instance 
  Card.create('#card-flip-unstyled'); 
  // Handle Complete Event 
  document.getElementById('card-flip-unstyled').addEventListener('complete', function (e) { 
    console.log('I am complete'); 
  }); 
});