---

## Card
Flexible container for grouping related content with optional header, footer,
and interactive states. Renders as div, button, or anchor depending on the provided props.

Shape follows the container tier (`--radius-contain`), so retuning that token moves every
Card along with Dialog, Alert and Popover. `tier="bridge"` is the one sanctioned deviation
and it is optical, not decorative: radius scales with the area it turns, so the hairline
edge that reads as precise on a wide panel reads as an untouched rectangle on a small
tinted tile. Reach for it when a Card is a content chip rather than architecture — and not
to give one card a different look, which splits the family (see the `variant` axis for
weight, and `BlocksProvider` `defaults` for a project-wide Card treatment).

**Import:** `import { Card } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Card padding="lg">
  {#snippet header()}
    <h3>Title</h3>
  {/snippet}
  <p>Body content</p>
</Card>
```

```svelte
<Card variant="elevated" dividers onclick={() => navigate('/detail')}>
  {#snippet header()}
    <div class="flex items-center gap-3">
      <Avatar name="Jane Doe" size="sm" />
      <span class="font-medium">Jane Doe</span>
    </div>
  {/snippet}
  <p>Interactive card that navigates on click.</p>
  {#snippet footer()}
    <span class="text-text-tertiary text-sm">2 min ago</span>
  {/snippet}
</Card>
```

### Variants
- variant: elevated, floating, outlined, quiet (default: quiet)
- disabled: true (default: false)
- dividers: true (default: false)
- padding: lg, md, none, sm, xl (default: md)
- tier: bridge, contain (default: contain)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...CardVariants | `VariantProps` | no |  | Styling variants from CardVariants |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| children | `Snippet` | no |  | Main body content. |
| class | `string` | no |  | Extra classes merged onto the root element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| clickable | `boolean` | no |  | Force `<button>` rendering and interactive hover styles without providing an `onclick` handler — useful when delegating clicks through a wrapper component or library. `onclick` and `href` already enable interactive styles automatically; reach for `clickable` only when neither is appropriate.  Don't combine with an outer `<a href>` or inner interactive content — `<a><Card clickable>…</Card></a>` produces nested interactive elements (invalid HTML, a11y violation). Prefer `<Card href={…}>` so the card itself becomes the anchor. |
| disabled | `boolean` | no | false | Draw the card disabled — when styled, reduced opacity, a not-allowed cursor and `pointer-events-none`, all of which `unstyled` drops — and switch off what the element it renders would do:  - a `<button>` card (`onclick`, `clickable`) gets `aria-disabled="true"`, stays focusable,   and its click is suppressed: `onclick` is not called; - a link card (`href`) gets `aria-disabled="true"` and `tabindex="-1"`, its click cancels   the navigation, and its `href` stays on the element, readable by assistive technology; - a `<div>` card, when styled, only dims its content and blocks the mouse on it, down to the   controls inside (`pointer-events` is inherited). It disables nothing for the keyboard or   assistive technology and carries no `aria-disabled`, whatever `role` you pass; give inner   controls their own `disabled`, and pass `aria-disabled` yourself where your `role`   supports it.  While disabled, the `aria-disabled` of the button and link forms and the `tabindex` of the link form win over a value you pass; everywhere else yours is kept. |
| footer | `Snippet` | no |  | Content rendered below the body. With `dividers`, a hairline separates body from footer. |
| header | `Snippet` | no |  | Content rendered above the body. With `dividers`, a hairline separates header from body. |
| href | `string` | no |  | URL target. When provided, the card renders as `<a>`. |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the card. Only applies while the card is interactive (`clickable`, `onclick`, or `href`) and not disabled. |
| onclick | `(event: MouseEvent) => void` | no |  | Click handler. When provided, the card renders as `<button>` and gains interactive styles. |
| onHover | `(hovered: boolean) => void` | no |  | Called when hover state changes. Receives `true` on mouse-enter, `false` on mouse-leave. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Card: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project.  A conditional `overrides` rule on a Card keys on its variant axes, and one of those is not a prop: `interactive` is the axis `clickable`, `onclick` and `href` all resolve to, so `overrides: [{ interactive: true, … }]` styles every card that has a click source, whichever of the three gave it one. It is deliberately not settable — a card made to look interactive without one would be a `<div>` with `cursor-pointer` and a hover-lift and no way to operate it (WCAG 3.2 Predictable). |
| slotClasses | `Partial<Record<CardSlots, string>>` | no |  | Per-slot class overrides. Slots: base | header | content | footer. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| variant | `'elevated' | 'floating' | 'outlined' | 'quiet'` | no | quiet | Controls the visual style and presentation of the Card. Determines the component's visual treatment. Available options: elevated, floating, outlined, quiet. |
| dividers | `'true'` | no | false | Controls the dividers behavior and appearance of the Card component. Available options: true. |
| padding | `'lg' | 'md' | 'none' | 'sm' | 'xl'` | no | md | Controls the padding behavior and appearance of the Card component. Available options: lg, md, none, and 2 more. |
| tier | `'bridge' | 'contain'` | no | contain | Selects the semantic radius tier of the Card — the shape family it belongs to (`--radius-commit`/`-modify`/`-contain`/`-bridge`). Shape is retuned per family in your theme, so this picks the family rather than a pixel value. Available options: bridge, contain. |

Inherited from:
- Omit<CardVariants, 'elementType' | 'interactive'> (omit-pattern)
- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)

### Types
```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```

### Slots (slotClasses keys)
`base`, `header`, `content`, `footer`