Skip to main content

Card

Cards are versatile content structures that group related concepts and tasks together as well as provide an entry point to more complex and detailed information.

Code documentation

Web

Anatomy

The card component is made up of nine elements.

  1. Container
  2. Media slot
  3. Header slot
  4. Default slot
  5. Footer slot
  6. Title
  7. Subtitle
  8. Header divider
  9. Footer divider
Anatomy diagram numbering nine elements of a card.

Variants

Media slot

The media slot allows any type of rich media to be placed at the top of the card. Media can include imagery, video embeds, map embeds, or data visualizations. Custom media layouts can be created and placed within the media slot.

A sample image is positioned above the text of the card and fills to the edges of the card container.

Header slot

The header slot is a container that is positioned at the top of the main content area and spans the full width of the card. A default layout includes a title and subtitle within the header slot, but it may be customized as needed.

A blue rectangle highlights the position of the header slot, just above the default and footer slots. The header includes placeholders for a title immediately above a subtitle.

Default slot

The default slot is a basic container that sits between the header and footer and allows for complete customization of the card’s body content. Text styling is applied to the slot itself to allow for quick insertion of basic text content, but can accommodate a variety of custom layouts and configurations based on the content requirements.

A blue rectangle highlights the position of the default slot in between the header and footer slots. The default slot includes a sample string of text.

The footer slot is positioned at the bottom of the content and allows for custom footer layouts. Default styling is applied to the slot to allow for consistent treatment of basic text.

A blue rectangle highlights the position of the footer slot, just below the header and default slots. The footer slot includes placeholder text.

Dividers

Dividers can be independently added below the header and above the footer. This can help create clearer definition between complex body content and the rest of the card. The dividers can have insets applied to align them to card content as needed.

Two cards include horizontal dividers between the header, default, and footer slots. The left card includes dividers that fill the entire width of the card container. The left edge of the dividers within the right card are indented to be flush with the left edge of the card text.

Padding

By default, cards have medium padding applied to slots to ensure content can be added without butting up against the edges of the container. A more modest padding can be applied using the small preset, while the padding surrounding the default slot can be completely removed with the none preset. Component tokens are available for fine-grain control of padding when needed.

A card with a title and representations of the default and footer slots includes a medium amount of spacing on the left and right edges of the card container.
Medium
A card with a title and representations of the default and footer slots includes a small amount of spacing on the left and right edges of the card container.
Small
A card with a title and representations of the default and footer slots includes a medium amount of spacing to the left and right of the title and footer slot while the default slot fills the entire width of the card container.
None

Behavior

Text overflow

All text within the card’s predefined slots automatically wraps to a new line and forces its containers to grow to fit it.

The sample text of the card's title, subtitle, default slot, and footer slot wrap to multiple lines within the card container.

Media scaling

Media placed within the media slot scales according to its intrinsic aspect ratio. However, custom aspect ratios can be set via component token and media will scale to fill the container.

Two cards compare the scale of a sample media image. The bottom card is approximately twice as wide as the top card with its image scaling proportionally to fill the media slot of the card.

Height

Cards grow in height to accommodate the content of the card.

Two cards compare how a card's height accommodates multiple content elements. The container of the left card hugs content that includes a title and sample body text. The container of the right card hugs content that includes a media image, title, subtitle, body text, and footer text.

Figma

Custom layouts

The card component is designed to accommodate custom content and layouts within each of its slots. To make the most of this structure, we recommend adding a series of relevant card “micro-layouts” (headers, body content, footers, etc.) to your product library. You can then swap the placeholder with combinations of these layouts to create a custom card. If that particular card will be used in multiple places throughout your UI, you can then componentize that specific card with the content in place so it can be consistently reused.

Padding

General padding can be set for the card using the padding property. These options apply broad-level padding settings to the entire card. However, custom paddings may be applied to each individual side of each slot to accommodate specific layout considerations. These can be set on the following layers:

  • card-media-wrapper
  • card-header-wrapper
  • card-default-wrapper
  • card-footer-wrapper

When making overrides to the padding, use variables based on the system's spacing tokens.

Media slot

One known Figma quirk is that images set using the aspect ratio component within the media slot will not persist between card variants. It’s recommended that you establish the variant you want to use (including padding and dividers) and then set your image.

While the card has its own border radius that can be set, the media slot can also have its own border radius applied. This can help accommodate circumstances where the image is inset and needs rounded corners. In Figma, select the card-media layer and adjust the border radius as needed. Note that, when implemented into code, this isn't applying a border radius to the slot itself. Rather, the radius is applied to whatever content is being placed into the slot (ex., an <img> element).