Card

Titled panel container.

A bordered panel with an optional title (string or snippet), meta, description, and action slot, plus full-bleed `media` and a `footer` band. Becomes a link (`href`) or button (`onclick`) when interactive, with keyboard activation. `outlined` or `elevated` surface; the title renders at a configurable heading level for a correct document outline.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Card } from 'dssoca';
</script>

<Card title="Services" meta="6 of 7 healthy"
  description="last sync 2m ago" variant="elevated">
  …content…
  {#snippet footer()}view all{/snippet}
</Card>

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<div class="ss-card" aria-labelledby="card-s1">
  <div class="head">
    <div class="heading">
      <div class="title" id="card-s1" role="heading" aria-level="3">Uptime</div>
    </div>
    <div class="actions">
      <div class="meta">24h</div>
    </div>
  </div>
  <div class="body">
    <p>All systems nominal.</p>
  </div>
</div>

Props

Prop	Type	Default	Description
`title`	`string \| Snippet`	—	Heading text, or a Snippet for inline icons/badges in the title.
`meta`	`string`	—	Secondary label rendered to the right of the title.
`description`	`string`	—	Muted description rendered under the heading.
`action`	`Snippet`	—	Header controls (buttons, menus) rendered to the right.
`media`	`Snippet`	—	Full-bleed visual above the head (zero side padding).
`footer`	`Snippet`	—	Footer band mirroring the head, rendered only when provided. Typically holds an action row (e.g. a secondary `ghost` + primary `Button`); the band is a `space-between` flex row, so wrap multiple actions in a single element to group (and left-align) them.
`href`	`string`	—	Makes the whole card a primary link to this href.
`external`	`boolean`	`false`	Off-site `href`: the overlay link opens in a new tab with `rel="noopener noreferrer"` and announces "(opens in a new tab)" (Sidebar's `external` convention).
`onclick`	`(e: MouseEvent \| KeyboardEvent) => void`	—	Makes the whole card clickable; pairs with keyboard activation.
`variant`	`'outlined' \| 'elevated'`	`'outlined'`	Surface style (elevated uses shadow tokens).
`titleLevel`	`number`	`3`	Heading level (aria-level) for the title.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`children`	`Snippet`	—	Required. Panel body.