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.
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.
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.
- White background
- 1px, smoke (#babcbe) stroke
- 16px minimum padding on all sides
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
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
See the Design tab for examples
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.
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.