Card
View Chakra UI documentation
<Stack spacing='6'> <SimpleGrid gap='6' templateColumns='repeat(auto-fill, minmax(var(--sizes-xs), 1fr))' alignItems='flex-start'> <Card variant='elevated' size='lg'> <CardHeader> <Heading size='lg'>elevated lg</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = elevated</Text> <Text variant='subtle'>size = lg</Text> </CardBody> </Card> <Card variant='elevated'> <CardHeader> <Heading size='md'>elevated md</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = elevated</Text> <Text variant='subtle'>size = md</Text> </CardBody> </Card> <Card variant='elevated' size='sm'> <CardHeader> <Heading size='sm'>elevated sm</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = elevated</Text> <Text variant='subtle'>size = sm</Text> </CardBody> </Card> </SimpleGrid> <SimpleGrid gap='6' templateColumns='repeat(auto-fill, minmax(var(--sizes-xs), 1fr))' alignItems='flex-start'> <Card variant='outline' size='lg'> <CardHeader> <Heading size='lg'>outline lg</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = outline</Text> <Text variant='subtle'>size = lg</Text> </CardBody> </Card> <Card variant='outline'> <CardHeader> <Heading size='md'>outline md</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = outline</Text> <Text variant='subtle'>size = md</Text> </CardBody> </Card> <Card variant='outline' size='sm'> <CardHeader> <Heading size='sm'>outline sm</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = outline</Text> <Text variant='subtle'>size = sm</Text> </CardBody> </Card> </SimpleGrid> <SimpleGrid gap='6' templateColumns='repeat(auto-fill, minmax(var(--sizes-xs), 1fr))' alignItems='flex-start'> <Card variant='filled' size='lg'> <CardHeader> <Heading size='lg'>filled lg</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = filled</Text> <Text variant='subtle'>size = lg</Text> </CardBody> </Card> <Card variant='filled'> <CardHeader> <Heading size='md'>filled md</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = filled</Text> <Text variant='subtle'>size = md</Text> </CardBody> </Card> <Card variant='filled' size='sm'> <CardHeader> <Heading size='sm'>filled sm</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = filled</Text> <Text variant='subtle'>size = sm</Text> </CardBody> </Card> </SimpleGrid> <SimpleGrid gap='6' templateColumns='repeat(auto-fill, minmax(var(--sizes-xs), 1fr))' alignItems='flex-start'> <Card variant='flat' size='lg'> <CardHeader> <Heading size='lg'>flat lg</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = flat</Text> <Text variant='subtle'>size = lg</Text> </CardBody> </Card> <Card variant='flat'> <CardHeader> <Heading size='md'>flat md</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = flat</Text> <Text variant='subtle'>size = md</Text> </CardBody> </Card> <Card variant='flat' size='sm'> <CardHeader> <Heading size='sm'>flat sm</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = flat</Text> <Text variant='subtle'>size = sm</Text> </CardBody> </Card> </SimpleGrid> <SimpleGrid gap='6' templateColumns='repeat(auto-fill, minmax(var(--sizes-xs), 1fr))' alignItems='flex-start'> <Card variant='outlineRaised' size='lg'> <CardHeader> <Heading size='lg'>outlineRaised lg</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = outlineRaised</Text> <Text variant='subtle'>size = lg</Text> </CardBody> </Card> <Card variant='outlineRaised'> <CardHeader> <Heading size='md'>outlineRaised md</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = outlineRaised</Text> <Text variant='subtle'>size = md</Text> </CardBody> </Card> <Card variant='outlineRaised' size='sm'> <CardHeader> <Heading size='sm'>outlineRaised sm</Heading> </CardHeader> <CardBody> <Text variant='subtle'>variant = outlineRaised</Text> <Text variant='subtle'>size = sm</Text> </CardBody> </Card> </SimpleGrid> <SimpleGrid gap='6' templateColumns='repeat(auto-fill, minmax(var(--sizes-md), 1fr))'> <Card cursor='pointer' layerStyle='interactive.raise'> <CardHeader> <Heading size='sm'>elevated interactive raise</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.raise</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.fill'> <CardHeader> <Heading size='sm'>elevated interactive fill</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.fill</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.raise' variant='outline'> <CardHeader> <Heading size='sm'>outline interactive raise</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.raise</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.fill' variant='outline'> <CardHeader> <Heading size='sm'>outline interactive fill</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.fill</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.raise' variant='filled'> <CardHeader> <Heading size='sm'>filled interactive raise</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.raise</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.fill' variant='filled'> <CardHeader> <Heading size='sm'>filled interactive fill</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.fill</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.raise' variant='flat'> <CardHeader> <Heading size='sm'>flat interactive raise</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.raise</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.fill' variant='flat'> <CardHeader> <Heading size='sm'>flat interactive fill</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.fill</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.raise' variant='outlineRaised'> <CardHeader> <Heading size='sm'>outlineRaised interactive raise</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.raise</Text> </CardBody> </Card> <Card cursor='pointer' layerStyle='interactive.fill' variant='outlineRaised'> <CardHeader> <Heading size='sm'>outlineRaised interactive fill</Heading> </CardHeader> <CardBody> <Text variant='subtle'>layerStyle = interactive.fill</Text> </CardBody> </Card> </SimpleGrid> </Stack>