Cards

A visual presentation of content within a frame. Usually has a image associated. Think of it like a baseball card or a business card - Quick displays of information.

Related Patterns

View Demo
Design
HTML

CSS Classes:

1. .card-figure

  • Main card information, such as splash image or theme thumbnails.

2. card-image

  • Static image. Can optionally be wrapped in an a to make it clickable
  • Can contain overlay with card-figcaption as its sibling. This also requires card-figcaption-body to hold text and optionally card-figcaption-button as an action

3. card-body

  • Typically informational content (text), not necessarily clickable.
  • 1-2 Calls to Action allowed, if needed

Cards are usually displayed on a grid, but their behaviour on mobile is to always be aligned to a single column.

Accessibility

Cards can have hidden content in them, if you're adding a figure caption. Be sure you take keyboard accessibility and screen reading into account when forming your content.

  • Figure captions should be tab-accessible, and toggled visible when tab-focused.
  • Any actions you have within the figure captions should be tab-accessible once the figure caption becomes visible.