Card

Card is a surface container that groups related content and actions on a bordered, rounded panel. Use it for dashboard tiles, form panels, summaries, and list items where content needs visual separation. Anatomy: Card wraps CardHeader (holding CardTitle and CardDescription), CardContent, and CardFooter.

Anatomy

CardHeader carries the title and description, CardContent the body, CardFooter the actions. CardContent deliberately has no top padding — it is drawn to sit under a header, so a card that uses it alone needs its own padding.

Payout schedule

When settled funds leave the account.

Every Monday, for orders settled by the previous Friday.

<Card class="w-80">
	<CardHeader>
		<CardTitle>Payout schedule</CardTitle>
		<CardDescription>When settled funds leave the account.</CardDescription>
	</CardHeader>
	<CardContent>
		<p class="text-sm">Every Monday, for orders settled by the previous Friday.</p>
	</CardContent>
	<CardFooter>
		<Button variant="secondary">Change schedule</Button>
	</CardFooter>
</Card>

No border, no shadow

A card separates from the page by tone alone: bg-card on bg-background, plus surface-sheen catching the shell's one light source. It gets no border — that step needs no help — and no shadow, because a shadow means *floating above the page* and a card never floats. Only overlays cast one.

Correct

Tone alone, lit by the seam above.

Wrong

A border repeats what the tone already said, and the shadow claims a depth this card does not have.

<div class="grid w-full gap-4 sm:grid-cols-2">
	<Card>
		<CardHeader>
			<CardTitle>Correct</CardTitle>
			<CardDescription>Tone alone, lit by the seam above.</CardDescription>
		</CardHeader>
	</Card>
	<Card class="border-border border shadow-md">
		<CardHeader>
			<CardTitle>Wrong</CardTitle>
			<CardDescription>
				A border repeats what the tone already said, and the shadow claims a depth
				this card does not have.
			</CardDescription>
		</CardHeader>
	</Card>
</div>

A field inside a card

A field reads the surface it sits on and steps off it, so nothing has to be set at the call site. Never give a field a background to make it visible inside a card — that was the old fix, and it is both wrong and inert now that surface-field paints over background-color.

Store name

<Card class="w-80">
	<CardHeader>
		<CardTitle>Store name</CardTitle>
	</CardHeader>
	<CardContent>
		<input
			class="bg-field surface-field placeholder:text-muted h-9 w-full rounded-md px-3 text-sm"
			placeholder="Luxe Fashion"
		/>
	</CardContent>
</Card>

API

`Card`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Snippet rendered inside the surface. For a full card, compose CardHeader / CardContent / CardFooter.
`class`	`string`		Extra Tailwind classes merged onto the root container.

`CardHeader`

Header region of a Card, typically holding a CardTitle and CardDescription.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Header content.
`class`	`string`		Extra Tailwind classes merged onto the root container.

`CardTitle`

Title of a Card, rendered as an <h3> inside CardHeader.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Title content.
`class`	`string`		Extra Tailwind classes merged onto the root container.

`CardDescription`

Supporting copy for a Card, rendered below CardTitle inside CardHeader.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Description content.
`class`	`string`		Extra Tailwind classes merged onto the root container.

`CardContent`

Main content region of a Card, below the optional CardHeader.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Content.
`class`	`string`		Extra Tailwind classes merged onto the root container.

`CardFooter`

Footer region of a Card, typically holding action buttons.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Footer content.
`class`	`string`		Extra Tailwind classes merged onto the root container.