A card displays content related to a single subject and acts as an entry point to more detailed information. Card blocks can be combined in a variety of ways.
Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different card blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width, except when displaying content that can be expanded.
- Do not use cards as or in Top bars
- Do not use cards as Sidesheets
- Do not use cards as or in Nav drawers
- Do not use cards as Lists
- Do not use cards inside other cards
- Do not use cards as galleries
- Do not use cards with text over photography or illustrations
- Do not use cards to group large sets of information
container is the only required block in a card. The card aligns to the artboard/frames grid columns, which gives the card a fluid width. Content blocks within the card, however, follow the card container's own grid. There are four available
warning. The primary action of a card is generally the card itself being a large touch target.
There are twelve title blocks to choose between:
Avatar H6 caption,
Avatar H6 caption action,
Overline H6 action,
Overline H6 avatar,
H4 body short,
H4 body short action,
H4 body short avatar,
H5 body short,
H5 body short action and
H5 body short avatar.
Title blocks can have:
- Tags, badges and free text
- Overflow menu
There are three rich media blocks to choose between:
rich-media/middle which is to be used when it is sandwiched between other blocks,
rich-media/last which is to be used when it is the last block and
rich-media/leading-image which is to be used when it is the first block. The
rich-media/last blocks are placeholder blocks, meaning that you can add your own rich content to them. Rich media can be used full-width, and if it's the first block on the card, it can go all the way to top
Rich media blocks can have:
- within the grid when between blocks and full width when leading
There are three supplemental action blocks to choose between:
supplemental-actions/meta. Supplemental actions are represented by buttons, icons, UI controls and supporting text. A rule of thumb is to place them at the bottom of a card.
Supplemental action blocks can have:
- Supplemental actions
- Content that can be expanded should use full-width dividers, ignoring the horizontal spacing.
- Overflow menu
- UI controls