Card

v2.4

Card is a flexible component used to group and display content in a clear and concise format.

    Source@chakra-ui/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={{ base: 'column', sm: 'row' }}
overflow='hidden'
variant='outline'
>
<Image
objectFit='cover'
maxW={{ base: '100%', sm: '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>
<Flex spacing='4'>
<Flex flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' />
<Box>
<Heading size='sm'>Segun Adebayo</Heading>
<Text>Creator, Chakra UI</Text>
</Box>
</Flex>
<IconButton
variant='ghost'
colorScheme='gray'
aria-label='See menu'
icon={<BsThreeDotsVertical />}
/>
</Flex>
</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'
flexWrap='wrap'
sx={{
'& > button': {
minW: '136px',
},
}}
>
<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 spacing={4} templateColumns='repeat(auto-fill, minmax(200px, 1fr))'>
<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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by ‚Ė≤ Vercel