# SvCard
A themed surface container with an optional header, body, and footer - the
building block for dashboards and Studio-generated app screens.
`SvCard` frames content on a `--sg-bg` surface with a bordered header (a `title` /
`subtitle` pair, or a custom `header` snippet), a padded body, and an optional
footer. Every color and radius comes from the grid's `--sg-*` tokens, so cards
match the grid, forms, and charts in light and dark without extra styling.
Related: [SvDivider](https://svgrid.com/docs/help/ui-components/sv-divider/) · [SvScrollArea](https://svgrid.com/docs/help/ui-components/sv-scroll-area/) · [Layout & composite overview](https://svgrid.com/docs/help/ui-components/layout/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvCard` starter into your app:
Prefer to see it first? `npx @svgrid/ui try card` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvCard` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page run against these rows:
```svelte
```
```ts
import { SvCard } from '@svgrid/grid'
```
## Example
> Live demo: Feedback & display: badge, avatar, skeleton, card - https://svgrid.com/demos/333-app-feedback/
```svelte
$42,180
{#snippet footer()}View report{/snippet}
```
## Props
| Prop | Type | Default | Description |
| ----------- | --------- | ------- | ----------------------------------------------------------------------- |
| `title` | `string` | - | Header title. Renders the header row when set. |
| `subtitle` | `string` | - | Muted subtitle under the title. |
| `hoverable` | `boolean` | `false` | Lift and accent the border on hover (for clickable cards). |
| `flush` | `boolean` | `false` | Remove body padding, e.g. a card wrapping a full-bleed grid or table. |
| `header` | `Snippet` | - | Custom header content; overrides `title` / `subtitle` when provided. |
| `children` | `Snippet` | - | The card body. |
| `footer` | `Snippet` | - | Footer row, separated by a top border. |
The header row renders when any of `header`, `title`, or `subtitle` is set.
## Examples
### KPI tile
Pair a `title` / `subtitle` with a bold value in the body for a dashboard metric.
Add `hoverable` when the whole card is a link:
```svelte
128
```
### Full-bleed grid
Use `flush` so a grid or chart sits edge to edge with no double padding, while the
header keeps its own inset:
```svelte
```
### Custom header
Pass a `header` snippet to place actions or a badge alongside the title - it
replaces the default `title` / `subtitle` layout entirely.
### Chart tile
Frame a chart on a dashboard: a titled header, the chart in a `flush` body so it
sits edge to edge, and a footer link:
```svelte
{#snippet footer()}Full report{/snippet}
```
**Tip:** the header keeps its own inset even under `flush`, so only the body goes
edge to edge - exactly what a full-bleed grid or chart under a normal title row
needs.
## Accessibility
- `SvCard` is a presentational surface with no imposed role, so it never traps
focus or adds semantics you did not ask for.
- When the whole card is clickable, wrap it in a real `` or `