Card

v2.4

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

Import#

import { Card } from '@chakra-ui/react'

Usage#

Put in some content in the Card.Body to get a basic card.

<Card.Root>
  <Card.Body>
    <Text>View a summary of all your customers over the last month.</Text>
  </Card.Body>
</Card.Root>

Rendering an image in a card#

Place the content within the Card.Body to get a nice padding around.

<Card.Root maxW='sm'>
  <Card.Body>
    <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' gap='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>
  </Card.Body>
  <Card.Footer>
    <Group gap='2'>
      <Button colorPalette='blue'>Buy now</Button>
      <Button variant='ghost' colorPalette='blue'>
        Add to cart
      </Button>
    </Group>
  </Card.Footer>
</Card.Root>

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.Root
  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>
    <Card.Body>
      <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>
    </Card.Body>

    <Card.Footer>
      <Button colorPalette='blue'>Buy Latte</Button>
    </Card.Footer>
  </Stack>
</Card.Root>

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.Root align='center'>
  <Card.Header>
    <Heading size='md'> Customer dashboard</Heading>
  </Card.Header>
  <Card.Body>
    <Text>View a summary of all your customers over the last month.</Text>
  </Card.Body>
  <Card.Footer>
    <Button colorPalette='blue'>View here</Button>
  </Card.Footer>
</Card.Root>

Variants#

Pass the variant prop to change the visual look of the tabs. Set the value to either elevated, outline, subtle.

<Stack gap='4'>
  {['elevated', 'outline', 'subtle'].map((variant) => (
    <Card.Root key={variant} variant={variant}>
      <Card.Header>
        <Heading size='md'> {variant}</Heading>
      </Card.Header>
      <Card.Body>
        <Text>variant = {variant}</Text>
      </Card.Body>
    </Card.Root>
  ))}
</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 gap='4'>
  {['sm', 'md', 'lg'].map((size) => (
    <Card.Root key={size} size={size}>
      <Card.Header>
        <Heading size='md'> {size}</Heading>
      </Card.Header>
      <Card.Body>
        <Text>size = {size}</Text>
      </Card.Body>
    </Card.Root>
  ))}
</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>
  );
}

Open Sandbox

Edit this page on GitHub