Card component reference
Apply specific layout and formatting for rich media such as thumbnail images, titles, or buttons.
Betty Blocks avatar
Written by Betty Blocks
Updated over a week ago

You can use the default card components to group content into visible units with controlled information layout and appearance. Using cards, you can create a linked entry point for further details on a piece of content. You need to base your design decisions on the information you want to present.

In certain cases, a list may prove a more suitable option as part in your design.

The following card components are available in the Components menu when building your pages:


Square: Apply a rounded outline or square outline.
Variant: The variant of the card, giving an elevated or an outlined effect.
Elevation: The level of elevation. Only available when choosing the Elevation variant.

Card Content

The card content component is the container part of the card component.

Card Header

The card header component is a header component placed within a card component.

Avatar: The avatar of the card header.

Avatar type: Option to show text or an image as avatar

Title: The title that is displayed at the top of the card.

Sub header: A header that will be displayed underneath the title.

Card Media

Media component that can be used used to display images, videos or i-frames.

Media type: The type of
Source: The source url
Title: The title of the card media.

Card Actions

The card actions component is a container used for buttons within a card component.
Alignment: The alignment of the child components
Disable spacing: Disables the spacing of the card action.

When to use cards in your design

Cards provide advantages for dashboard applications or statistical aggregation where you want to use to display different content at the same time on the same page.

Did this answer your question?