Layout · astro-ui · Card

Card

Content container with named-slot header/content/footer composition.

Card composes through named slots — header, default content, footer — and renders a semantic <article>. Four variants, six sizes, optional split dividers and a scrollable body. Prefer slots over title/description props.

← All components

Features

Named-slot composition: header / default / footer
4 variants: default, outline, ghost, bordered
6 sizes: xs → 2xl
split dividers, scrollable body
Semantic <article>, overridable with as
title/description props as a text-only shortcut

Usage

---
import { Card, Button } from "astro-ui";
---

<Card>
  <h3 slot="header">Title</h3>
  <p>Body content.</p>
  <div slot="footer"><Button size="sm">Action</Button></div>
</Card>

Demos

Basic

Header, content and footer compose through slots.

<Card>
  <h3 slot="header">Default card</h3>
  <p>Header, content and footer compose through slots.</p>
  <div slot="footer"><Button size="sm">Confirm</Button></div>
</Card>

Variants

Outline — flat surface.

Ghost card.

Bordered.

<Card variant="outline"><p>Outline — flat surface.</p></Card>
<Card variant="ghost"><p>Ghost card.</p></Card>
<Card variant="bordered"><p>Bordered.</p></Card>

Split & sizes

Borders separate header, content, and footer.

Small card.

<Card split>
  <h3 slot="header">Split dividers</h3>
  <p>Borders separate header, content, and footer.</p>
</Card>
<Card size="sm"><p>Small card.</p></Card>

API

Props

Prop	Type	Default	Description
`as`	`"article" \| "section" \| "div"`	`"article"`	Semantic wrapper element.
`variant`	`"default" \| "outline" \| "ghost" \| "bordered"`	`"default"`	Surface style.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Padding/radius scale.
`split`	`boolean`	`false`	Dividers between header, content, footer.
`scrollable`	`boolean`	`true`	Scrollable body when content overflows.
`title / description`	`string`	`—`	Text-only shortcut props.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Slots

Slot	Description
`header`	Card header (your own heading element).
`default`	Body content.
`footer`	Footer actions.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Slots or title prop?

Slots — they keep your heading hierarchy and allow rich content. title/description exist only for trivial text-only cards.

Changelog

Version history mentioning Card.

v0.1.0 — 2026-11-11

added

Layout (7): Card, AspectRatio, ScrollArea, Separator, Accordion, Collapsible, StickySurface.
Missing semantic tokens: --ui-card, --ui-backdrop, --ui-backdrop-strong, --ui-progress-stripe, --ui-shadow-color, --ui-rating-1…5, --ui-text-3xl, --ui-space-0-5, --ui-space-7, and --ui-transition-delay.