Logo

Midnight Owl UI

Card

Stable v1.0.2

A container surface for grouping related content, with optional header and footer slots and three visual variants.

Interactive Playground

Combine every prop live and copy the resulting code.

Solid
Medium (md)
Hidden (clips content)

This card body reflects every playground control above in real time.

New
Live Source Code
<Card >Card content</Card>

Variants

Control the visual weight of the surface using the variant prop.

Solid — an opaque content-colored panel.

Outline — transparent with a border only.

Glass — translucent with a background blur.

Template
<Card variant="solid">Solid — an opaque content-colored panel.</Card>

<Card variant="outline">Outline — transparent with a border only.</Card>

<Card variant="glass">Glass — translucent with a background blur.</Card>

Padding & Sizes

The size prop scales the body padding. Set :padded="false" when the body's own content (a Table, a ComponentPreview) manages its own spacing — used throughout this documentation site's own demo wrappers.

Extra Small
Small
Medium
Large
Extra Large
Template
<Card size="xs">Extra Small padding</Card>
<Card size="sm">Small padding</Card>
<Card size="md">Medium padding</Card>
<Card size="lg">Large padding</Card>
<Card size="xl">Extra Large padding</Card>

<Card :padded="false">
  <Table :records="records" :columns="columns" />
</Card>

Header & Footer

The header and footer slots are only rendered when content is provided, each with its own border separating it from the body.

Shipment #4821

Manila → Singapore, ETA in 3 days.

In Transit
Template
<Card :padded="false">
  <template #header>
    <div class="flex items-center gap-2">
      <Icon icon="lucide:ship" class="h-4 w-4 text-primary" />
      <h3 class="text-sm font-bold text-main">Shipment #4821</h3>
    </div>
  </template>

  <div class="p-5">
    <p class="text-sm text-muted">Manila → Singapore, ETA in 3 days.</p>
  </div>

  <template #footer>
    <div class="flex items-center justify-end gap-2">
      <Badge value="In Transit" severity="info" variant="outline" size="xs" />
    </div>
  </template>
</Card>

API Reference

Props

Name
Type / Signature
Default
Description
variant
"solid" | "outline" | "glass"
"solid"
Visual weight of the card surface — an opaque content-colored panel, a transparent bordered outline, or a translucent blurred glass panel.
size
"xs" | "sm" | "md" | "lg" | "xl"
"md"
Body padding scale, applied when padded is true.
padded
boolean
true
Whether the body region gets padding from the size scale. Set to false when the body content (e.g. a Table or ComponentPreview) manages its own spacing.
overflow
"hidden" | "visible"
"hidden"
Whether content clips to the rounded corners. Set to visible when a child needs to escape the card bounds, e.g. a color-swatch popover trigger.

Slots

Slot Name
Exposed Bindings
Description
default
-
Main body content.
header
-
Optional header region, rendered above the body with a bottom border. Only rendered when content is provided.
footer
-
Optional footer region, rendered below the body with a top border. Only rendered when content is provided.