Card

Displays a card with header, content, and footer.

Loading preview…

Installation

Usage

Use card to group related content. Compose with Card.Header, Card.Content, and Card.Footer. Set size to default or sm. Place header actions in Card.Action.

1<script lang="ts">
2	import * as Card from '~/components/card';
3</script>
4
5<Card.Root class="w-full max-w-sm">
6	<Card.Header>
7		<Card.Title>Card Title</Card.Title>
8		<Card.Description>Card Description</Card.Description>
9	</Card.Header>
10	<Card.Content>
11		<p>Card Content</p>
12	</Card.Content>
13	<Card.Footer>
14		<p>Card Footer</p>
15	</Card.Footer>
16</Card.Root>