CnKpiGrid
Responsive grid layout for KPI/statistics cards. Adapts columns to screen width.
Try it
Loading CnKpiGrid playground…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | Number | 4 | Number of columns (2, 3, or 4) |
grid-class | String | '' | Extra classes to add on top of the grid |
Slots
| Slot | Description |
|---|---|
| default | CnStatsBlock components |
Usage
<CnKpiGrid :columns="4">
<CnStatsBlock title="Contacts" :count="150" variant="primary" />
<CnStatsBlock title="Companies" :count="42" variant="success" />
<CnStatsBlock title="Leads" :count="23" variant="warning" />
<CnStatsBlock title="Deals" :count="8" variant="info" />
</CnKpiGrid>
Reference (auto-generated)
The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnKpiGrid.vue and update automatically whenever the component changes.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
columns | number | 4 | Number of columns at max width: 2, 3, or 4 | |
gridClass | string | '' |
Slots
| Name | Bindings | Description |
|---|---|---|
default | — |