Radix Homepage
Made by WorkOS
Radix Homepage
Made by WorkOS
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlaygroundBlog
Components

Card

Container that groups related content and actions.

View sourceReport an issueView in Playground
Teodros Girmay
Engineering
<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>

API Reference

This component is based on the div element and supports common margin props.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3" | "4" | "5">
"1"
variant
"surface" | "classic" | "ghost"
"surface"

Examples

As another element

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>

Size

Use the size prop to control the size.

Teodros Girmay
Engineering
Teodros Girmay
Engineering
Teodros Girmay
Engineering
<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>

Variant

Use the variant prop to control the visual style.

Quick start
Start building your next project in minutes
Quick start
Start building your next project in minutes
<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>

With inset content

Use the Inset component to align content flush with the sides of the card.

Bold typography

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>
PreviousCallout
NextCheckbox
Edit this page on GitHub.