Card

Cards collect and divide content into designated areas. Cards can be actionable themselves or have actionable elements within.

Overview

Resources

Changelog

Source code

Ember

Storybook

Figma

Variations

Default card

Use the default card in most cases when looking to group related content together. Card is a container, and this is an example of the card component with additional elements inside of it.

Actionable card

When enabled, actionable cards provide visual states when interacted with on hover, active, or focus. Actionable cards should not have buttons or other actions inside of them.

Secondary card

Secondary cards are most often used for apps and integrations, where the card and its content are small and often aligned with many repeating cards in rows or columns. Secondary cards should always be actionable as these cards often lack the extra space to fit in a button.

Usage

Best practices

✅ DO

Do use to visually separate content that is meant to draw focus. Use cards with dropshadows for the most important information on the page.

🚫 DON’T

Don’t place cards inside of another card. Review our rules on elevation and for separation within cards, use dividiers or a small banner to call content out separately.