Skip to content

Card (Carousel)

A series of static cards displayed in sequence.

How to use a Carousel Card

They are graphic content containers and omitting the graphic portion of the card undermines the usefulness.

Do

  • Use Cards to tell a story.
  • Use Carousel Cards to detail a single topic.
  • Use Carousel Cards to demonstrate change over a subject (time, location, etc.).
  • Maintain a continuity among cards: Each card’s content and appearance should relate to the previous card.
  • Consider cross-card animations. While they take more development, art and planning, animations that occur when the card changes can be amazing ways to demonstrate a concept.

Don’t

  • Use Carousel Cards to cover multiple unrelated concepts.
  • Omit the graphic on any of the cards in the sequence. If nothing else, use the screened image as the background of the card.
  • Use “white” or “blank” background images for the graphic on a card.
  • Attempt to include other interactions within the carousel. There’s no practical way to make this accessible.
  • Use large amounts of content in the Carousel Cards. Carousels hide content and make it more difficult for user to scan for the information they need.

Unstyled Example

Example Code

<!-- details omitted for brevity: See Card or 2-Sided Card for .card-state markup -->
<div id="carousel-unstyled" class="card carousel slide-in-out">
  <div class="state-container">
    <div class="card-state">
      <div class="card-header">...</div>
      <div class="card-body">...</div>
      <div class="card-footer">
        <span class="spacer">&nbsp;</span>
        <button type="button" data-next class="btn">Next</button>
      </div>
    </div>
    <div class="card-state" hidden>...</div>
    <div class="card-state" hidden>...</div>
    <div class="card-state" hidden>...</div>
    <div class="card-state" hidden>...</div>
    <div class="card-state" hidden>
      <div class="card-body">...</div>
      <div class="card-footer">
        <span class="spacer">&nbsp;</span>
        <button type="button" data-first class="btn">Start Over</button>
      </div>
    </div>
  </div>
</div>
document.addEventListener('ready', function() { 
 // Initialize Component Instance 
 Card.create('#carousel-unstyled'); 
 // Handle Complete Event 
 document.getElementById('carousel-unstyled').addEventListener('complete', function (e) { 
   console.log('I am complete'); 
 }); 
});