---

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

**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)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...CardVariants | `VariantProps` | no |  | Styling variants from CardVariants |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| children | `Snippet` | no |  | Content to render inside the Card component |
| class | `string` | no |  | Extra classes merged onto the root element. |
| 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. |
| 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 |  | Micro-interaction preset. Only takes effect on interactive cards. |
| 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. |
| slotClasses | `Partial<Record<CardSlots, string>>` | no |  | Per-slot class overrides. Slots: base | header | content | footer |
| 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. |
| disabled | `'true'` | no | false | Controls the disabled behavior and appearance of the Card component. Available options: true. |
| 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. |

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