Card
A rounded, elevated surface for grouping related content.
Upgrade to Pro
Unlock every component and priority support.
Your trial ends in 7 days. Upgrade now to keep your projects running without interruption.
<script lang="ts">
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter
} from "$lib/components/ui/card";
import { Button } from "$lib/components/ui/button";
</script>
<Card class="w-full max-w-sm">
<CardHeader>
<CardTitle>Upgrade to Pro</CardTitle>
<CardDescription
>Unlock every component and priority support.</CardDescription
>
</CardHeader>
<CardContent>
<p class="text-sm leading-[1.6] tracking-[-0.39px] text-(--text)/72">
Your trial ends in 7 days. Upgrade now to keep your projects running
without interruption.
</p>
</CardContent>
<CardFooter>
<Button>Upgrade</Button>
<Button variant="ghost">Maybe later</Button>
</CardFooter>
</Card>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the card source from the registry into $lib/components/ui/card.
Usage
<script lang="ts">
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter
} from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button';
</script>
<Card>
<CardHeader>
<CardTitle>Upgrade to Pro</CardTitle>
<CardDescription>Unlock every component and priority support.</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm tracking-[-0.39px] text-(--text)/72">
Your trial ends in 7 days. Upgrade now to keep going.
</p>
</CardContent>
<CardFooter>
<Button>Upgrade</Button>
<Button variant="ghost">Maybe later</Button>
</CardFooter>
</Card>Composition
Every part is optional and accepts a class prop, so you can compose only what you need.
<Card class="rounded-3xl">
<CardHeader>
<CardTitle>Notifications</CardTitle>
</CardHeader>
<CardContent>You have 3 unread messages.</CardContent>
</Card>