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>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
</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>
<CardHeader>
<Heading size='md'>Client Report</Heading>
</CardHeader>
<CardBody>
<Stack divider={<StackDivider />} spacing='4'>
<Box>
<Heading size='xs' textTransform='uppercase'>
Summary
</Heading>
<Text pt='2' fontSize='sm'>
View a summary of all your clients over the last month.
</Text>
</Box>
<Box>
<Heading size='xs' textTransform='uppercase'>
Overview
</Heading>
<Text pt='2' fontSize='sm'>
Check out the overview of your clients.
</Text>
</Box>
<Box>
<Heading size='xs' textTransform='uppercase'>
Analysis
</Heading>
<Text pt='2' fontSize='sm'>
See a detailed analysis of all your business clients.
</Text>
</Box>
</Stack>
</CardBody>
</Card>
Card with Image
Place the content within the CardBody to get a nice padding around.
<Card maxW='sm'>
<CardBody>
<Image
src='https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80'
alt='Green double couch with wooden legs'
borderRadius='lg'
/>
<Stack mt='6' spacing='3'>
<Heading size='md'>Living room Sofa</Heading>
<Text>
This sofa is perfect for modern tropical spaces, baroque inspired
spaces, earthy toned spaces and for people who love a chic design with a
sprinkle of vintage design.
</Text>
<Text color='blue.600' fontSize='2xl'>
$450
</Text>
</Stack>
</CardBody>
<Divider />
<CardFooter>
<ButtonGroup spacing='2'>
<Button variant='solid' colorScheme='blue'>
Buy now
</Button>
<Button variant='ghost' colorScheme='blue'>
Add to cart
</Button>
</ButtonGroup>
</CardFooter>
</Card>
Horizontal Card
The card component has display: flex by default. This means you make the
content in a horizontal direction by passing direction="row.
<Card direction='row' overflow='hidden' variant='outline'>
<Image
objectFit='cover'
maxW='200px'
src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
alt='Caffe Latte'
/>
<Stack>
<CardBody>
<Heading size='md'>The perfect latte</Heading>
<Text py='2'>
Caffè latte is a coffee beverage of Italian origin made with espresso
and steamed milk.
</Text>
</CardBody>
<CardFooter>
<Button variant='solid' colorScheme='blue'>
Buy Latte
</Button>
</CardFooter>
</Stack>
</Card>
Advanced Composition
You can compose Card with other components like Avatar, Icon Button and
more for a more advanced layout.
<Card maxW='md'>
<CardHeader>
<HStack spacing='4'>
<Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' />
<Box flex='1'>
<Heading size='sm'>Segun Adebayo</Heading>
<Text>Creator, Chakra UI</Text>
</Box>
<IconButton
variant='ghost'
colorScheme='gray'
aria-label='See menu'
icon={<BsThreeDotsVertical />}
/>
</HStack>
</CardHeader>
<CardBody>
<Text>
With Chakra UI, I wanted to sync the speed of development with the speed
of design. I wanted the developer to be just as excited as the designer to
create a screen.
</Text>
</CardBody>
<Image
objectFit='cover'
src='https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80'
alt='Chakra UI'
/>
<CardFooter justify='space-between'>
<Button flex='1' variant='ghost' leftIcon={<BiLike />}>
Like
</Button>
<Button flex='1' variant='ghost' leftIcon={<BiChat />}>
Comment
</Button>
<Button flex='1' variant='ghost' leftIcon={<BiShare />}>
Share
</Button>
</CardFooter>
</Card>
Multiple cards
Render multiple cards to display content by using the SimpleGrid or your
preferred layout method.
<SimpleGrid columns={3} spacing={4}>
<Card>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Button>View here</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Button>View here</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Button>View here</Button>
</CardFooter>
</Card>
</SimpleGrid>
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.
<Card align='center'>
<CardHeader>
<Heading size='md'> Customer dashboard</Heading>
</CardHeader>
<CardBody>
<Text>View a summary of all your customers over the last month.</Text>
</CardBody>
<CardFooter>
<Button colorScheme='blue'>View here</Button>
</CardFooter>
</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.
<Stack spacing='4'>
{['elevated', 'outline', 'filled', 'unstyled'].map((variant) => (
<Card key={variant} variant={variant}>
<CardHeader>
<Heading size='md'> {variant}</Heading>
</CardHeader>
<CardBody>
<Text>variant = {variant}</Text>
</CardBody>
</Card>
))}
</Stack>
Sizes
Chakra UI provides 3 Card sizes. Use the size prop to change the size and set
the value to sm, md, or lg.
<Stack spacing='4'>
{['sm', 'md', 'lg'].map((size) => (
<Card key={size} size={size}>
<CardHeader>
<Heading size='md'> {size}</Heading>
</CardHeader>
<CardBody>
<Text>size = {size}</Text>
</CardBody>
</Card>
))}
</Stack>
Props
Description
The flex alignment of the card
Type
ResponsiveValue<AlignItems>
Description
Color Schemes for Card are not implemented in the default theme. You can extend the theme to implement them.
Description
The flex direction of the card
Type
ResponsiveValue<FlexDirection>
Description
The flex distribution of the card
Type
ResponsiveValue<JustifyContent>
Type
"elevated" | "outline" | "filled" | "unstyled"