# Stat Card

> Source: https://design.nanatec.co.ke/components/stat-card/
> A single headline figure for a dashboard: what it measures, the number, and how it moved. Lay several out with a CSS grid, and set `tone` to colour the icon and the change.

## Preview

```html
<div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))">
  <nana-stat-card label="Total revenue" value="KSh 45,231.89" change="20.1">
    <nana-icon slot="icon" name="payments"></nana-icon>
  </nana-stat-card>
  <nana-stat-card label="Subscriptions" value="+2,350" change="180.1">
    <nana-icon slot="icon" name="people"></nana-icon>
  </nana-stat-card>
  <nana-stat-card label="Sales" value="+12,234" change="19">
    <nana-icon slot="icon" name="credit_card"></nana-icon>
  </nana-stat-card>
  <nana-stat-card label="Active now" value="+573" hint="+201 since last hour">
    <nana-icon slot="icon" name="show_chart"></nana-icon>
  </nana-stat-card>
</div>
```

## Installation

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/badge/">Badge</a></li>
  <li><a href="/components/empty-state/">Empty State</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-stat-card--docs