Card

v2.4

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

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.Root name='Segun Adebayo' src='https://bit.ly/sage-adebayo'>
          <Avatar.Image />
          <Avatar.Fallback />
        </Avatar.Root>

        <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>

The Card component gets its style from the default Chakra UI theme. However, in some scenarios, you might need to customize its theming to match your design requirements.

To customize the theme for Card, you would need to modify the base or default styles and modifier styles that alter its size or visual style. You would then need to apply specific styles to each part, size or variant of the Card.

Anatomy#

The Card component is a multipart component and consists of the following parts:

A: container
B: header
C: body
D: footer

Theming properties#

The properties that affect the theming of the Card component are:

variant: The visual variant of the card. It defaults to elevated.
size: The size of the card. It defaults to md.

Theming utilities#

Theming utilities are functions that are required to create the style configs and style objects during theming.

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

Customizing the default theme#

Let's say we want to customize the default card theme by changing the styles of the container, header, body and footer. Here's what that will look like:

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  container: {
    backgroundColor: '#e7e7e7',
  },
  header: {
    paddingBottom: '2px',
  },
  body: {
    paddingTop: '2px',
  },
  footer: {
    paddingTop: '2px',
  },
})

const sizes = {
  md: definePartsStyle({
    container: {
      borderRadius: '0px',
    },
  }),
}

export const cardTheme = defineMultiStyleConfig({ baseStyle, sizes })

After customizing the card theme, we then import it into our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { cardTheme } from './components/Card'

const theme = extendTheme({
  components: {
    Card: cardTheme,
  },
})

export default theme

This is a crucial step to make sure that any changes we make to the card theme are applied.

Adding a custom size#

Card comes in sm, md and lg sizes but let's assume we want to include an extra large card size. Here's how we can do that:

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

// define custom styles for xl size
const sizes = {
  xl: definePartsStyle({
    container: {
      borderRadius: "36px",
      padding: "40px"
    }
  })
};

// export sizes in the component theme
export const cardTheme = defineMultiStyleConfig({ sizes });

// now we can use the new `xl` size
<Card size="xl" ... />

Adding a custom variant#

You can add a custom variant to Card by specifying the name of your variant and giving specific styles to the necessary parts.

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

// define custom styles for funky variant
  const variants = {
  funky: definePartsStyle({
    container: {
      borderColor: "red",
      borderWidth: "3px"
    }
  })
};

// export variants in the component theme
export const cardTheme = defineMultiStyleConfig({ variants });

// now we can use the new funky variant
<Card variant="funky" ... />

Changing the default properties#

To set the default size and variant of every card in our app, we define the defaultProps and set the default size and variant.

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

// define which sizes and variants are applied by default
const defaultProps = {
  // in this example, we will set the default size and variant
  size: 'xl',
  variant: 'funky',
}

// export the default properties in the component theme
export const cardTheme = defineMultiStyleConfig({ defaultProps })

Every time you add anything new to the theme, you need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Showcase#

import {
  ChakraProvider,
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Heading,
  Center,
} from '@chakra-ui/react';
import theme from './theme';
import { ColorModeSwitcher } from './ColorModeSwitcher';

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box position="relative" h="100vh" p={12}>
        <Center>
        <Card >
        <CardHeader>
          <Heading>Hike with me</Heading>
        </CardHeader>
        <CardBody>
          Hiking is a long, vigorous walk, usually on trails or footpaths in the
          countryside. Walking for pleasure developed in Europe during the
          eighteenth century.
        </CardBody>
        <CardFooter>
          <Button colorScheme="blue">Sign up</Button>
        </CardFooter>
      </Card>
        </Center>
        <ColorModeSwitcher aria-label="toggle theme" position="absolute" bottom={4} left={4} />
      </Box>
    </ChakraProvider>
  );
}

Edit this page on GitHub