Card
Cards are a structural component to contain primary content.
Also known as:
WellsPanelsSlatsRowsList RowsTilesContainerContent areaBoxRectangle
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
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: