Container that groups related content and actions.
<Box maxWidth="240px">
<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>
</Box>
This component is based on the div
element and supports common margin props.
Prop | Type | Default |
---|---|---|
asChild | boolean | No default value |
size | Responsive<"1" | "2" | "3" | "4" | "5"> | "1" |
variant | "surface" | "classic" | "ghost" | "surface" |
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.
<Box maxWidth="350px">
<Card asChild>
<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>
</Box>
Use the size
prop to control the size.
<Flex gap="3" direction="column">
<Box width="350px">
<Card size="1">
<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>
</Box>
<Box width="400px">
<Card size="2">
<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>
</Box>
<Box width="500px">
<Card size="3">
<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>
</Box>
</Flex>
Use the variant
prop to control the visual style.
<Flex direction="column" gap="3" maxWidth="350px">
<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.
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
<Box maxWidth="240px">
<Card size="2">
<Inset clip="padding-box" side="top" pb="current">
<img
src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
alt="Bold typography"
style={{
display: 'block',
objectFit: 'cover',
width: '100%',
height: 140,
backgroundColor: 'var(--gray-5)',
}}
/>
</Inset>
<Text as="p" size="3">
<Strong>Typography</Strong> is the art and technique of arranging type to
make written language legible, readable and appealing when displayed.
</Text>
</Card>
</Box>