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 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:

• Ant Design: card
• Carbon design system: tile
• Material: card
• Polaris: card
• Polaris: callout card
• Thumbprint: service card
• Liferay: list variations
• Liferay: list
• Liferay: card
• Liferay: card variation
• Liferay: card navigation