# Card

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

## Usage

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

```svelte
<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>
```

## Notes

- 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.

## Parameters

| 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.                                                                                                            |

## Accessibility

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.