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>