<st-kpi-card>
JSON type: KpiCard
A key-figure card for dashboards: a label, one large value with an optional unit (for example
"lakh" or "crore"), a secondary line, and a row of chips. The icon slot sits beside the label.
hero gives the blue gradient card used for the headline figure. The value is shown exactly as
passed in: format numbers (Indian grouping, currency symbols) before setting it.
Slots: icon (optional glyph), chips (a row of st-chip), footer (anything below the chips).
The card's box sits on an inner element, not on :host: an outer page's CSS reset (Tailwind's
preflight zeroes padding and borders on every element) beats a component's :host rules.
Usage
import '@sankhyatronics/sankhya-cms/kpi-card'; // registers <st-kpi-card>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | label | string | '' | Label above the figure. |
value | value | string | '' | The figure, already formatted (for example "25.88"). |
unit | unit | string | '' | Unit shown beside the figure (for example "lakh"). |
sub | sub | string | '' | Secondary line below the figure (for example the exact amount and the period). |
hero | hero | boolean | false | The blue gradient headline card. |
hasIcon | has-icon | boolean | false | Set when an element is slotted into icon, so the icon tile only shows when there is an icon. |
See the live examples in Storybook.