Card

Surface for a block of related content: an optional title and description header, then whatever you render inside.

The header snippet replaces the title/description pair when a card needs an action in its corner.

Layout

<script lang="ts">
	import { Card } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
title	string	—	Rendered as the card's heading. Omit for a bare surface.
description	string	—	One line under the title, in muted text.
class	string	—	Merged with the component's own classes, last — so yours win.
header	Snippet	—	Optional custom header content (e.g. an action button) — replaces title/description.
children required	Snippet	—	The content.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Card title="Nightly scan" description="Runs at 02:00 on volume1.">
	<p class="text-muted-foreground text-sm">
		2.56M files · 527 GB indexed, 4 minutes 12 seconds.
	</p>
</Card>

Layout · StatCard · Accordion · AccordionItem · Collapsible · Separator · Table · Scroller

---

← All components · Getting started · Theming · source