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.
Anatomy
The card component is made up of nine elements.
- Container
- Media slot
- Header slot
- Default slot
- Footer slot
- Title
- Subtitle
- Header divider
- Footer divider
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.
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.
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.
Footer slot
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.
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.
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.
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.
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.
Height
Cards grow in height to accommodate the content of the card.
Component tokens
The following component tokens are available for customizing the card component.
Sample references including the swatch and computed values currently represent the applied light theme.
The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.
Color
Border
Shadow
Space
Other
Dependencies
The card component uses the following components:
