Card experimental
기본 surface wrapper입니다. header, title, description, content, footer anatomy로 구획형 콘텐츠를 묶습니다.
Preview
배포 준비 상태
오늘 변경된 foundation wrapper를 검토해요.
토큰 recipe와 React/Svelte anatomy가 같은 class와 data attribute를 사용해요.
<script lang="ts">
import {
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@odbd/svelte'
</script>
<Card variant="elevated">
<CardHeader>
<CardTitle>배포 준비 상태</CardTitle>
<CardDescription>오늘 변경된 foundation wrapper를 검토해요.</CardDescription>
</CardHeader>
<CardContent>
토큰 recipe와 React/Svelte anatomy가 같은 class와 data attribute를 사용해요.
</CardContent>
<CardFooter>
<Button variant="outline" size="sm">보류</Button>
<Button size="sm">승인</Button>
</CardFooter>
</Card>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import { Card } from '@odbd/svelte' import { Card } from '@odbd/react/card'