Use Card to display content in a flexible and extensible container
<Card>
component is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
<Card>
, import it to your component and pass the content you want to display as children.
There are three main parts to the card component: the header, the body, and the footer. You can use any combination of these parts to create the card you need.
Here’s a basic example of a card with a header, body, and footer:
<Card>
will use the card
and card-foreground
properties from the theme.
To learn about themes and how to customize them, see Theming.