Refine By

Cards

  • Contents:
  • Cards are typically used to hold content elements such as photos, text, icons and CTAs about a single item.
  • They’re suitable for showing different sizes of content, such as photos with captions of variable length.
  • A collection of cards can be organized into a list or grid.
  • In our mobile apps, cards are usually referred to as tiles.

Guidelines

 

  • Use cards to enhance visual comprehension of content.
  • Do not use for content that the user will quickly scan. Lists are preferred for quick scanning of content.
  • Do not overload cards with extraneous info or actions.
  • Keep the actions on a card to a maximum of two for primary actions, and two for secondary actions.
  • Ensure text legibility is preserved when overlaying a background image in a card.
  • Cards in a collection should have a persistent width and height to preserve visual harmony.
  • Ensure cards support only one gesture on mobile. For example, swiping should move the entire card and not the content in it.
  • The primary action in a card can be the card itself or a CTA.
  • The content inside a card can be updated using interactive controls such as sliders, tabs¬†or switches.
  • Use cards as entry points to more detailed and complex views.
  • Do not overload cards with extraneous info or actions.

Accessibility

 

  • When traversing through focus points in a card, all elements are visited before moving to the next card.

See Also

 

Related Elements

Version History

Date/Time of ChangeWho Made the ChangeChange Details