Card component reference

Apply specific layout and formatting for rich media such as thumbnail images, titles, or buttons.

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 must 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:

Card		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 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.

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