コンポーネント
カード
関連するコンテンツとアクションをグループ化するコンテナ。
テオドロス・ギルマイ
エンジニアリング
<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リファレンス
このコンポーネントはdiv要素に基づいており、一般的なマージンプロパティをサポートしています。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
asChild | ブール値 | デフォルト値なし |
size | Responsive<"1" | "2" | "3" | "4" | "5"> | "1" |
variant | "surface" | "classic" | "ghost" | "surface" |
例
他の要素として
asChildプロパティを使用して、カードをリンクまたはボタンとしてレンダリングします。このプロパティは、ホバーやフォーカスなどのインタラクティブな状態のスタイルを追加します。
<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プロパティを使用してサイズを制御します。
テオドロス・ギルマイ
エンジニアリング
テオドロス・ギルマイ
エンジニアリング
テオドロス・ギルマイ
エンジニアリング
<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プロパティを使用して視覚スタイルを制御します。
クイックスタート
数分で次のプロジェクトの構築を開始できます
クイックスタート
数分で次のプロジェクトの構築を開始できます
<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>
インセットコンテンツ付き
インセットコンポーネントを使用して、コンテンツをカードの端に揃えます。
タイポグラフィは、書かれた言語を画面に表示する際に、判読しやすく、読みやすく、魅力的にするために、活字を配置する技術と芸術です。
<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>