Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

卡片

用于分组相关内容和操作的容器。

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 参考

¥API Reference

此组件基于 div 元素并支持 常用边距属性。

¥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

使用 asChild 属性将卡片渲染为链接或按钮。此属性为交互状态添加了样式，例如悬停和聚焦。

¥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

使用 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

使用 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>
Previous标注
Next复选框