Cards & Tiles

Cards and tiles are containers which can contain various content nested within their boundaries.

Key Points

  • Cards are not components, they are containers styled using consistent guidelines
  • Cards can either:
    • Act as a container for other UI components
    • Present a snapshots to more detailed content
  • Cards can be places at two elevations: nested and raised
  • Shadow and border properties vary based on elevation
  • Cards should follow the structural guidelines
  • Cards are not clickable, those are tiles, but that can contain nested buttons
  • Unlike tiles, cards are static only the content changes state

Usage

Containers

Cards have a variety of usages for containing nested elements, too many to create samples for. Before opting for this route, work out if the same layout can be achieved using white space and our vertical rhythm guidelines.

Snapshots

A more common use for cards is to contain a snapshot of information for more detailed content. Snapshots can contain multiple actions and supporting media and content, all of which is outlined in the structure guidelines.

Cards Example

Cards Example

Surfaces

Cards and surfaces have very specific guidelines, particularly for the first row of cards. The cards overlap the inverted surface by a specific amount and these guidelines should be followed for all icard-heavy layouts.

Cards and Invert Example

Cards and Invert Example

Example of cards overlapping inverted content

Aligment

Card's should overlay the inverted area by 64px and there should be a space of 32px between the last element and the top of the card.

These dimensions are the same across all breakpoints.

Key Points

Key Points

Size of the card overlap (1) and the space between cards and content

No Cards

When the inverted area has no cards, and only a title then use the following spacing

  • Small & Medium Viewports - 32px above and below the heading
  • Large and Extra Large Viewports - 64px above and below the heading
No cards example

No cards example

How to space the inverted area when no cards are present