# Card

Source: https://design.ritchiebros.com/components/surfaces/card/

Cards group related concepts and tasks so people can scan, read, and act. They display content in a familiar, recognizable style.

## Figma

The Figma reference for **Card** will appear here once the design link is added.

## Storybook

Interactive examples for **Card** will render here once the Storybook link is wired in.

## Best practices

- Group related information together.
- Prioritize what people most need to know first.
- Use headings that set clear expectations about the card’s purpose.
- Keep to a single flow, or break complex flows into multiple sections.
- Use at most one primary call to action; keep persistent optional actions in the upper-right corner.

## Do’s and don’ts

**Do:** Give a card a clear heading and one primary action.

**Don’t:** Pack a card with many competing calls to action.

## Related components

- [Paper](https://design.ritchiebros.com/components/surfaces/paper/)
- [Box](https://design.ritchiebros.com/components/layout/box/)
- [Accordion](https://design.ritchiebros.com/components/surfaces/accordion/)