COMPONENTS

Card

Cards display content or actions related to a single subject.

card-intro

Card is built to be modular and flexible. There are three core sections — Header, Body and Footer. Each of these sections can hold the pre-styled text sub-components (card title, card subtitle, card text) or other content including tables, grids, data visualization, buttons, links, forms, etc.

card-anatomy
  1. Card Container
  2. Card Image
  3. Card Header
  4. Card Body
  5. Card Footer
  6. Elevation

Elevation helps to provide separation from the background and can be used to indicate when a card is clickable. Elevation settings are available as tokens within the design system and elevation-00 through elevation-04 are recommended for cards. By default the Card component uses elevation-02 and elevation-04 is recommended for indicating that a card is clickable. Learn more in the Elevation guidelines.

Elevation specifications

A border can be applied to the card container. It is recommended to only use border when the card has no elevation.

Border specifications

Card text is used for any paragraph text within a card.

Card Text

Depending on the content of the card and display needs, Card Title can be above or below the content and can be in the Card Header or the Card Body.

Card Title

Subtitle can also be used in different areas of the card depending on labeling needs. Link styling can be added as well for clickable text.

Card subtitle

Actions can use Buttons, Links or Icon components. Any styling properties can be carried through from the components.

Actions

Card images are built to fill the width of the card and proportionally scale the height of the images. It is recommended have images span the full width of the card, or full bleed. If padding is needed, placing inside of the Card Body will add the proper padding.

Card image

Cards can be displayed in large, medium and small sizes.

card-sizes
card-basic
card-image
card-contact
card-news
card-dataviz
card-tabular
  • Do not put too much content in a card. Cards are designed for a quick scan about a single topic.
  • Use character counts to keep cards a uniform size.
cards alignment do

DO: Aim to have cards grouped together of similar size and content length. Use character and word count to control for the length of the cards in the same row.

Cards stagger do

DO: Use a masonry layout instead of a uniform grid if card content will create cards of a different length.

Cards  align dont

DON'T: Try to make a uniform grid by extending the bottom of cards in the same row to match a card of a different length.

Cards stagger dont

DON'T: Use leave gaps between rows of cards.