Card

Import#

Chakra UI exports 4 components to help you create a Card.

import { Card, CardHeader, CardBody, CardFooter } from '@chakra-ui/react'

• Card: The parent wrapper that provides context for its children.
• CardHeader: The wrapper that contains a card's header.
• CardBody: The wrapper that houses the card's main content.
• CardFooter: The footer that houses the card actions.

Usage#

Basic Card#

Put in some content in the CardBody to get a basic card.

Card with Divider#

There are instances when you have multiple content to display in the CardBody and you may want to add dividers between them.

Card with Image#

Place the content within the CardBody to get a nice padding around.

Horizontal Card#

The card component has display: flex by default. This means you make the content in a horizontal direction by passing direction="row.

Advanced Composition#

You can compose Card with other components like Avatar, Icon Button and more for a more advanced layout.

Multiple cards#

Render multiple cards to display content by using the SimpleGrid or your preferred layout method.

Centering content in a card#

Card comes with an inherent display="flex" on it, so if you'd like to center the content of your card, you can do this easily by passing align="center" to the Card.

Variants#

Chakra UI provides 4 card variants - elevated, outline, filled, and unstyled. Use the variant prop to change the style of your card. If the variant prop is not passed, the default variant, elevated is used.

Sizes#

Chakra UI provides 3 Card sizes. Use the size prop to change the size and set the value to sm, md, or lg.

Props#