AppKpiTile
One headline number with its label and an optional period-over-period delta.
<app-kpi-tile label="Open projects" value="128" /><app-kpi-tile> states one number the reader cares about — open projects, revenue this month, assessments awaiting sign-off. It is the top strip of a dashboard and the summary above a table.
The value uses tabular figures, so a number that updates does not shift the tile's width, and negative letter-spacing so a large figure reads as one quantity rather than a row of digits.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the tile above it.
delta-direction unset and a leading +/- on delta decides the arrow and colour — set it explicitly to override.Basic
A label saying what is measured and the value itself. Format the value before passing it — the tag helper does not know your locale or currency.
Show code
<app-kpi-tile label="Open projects" value="128" /> <app-kpi-tile label="Billed this month" value="₹4,82,000" />
Deltas
A delta puts the number in context — 128 means little without knowing whether it is rising. delta-direction colours it and picks an arrow.
Show code
<app-kpi-tile label="Open projects" value="128" delta="12% vs last month" delta-direction="up" /> <app-kpi-tile label="Overdue" value="7" delta="3 fewer than last week" delta-direction="down" />
delta-direction describes the direction of the number, not whether the news is good. Overdue items falling is a down delta and it is a good thing — say what changed in the delta text and let the reader judge.A row of tiles
Wrap tiles in .kpi-row for the standard responsive strip: one column on a phone, two from sm, four from lg. It wraps rather than scrolls — a KPI strip that scrolls hides numbers.
Show code
<div class="kpi-row">
<app-kpi-tile label="Open projects" value="128" icon="folder-kanban" />
<app-kpi-tile label="Sites" value="1,204" icon="building-2" />
<app-kpi-tile label="Reports issued" value="86" icon="file-text" />
<app-kpi-tile label="Awaiting sign-off" value="12" icon="clipboard-check" />
</div>
AppIcon placement
By default the icon sits above the text. inline puts it beside, which suits a narrower column or a tile inside a card body.
Show code
<app-kpi-tile inline="true" label="Open projects" value="128" icon="folder-kanban" />
Surfaces
variant swaps the tile's fill. plain (default) is the bordered card above; filled and accent drop the border for a subtler or brand-tinted fill — useful when the tile sits inside a card that already draws its own border.
Show code
<app-kpi-tile label="Open projects" value="128" icon="folder-kanban" /> <app-kpi-tile label="Sites" value="1,204" icon="building-2" variant="filled" /> <app-kpi-tile label="Reports issued" value="86" icon="file-text" variant="accent" />
Spotlight
variant="spotlight" is the editorial feature tile — the label sits top-left with the icon chip pinned top-right, the value is set in an editorial serif, and an optional caption reads under the number. For the single showcase stat where the number is the hero, not one of a four-up strip.
caption to name what the number counts in a full phrase — “Total sent” under a bare “9”.Show code
<app-kpi-tile variant="spotlight" label="Referrals" value="9" caption="Total sent" icon="users" />
Custom styling per part
Beyond the tile-level class, every part of the tile takes its own class hook — icon-class, label-class, value-class, caption-class, delta-class, sparkline-class — so a product can restyle any single piece without forking the component. On React the same hooks are iconClassName / labelClassName / valueClassName / captionClassName / deltaClassName / sparklineClassName.
Show code
<app-kpi-tile label="Revenue" value="₹1,50,000" icon="cash-stack"
label-class="kpi-demo-label" value-class="kpi-demo-value" icon-class="kpi-demo-icon" />
When to use
Use it when
- A single derived number is worth stating on its own — a total, a count, a rate.
- The reader should see it without reading a table.
- You are building a dashboard strip or a summary above a list.
Reach for something else when
- You are showing many records with fields. → app-data-table
- The value is a status rather than a quantity. → app-status-badge
- It is a label/value pair among several facts. → app-info-list
- The number needs a chart to make sense. → a chart
Best practices
Every option
The whole surface of the component, one cell per value — every tone, direction, and combination a normal example never shows.
variant — all three
variant="plain"
variant="filled"
variant="accent"
size — sm / md / lg
size="sm"
size="md"
size="lg"
value-size — custom px for the value (tames a large headline)
spotlight default (44px)
value-size="30"
value-size="64" (plain)
icon-tone — all six
icon-tone="primary"
icon-tone="success"
icon-tone="warning"
icon-tone="danger"
icon-tone="info"
icon-tone="neutral"
delta-direction — explicit and inferred
delta-direction="up"delta-direction="down"delta-direction="flat"delta="+12%" — inferred up (no delta-direction)delta="-4%" — inferred down (no delta-direction)delta with no sign — inferred flatno delta at allsparkline — data shapes
sparkline="12,15,14,19,22,18"sparkline="7" — single point, flat midlinesparkline="5,5,5" — all-equal, flat midlinesparkline omittedlayout — inline, attention, and combinations
(default) — stackedinline="true"attention="true"inline="true" attention="true" variant="filled"size="lg" variant="accent" sparklinehref — the whole tile as a link
href="/Components/AppKpiTile" — renders <a>href + attention + deltavalue / delta as nodes — non-string ReactNode
React-only — value/delta are HTML-encoded strings hereReact-only — no markup node slotvalue/delta accept any ReactNode (a custom-styled span, an icon alongside the number). The tag helper's Value/Delta are string and are always HTML-encoded — there is no Razor equivalent for a caller-supplied markup node in these two slots.Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| label * | string | — | What the number measures. Be specific. |
| value * | string | — | The number, already formatted for the locale. |
| caption | string | — | A sub-line under the value (e.g. “Total sent”). Reads best with the spotlight variant. |
| icon | string | — | Icon name for the leading tile. |
| icon-tone | primary | success | warning | danger | info | neutral | — | Tints the icon chip. |
| delta | string | — | Change text. Say what it compares against. |
| delta-direction | up | down | flat | flat | Direction of the number, not whether the news is good. |
| sparkline | string | — | Comma-separated trend series, e.g. "12,15,14,19" — rendered as a small inline chart. |
| variant | plain | filled | accent | spotlight | plain | The tile surface/layout: plain is the bordered card, filled a subtle fill, accent a brand-tinted fill, spotlight the editorial feature tile (icon top-right, serif value, caption below). |
| size | sm | md | lg | md | Tile scale: sm (compact, for dense dashboards), md (default), lg (a hero tile with an enlarged value — for the single headline stat above a dashboard). |
| value-size | int (px) | — | Custom value ("main heading") font-size in px. Overrides the size/variant default — use it to tame a too-large headline (e.g. the spotlight serif). |
| inline | bool | false | Put the icon beside the text instead of above it. |
| attention | bool | false | Marks the tile as needing action (warning-tinted). |
| href | string | — | Renders the whole tile as a link to this URL. |
| class | string | — | Extra classes on the tile (React className). |
| icon-class | string | — | Extra classes on the icon chip (React iconClassName). |
| label-class | string | — | Extra classes on the label (React labelClassName). |
| value-class | string | — | Extra classes on the value (React valueClassName). |
| caption-class | string | — | Extra classes on the caption (React captionClassName). |
| delta-class | string | — | Extra classes on the delta (React deltaClassName). |
| sparkline-class | string | — | Extra classes on the sparkline (React sparklineClassName). |