Black Friday! Up to 90% OFF
<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 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 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 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 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 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 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 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>