Menu

Also known as:

WellsPanelsSlatsRowsList RowsTilesContainerContent areaBoxRectangle

Card

Cards are a structural component to contain primary content.

Need to know

Meaningful content—such as data, images, or paragraphs (but not headings)—sit on cards.
This does not yet exist as a component in the Component Library.

Visuals

To keep in mind

We need boundaries to define or contextualize primary content in content areas.
Meaningful content—such as data, images, or paragraphs (but not headings)—sit on cards.
For data visualizations, use large cards.
For list data, use cards in a List Row, such as Survey Index, separated by a dark divider.
For tabular data, use cards in a Table Row, separated by a light divider.
For featured items, use a card in a Tile.

When to use and when not to use

When to use

Use a Card to bring primary content off the canvas.

When not to use

For an Empty State use a Well.
For Drag & Drop input, use a Well.
For supplementary content, use a well in content areas or show content without a card in areas such as Side navigation.
An internal content Well helps to define, divide or shape content within a card.
An external content Well wraps one or more cards or pieces of content into a group.

External Links

Here are some examples of other existing design systems: