Stat cards
Highlights a single number with its label, an icon and its change from the previous period. Used side by side in dashboard summaries.
Basic usage
label and value are required. The value is written as is; if you need a thousands separator or a unit, pass the value already formatted.
<acun:stat-card label="Total customers" value="4,812" />| Prop | Values |
|---|---|
label | Description of the number |
value | Displayed value |
Change
change shows the percentage change: 0 and above is drawn green with an up arrow, negative values red with a down arrow. The number is formatted for the application locale, with at most one decimal place; change-label adds a short description next to it.
<div class="grid gap-4 sm:grid-cols-3">
<acun:stat-card label="Orders this month" value="3,106" :change="12.5" change-label="vs. last month" />
<acun:stat-card label="Returns" value="214" :change="-4" change-label="vs. last month" />
<acun:stat-card label="Open tickets" value="38" :change="0" />
</div>| Prop | Values |
|---|---|
change | Percentage; 0 and above green, negative red |
change-label | Text next to the change |
Icon and colors
icon is shown in a colored box at the top left. The box color is chosen with color and defaults to brand; color affects only the icon box.
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
<acun:stat-card label="Total customers" value="4,812" icon="users" />
<acun:stat-card label="Delivered" value="3,106" icon="truck" color="success" />
<acun:stat-card label="Returns" value="214" icon="exclamation-triangle" color="warning" />
<acun:stat-card label="Canceled" value="12" icon="x-circle" color="danger" />
<acun:stat-card label="Open tickets" value="38" icon="ticket" color="info" />
</div>| Prop | Values |
|---|---|
icon | acun:icon name |
color | brand | success | warning | danger | info |
Extra content
The actions slot sits in the top-right corner of the card; its position is the same with or without an icon. The default slot is appended to the bottom of the card; use it for a progress bar or a small chart.
<acun:stat-card label="Monthly target" value="3,106 / 3,400" icon="flag">
<acun:slot:actions>
<acun:badge variant="info">September</acun:badge>
</acun:slot:actions>
<acun:progress :value="91" size="sm" label="91 percent of the monthly target" />
</acun:stat-card>| Prop | Values |
|---|---|
actions | Slot; top right |
default slot | Bottom of the card |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | — | Required; description of the number |
value | — | Required; displayed value |
change | null | Percentage change; red when negative |
change-label | null | Text next to the change |
icon | null | acun:icon name |
color | primary | primary · secondary · success · danger · warning · info · dark (icon box; brand = primary) |