Chakra Cards - Chakra UI Dashboard

Discover 8 Chakra Cards available in Chakra UI Dashboard

Card Stats

Component from Chakra UI Dashboard Builder
<Card data-type='Card'
              overflow='hidden'
              variant='outline'
              >
<CardBody data-type='CardBody'>
              <Stat data-type='Stat'>
               <StatLabel data-type='StatLabel'>Sent</StatLabel>
               <StatNumber data-type='StatNumber'>345,670</StatNumber>
               <StatHelpText data-type='StatHelpText'>
                 <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                 23.36%
               </StatHelpText>
             </Stat>
</CardBody>
            </Card>

Card Product

Component from Chakra UI Dashboard Builder
<Card data-type='Card' maxW='sm'>
  <CardBody data-type='CardBody'>
    <Image data-type='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'></Image>
    <Stack data-type='Stack' mt='6' spacing='3'>
      <Heading data-type='Heading' size='md'>Living room Sofa</Heading>
      <Text data-type='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 data-type='Text' color='blue.600' fontSize='2xl'>
        $450
      </Text>
    </Stack>
  </CardBody>
  <CardFooter data-type='CardFooter'>
    <ButtonGroup data-type='ButtonGroup' spacing='2'>
      <Button data-type='Button' variant='solid' colorScheme='blue'>
        Buy now
      </Button>
    </ButtonGroup>
  </CardFooter>
</Card>

Card With Divider

Component from Chakra UI Dashboard Builder
<Card data-type='Card'>
  <CardHeader data-type='CardHeader'>
    <Heading data-type='Heading' size='md'>Client Report</Heading>
  </CardHeader>

  <CardBody data-type='CardBody'>
    <Stack data-type='Stack' spacing='4'>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Summary
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          View a summary of all your clients over the last month.
        </Text>
      </Box>
      <Divider data-type='Divider' orientation='horizontal'></Divider>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Overview
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          Check out the overview of your clients.
        </Text>
      </Box>
      <Divider data-type='Divider' orientation='horizontal'></Divider>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Analysis
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          See a detailed analysis of all your business clients.
        </Text>
      </Box>
    </Stack>
  </CardBody>
</Card>

Card Stats Dark

Component from Chakra UI Dashboard Builder
<Card data-type='Card'
                overflow='hidden'
                variant='outline'
                bg="blackAlpha.900"
                >
<CardBody data-type='CardBody'>
                <Stat data-type='Stat'>
                 <StatLabel data-type='StatLabel' color="white">Visits</StatLabel>
                 <StatNumber data-type='StatNumber' color="white">345,670</StatNumber>
                 <StatHelpText data-type='StatHelpText' color="white">
                   <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                   23.36%
                 </StatHelpText>
               </Stat>
</CardBody>
              </Card>

Card Post

Component from Chakra UI Dashboard Builder
<Card data-type='Card' maxW='md'>
 <CardHeader data-type='CardHeader'>
   <Flex data-type='Flex' spacing='4'>
     <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
       <Avatar data-type='Avatar' name='Segun Adebayo' src='https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NzF8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60'></Avatar>
       <Box data-type='Box'>
         <Heading data-type='Heading' size='sm'>Aloïs Pierre</Heading>
         <Text data-type='Text'>Creator of Studio 23</Text>
        </Box>
      </Flex>
    </Flex>
  </CardHeader>
 <CardBody data-type='CardBody'>
   <Text data-type='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 data-type='Image'
    objectFit='cover'
    src='https://images.unsplash.com/photo-1546815670-5c5e437ffc6d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c3RhcmJ1Y2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60'
    alt='Starbucks'
  ></Image>

 <CardFooter data-type='CardFooter'
    justify='space-between'
    flexWrap='wrap'
  >
   <Button data-type='Button' mr='2' flex='1' leftIcon='{<ChatIcon/>}'>
      Comment
    </Button>
   <Button data-type='Button' flex='1' leftIcon='{<LinkIcon/>}'>
      Share
    </Button>
  </CardFooter>
</Card>

Card Project

Component from Chakra UI Dashboard Builder
<Card data-type='Card'>
   <CardHeader data-type='CardHeader'>
     <Heading data-type='Heading' size='sm' mb='4'> Loopple Dashboard</Heading>
     <AvatarGroup data-type='AvatarGroup'>
       <Avatar data-type='Avatar' name='Ryan Florence' size='sm' src='https://bit.ly/ryan-florence'></Avatar>
       <Avatar data-type='Avatar' name='Segun Adebayo' size='sm' src='https://bit.ly/sage-adebayo'></Avatar>
       <Avatar data-type='Avatar' name='Kent Dodds' size='sm' src='https://bit.ly/kent-c-dodds'></Avatar>
       <Avatar data-type='Avatar' name='Prosper Otemuyiwa' size='sm' src='https://bit.ly/prosper-baba'></Avatar>
       <Avatar data-type='Avatar' name='Christian Nwamba' size='sm' src='https://bit.ly/code-beast'></Avatar>
      </AvatarGroup>
    </CardHeader>
   <CardBody data-type='CardBody'>
     <Text data-type='Text'>View a summary of all your customers over the last month.</Text>
    </CardBody>
   <CardFooter data-type='CardFooter'>
     <Button data-type='Button'>View project</Button>
    </CardFooter>
  </Card>

Card Horizontal

Component from Chakra UI Dashboard Builder
<Card data-type='Card'
  direction={{base:'column',sm:'row'}}
  overflow='hidden'
  variant='outline'
>
  <Image data-type='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 data-type='Stack'>
    <CardBody data-type='CardBody'>
      <Heading data-type='Heading' size='md'>The perfect latte</Heading>

      <Text data-type='Text' py='2'>
        Caffè latte is a coffee beverage of Italian origin made with espresso
        and steamed milk.
      </Text>
    </CardBody>

    <CardFooter data-type='CardFooter'>
      <Button data-type='Button' variant='solid' colorScheme='blue'>
        Buy Latte
      </Button>
    </CardFooter>
  </Stack>
</Card>

Card Vertical

Component from Chakra UI Dashboard Builder
<Card data-type='Card' overflow="hidden" variant="outline">
                    <Image data-type='Image' alt="Caffe Latte" src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib" objectFit="cover" maxW='100%'>
                    </Image>
                    <Stack data-type='Stack'>
                        <CardBody data-type='CardBody'>
                            <Heading data-type='Heading' size="md">
                                The perfect latte
                            </Heading>
                            <Text data-type='Text' py="2">
                                Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.
                            </Text>
                        </CardBody>
                        <CardFooter data-type='CardFooter'>
                            <Button data-type='Button' type="button" variant="solid" colorScheme="blue">
                                Buy Latte
                            </Button>
                        </CardFooter>
                    </Stack>
                </Card>