Card

A card serves as an entry point to more detailed information. Cards may contain rich content, such as photos, text, link, list, tables, you name it.

Example

Variants

Basic

Card header and footer

Card header holds a title and possibly an action button. Card footer is usually used for additional information or confirm/cancellation buttons.

Card header actions

To add an action button in card header, a Bar is added to wrap things nicely.

Multiple content sections

Props

This component does not have any prop types

bool

node

node | string | element

This component does not have any prop types

Accessibility

The <Card /> component is purely presentational and does not carry any semantic meaning. The only thing you should care about is the usage of correct heading level in <CardHeader title="" />