Card

Card presents a title and content as an article or a whole-card link, with optional media, metadata and footer snippets.

01Preview

Chaos Machine

A crypto-jukebox by distributed gallery.

02Usage

Load @dg/ui/styles.css once in the root layout.

<script>
  import { Card } from "@dg/ui";
</script>

<Card title="Collection" href="/artworks">
  {#snippet header()}<span>Artworks</span>{/snippet}
  <p>Explore the collection.</p>
  {#snippet footer()}<span>2026</span>{/snippet}
</Card>

03Notes

Inside a divided Grid the card drops its border and takes the layout inset, so its content aligns with the shell gutter; the grid's dividers separate the cells.
Native HTML attributes, DOM callbacks, class and style are forwarded to the article or anchor.
Forwarding uses native attribute types; unknown props are not supported. Pass class as a string and use link attributes only when href renders an anchor.
Header and footer tracking follow --ui-letter-spacing; linked-card focus uses the shared stroke and color with a local inset.
Cards provides automatic numbering through context. Direct Card children use their position; explicit numbers remain visible when automatic numbering is disabled. Optional footer content stays bottom-aligned and adds a separator. Content padding and content gaps are independent.

04Parameters

Name	Type	Default	Description
`num`	`string \| number \| false`	`undefined`	Omit for inherited automatic numbering inside `Cards`. A custom value overrides it; false hides the number. Standalone cards have no automatic number.
`title`	`string \| Snippet`	`""`	Title text or custom title content. An empty title omits the heading.
`level`	`2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level, independent of the card's visual size.
`href`	`string`	`undefined`	Makes the whole card a native link. Do not put nested links or controls inside a linked card.
`header`	`Snippet`	`undefined`	Optional metadata opposite the number.
`media`	`Snippet`	`undefined`	Optional image or other media before the title.
`children`	`Snippet`	`undefined`	Main card content.
`footer`	`Snippet`	`undefined`	Optional content at the bottom of the card.

05Accessibility

Choose a heading level consistent with surrounding content. A linked Card must not contain nested links, buttons or form inputs. Give media meaningful alternative text when it conveys content.

Related subjects

Markdown source: components/card