Container that groups related content and actions.
<Card>
<Flex gap="3" align="center">
<Avatar
size="3"
src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
radius="full"
fallback="T"
/>
<Box>
<Text as="div" size="2" weight="bold">
Teodros Girmay
</Text>
<Text as="div" size="2" color="gray">
Engineering
</Text>
</Box>
</Flex>
</Card>
This component is based on the div element and supports common margin props.
Use the asChild prop to render the card as a link or a button. This prop adds styles for the interactive states, like hover and focus.
<Card asChild style={{ maxWidth: 350 }}>
<a href="#">
<Text as="div" size="2" weight="bold">
Quick start
</Text>
<Text as="div" color="gray" size="2">
Start building your next project in minutes
</Text>
</a>
</Card>
Use the size prop to control the size.
<Flex gap="3" direction="column">
<Card size="1" style={{ width: 350 }}>
<Flex gap="3" align="center">
<Avatar size="3" radius="full" fallback="T" color="indigo" />
<Box>
<Text as="div" size="2" weight="bold">
Teodros Girmay
</Text>
<Text as="div" size="2" color="gray">
Engineering
</Text>
</Box>
</Flex>
</Card>
<Card size="2" style={{ width: 425 }}>
<Flex gap="4" align="center">
<Avatar size="4" radius="full" fallback="T" color="indigo" />
<Box>
<Text as="div" weight="bold">
Teodros Girmay
</Text>
<Text as="div" color="gray">
Engineering
</Text>
</Box>
</Flex>
</Card>
<Card size="3" style={{ width: 500 }}>
<Flex gap="4" align="center">
<Avatar size="5" radius="full" fallback="T" color="indigo" />
<Box>
<Text as="div" size="4" weight="bold">
Teodros Girmay
</Text>
<Text as="div" size="4" color="gray">
Engineering
</Text>
</Box>
</Flex>
</Card>
</Flex>
Use the variant prop to control the visual style.
<Flex direction="column" gap="3" style={{ maxWidth: 350 }}>
<Card variant="surface">
<Text as="div" size="2" weight="bold">
Quick start
</Text>
<Text as="div" color="gray" size="2">
Start building your next project in minutes
</Text>
</Card>
<Card variant="classic">
<Text as="div" size="2" weight="bold">
Quick start
</Text>
<Text as="div" color="gray" size="2">
Start building your next project in minutes
</Text>
</Card>
</Flex>
Use the Inset component to align content flush with the sides of the card.
<Card size="3">
<Flex>
<Inset side="left" pr="current">
<Flex
align="center"
justify="center"
px="7"
style={{ background: '#24292F', height: '100%' }}
>
<GitHubLogoIcon color="white" height="40" width="40" />
</Flex>
</Inset>
<Box style={{ maxWidth: 400 }}>
<Text as="div" color="gray" mb="1" size="2">
github.com
</Text>
<Text size="5">
Official Node.js SDK for interacting with the AcmeCorp API.
</Text>
</Box>
</Flex>
</Card>