# Card

A flexible content card with Snurble surface variants, padding scale, and optional linked or interactive affordance.

## Notes

- Use Card for generic content grouping when Panel feels too structural.
- Use href for a semantic linked card rather than nesting interactive elements inside another link.
- Keep Card content responsible for headings, copy, and actions; Card owns only the surface treatment.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| as | `'article' | 'section' | 'div'` | 'article' | Element used when the card is not a link. |
| variant | `'flat' | 'bordered' | 'elevated' | 'glass'` | 'bordered' | Visual surface treatment. |
| padding | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8` | 5 | Spacing token for internal padding. |
| interactive | `boolean` | false | Whether to show hover affordance. |
| href | `string` | - | Render the card as a link. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<Card variant="elevated" interactive>Reusable content surface</Card>
```