Culture Amp
Menu

Card

Cards are a structural component to contain primary content.

Also known as:
WellsPanelsSlatsRowsList RowsTilesContainerContent areaBoxRectangle

AnchorNeed to know

  • Meaningful content—such as data, images, or paragraphs (but not headings)—sit on cards.

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 visualization charts, use large cards. For hero data, use a Tile instead.
  • 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: