# StatsCard

A card displaying a metric with title and value. Extends `Card` with a vertical layout showing label above value.

## When to Use

- Dashboard metrics
- KPI displays
- Summary statistics

## Properties

- **`title`** `ReactNode` — Label for the metric
- **`value`** `string | number | ReactNode` — The metric value
- **`suffix`** `string | number | ReactNode` — Optional suffix (e.g. unit, "%")

### Style Defaults

Extends Card with:

- `display` — `flex`
- `placeContent` — `space-between`
- `gap` — `1x`
- `border` — none
- `shadow` — `0 2px 6px #dark.10`
- `padding` — `2.5x`

### Base Properties

Extends [Card](../content/Card.md) and supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<StatsCard title="Users" value={1234} />

<StatsCard title="Growth" value={12} suffix="%" />

<StatsCard title="Revenue" value="$1.2M" />
```
