Card

Titled panel container.

A bordered panel with an optional title, meta, and action slot. The title renders at a configurable heading level for correct document outline.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

svelte

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

<Card title="Services" meta="6 of 7 healthy">
  …content…
</Card>

Prop	Type	Default	Description
`title`	`string`	—	Panel heading text.
`meta`	`string`	—	Right-aligned meta text in the header.
`action`	`Snippet`	—	Header action slot (e.g. a button).
`titleLevel`	`number`	`3`	Heading level (h2–h6) for the title.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`children`	`Snippet`	—	Required. Panel body.