Card

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

Import#

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.

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

Usage#

Basic Usage#

Add content in CardBody to get 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#

<Card maxW="400px">
  <CardHeader>
    <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"
    />
    <IconButton icon={<HamburgerIcon />} aria-label="More" size="sm" variant="ghost" alignSelf="flex-start" />
  </CardHeader>
  <CardBody>
    <Text fontSize="md">Currently building amazing things in the sunny Algarve.</Text>
  </CardBody>
  <CardFooter>
    <Button variant="solid" colorScheme="primary">
      Contact
    </Button>
    <Spacer />
    <IconButton icon={<FaTwitter />} aria-label="Twitter" />
  </CardFooter>
</Card>

Horizontal Card#

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

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

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.

Edit this page on GitHub