Cards

Definition

Cards provided a visible, unifying container for content and related actions.

Cards are flexible. They can contain text, media, dynamic data, design elements, UI controls, or actions. Cards are usually interactive and may contain multiple related actions.

Common Characteristics

All cards have a rectangular container with a solid background and 4px rounded corners. The minimum height and width is 80px x 80px.

Cards may be any height and width needed (subject to minimums), and any aspect ratio needed.

Flexible Content

Cards are intentionally flexible to allow designers to display content as needed. Cards may include headings, text, dynamic data, interactive elements, and other PRISM components.

Default Elements

  • White background
  • 1px, smoke (#babcbe) stroke
  • 16px minimum padding on all sides

Options

Default elements can be changed and additional elements added as needed. Designers and developers can optionally:

  • Change the default background color
  • Change the default stroke color
  • Hide the stroke
  • Change the minimum padding to 8px for slim cards.
  • Add a 40px high footer for one or more Actions (text, icons, or both)
  • Add media: top-aligned, left-aligned, or as a background
  • Media can have an optional margin

Footer Rules

Cards may have an optional footer. The footer has the following defined rules:

  • 40px tall and the same width as the card body
  • Separated from the card body by a divider
  • Can only contain Actions (text, icons, or both)
  • Text Actions are anchored to the left
  • Icon Actions are anchored to the right
  • Actions can be nested in a menu

Examples

See the Design tab for examples

Do

Use cards to visually organize and unify content.

Use cards to summarize the key elements of a larger data set.

Insert content wisely. If in doubt, consult with PRISM UX leaders.

Change defaults with a clear rationale such as branding or a specific state.

Don't

Overload cards with too many details. For example, a search result might be presented in a card, but not an entire details page.

Use transparent or semi-transparent backgrounds.