Card

Card is a container for grouping related content. It supports an optional header slot, a body with configurable padding, and an optional footer slot.

ExamplesCodeUsageChangelog

Basic

Card content goes here.

Tailwind v4

<Card>
  <p>Card content goes here.</p>
</Card>

With header and footer

Equipment Status

All systems operational.

Tailwind v4

<Card>
  <template #header>
    <span>Equipment Status</span>
  </template>

  <p>All systems operational.</p>

  <template #footer>
    <Button variant="secondary" size="sm">View Details</Button>
  </template>
</Card>

Shadow

Card with a subtle drop shadow.

Tailwind v4

<Card :shadow="true">
  Card with a subtle drop shadow.
</Card>

Padding sizes

padding="none"

padding="sm"

padding="md" (default)

padding="lg"

Tailwind v4

<Card padding="none">...</Card>
<Card padding="sm">...</Card>
<Card padding="md">...</Card>
<Card padding="lg">...</Card>

Props

Prop	Type	Default	Description
padding	'none' | 'sm' | 'md' | 'lg'	'md'	Body padding
shadow	boolean	false	Adds a subtle drop shadow

Slots

Slot	Description
default	Main body content
header	Optional header — rendered above the body with a bottom border
footer	Optional footer — rendered below the body with a top border and a light gray background