Card

A bordered surface with a hairline top highlight — no drop shadow. Wrap content in optional header and footer snippets around the default body slot.

Examples

Body only

Every slot is optional — a card with only a body still works.

Show code

<Card>
  Just the body slot.
</Card>

As a link

Button

An href turns the whole card into a link.

Show code

<Card href="/components/button">
  {#snippet header()}
    Button
  {/snippet}
  <p>An href turns the whole card into a link.</p>
</Card>

Header and footer

Monthly report

Revenue is up 12% on last month, driven mostly by the new pricing tier.

Show code

<Card>
  {#snippet header()}
    Monthly report
  {/snippet}

  <p>Body content.</p>

  {#snippet footer()}
    Updated 2 minutes ago
  {/snippet}
</Card>

Props

Prop	Type	Default	Description
`header`	`Snippet`	`—`	Optional snippet rendered above the body, separated by a border.
`footer`	`Snippet`	`—`	Optional snippet rendered below the body, in muted text.
`children`	`Snippet`	`—`	The card body.
`href`	`string`	`—`	Renders an <a> root, so the whole card is clickable.

Any other attribute is spread onto the root element — a <div>, or an <a> when href is set — so class, id and style all work as expected.