Data
KPI Card
semantic HTMLA primary metric with a compact change indicator.
Live example
128 published articles, up 18.4%.
<div data-standard-component="kpi-card" label="Published articles" description="Compared with the previous month" data='{"value":"128","change":"+18.4%"}'><p>128 published articles, up 18.4%.</p></div>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.1.5 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
ECharts SVG visualization with an accessible SSR data-table fallback.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->