# Card

Group: Layout

A surface that groups one topic — a feature, a roadmap item, a saved Visualli, a setting group — with optional media, eyebrow, title, body and actions.
- Provide any of `eyebrow` (Haksen caps, ≤ 3 words), `title`, children (one or two sentences), `media` (an image or a small map, bled to the edges) and `actions` (Buttons).
- `variant`: `outlined` (default, on `canvas`), `raised` (floats with `shadow-float` — use sparingly), `sunken` (a well inside a surface). `size`: `md` (16px padding) or `lg` (24px, marketing).
- `href` makes the whole card a link, `onClick` a button; then don't put other buttons inside it. Without either it is an `<article>`.
- Never add a colored side border or emoji icon to a card; let a node, a topic dot or the media carry color.


## Props

```ts
export interface CardProps { eyebrow?: string; title?: string; children?: ReactNode; media?: ReactNode; actions?: ReactNode; variant?: 'outlined' | 'raised' | 'sunken'; size?: 'md' | 'lg'; href?: string; onClick?: () => void; className?: string }
```

## Use

```ts
import { Card } from '@visualli/design-system/components';
```