Positive Trend
Compact layout with the stat on the inline-start and a sparkline on the inline-end. data-status="positive" on the card colors the chart line, the trend label, and the header featured icon together.
Negative Trend
data-status="negative" repaints the same elements with the error palette. Pair with falling chart data so the visual story stays consistent.
Built-in Features
A single data-status on the card colors the chart line, the trend label, and the header featured icon together.
An embedded line chart with axes, legend, grid, and padding tuned out so the line fills the available space edge-to-edge.
Default splits the body 60/40 between stat and chart; nds-full stacks the chart full-width below the stat.
The chart always reads oldest to newest left-to-right inside a metric card, even when the page is rendered RTL.
Drops into any card. Visual treatments such as nds-stroke, nds-shadow, and nds-color remain consumer-controlled.
--metric-trend-color and --metric-chart-color override the status palette per instance for branded or special-case metrics.
Usage Guidelines
Best Practices
- Use metrics on console and dashboard pages where stakeholders need to scan multiple KPIs and their direction at a glance.
- Pair with the Grid layout to assemble responsive metric panels (set
--max-colto control how many fit per row). - Do not use metrics for static numbers without a comparison period. A bare statistic belongs on a regular Card with the
nds-statisticmodifier instead. - Do not use metrics for dense, multi-series data exploration. Use the Chart component directly when the chart itself is the focus.
- Pick the compact layout when many metrics share a row. Pick full-width (
nds-full) when a single highlighted metric anchors a section and the chart deserves more room. - Use
data-status="positive"when the trend is favorable for the metric you are tracking, anddata-status="negative"when it is not. Direction matters more than raw sign: a falling bounce rate is positive. - Keep stat values short and self-evident:
50%,SAR 1.2M,8,420. Long values wrap and break the visual rhythm with the chart. - Sparkline data should have at least 15 to 20 points for the trend shape to read clearly. Very short series look stubby and lose the at-a-glance benefit.
- Always supply chart data in chronological order (oldest to newest). The chart enforces left-to-right rendering inside metrics regardless of page direction.
- Add a footer action like "View Report" so users can drill into the underlying data when the headline number raises a question.
Modifier Classes
| Class | Description |
|---|---|
nds-card-metric | Required wrapper inside .nds-card-content that holds the stat and the chart. |
nds-card-metric.nds-full | Stacks the chart full-width below the stat instead of the default 60/40 split. |
nds-card-metric-info | Holds the value and the trend row; flexes alongside the chart in compact layout. |
nds-card-metric-value | The big stat number. Uses display-clamp typography for fluid sizing. |
nds-card-metric-trend | Inline row with the directional icon, the delta in <strong>, and a comparison label. |
nds-card-metric-trend.nds-arrow | Swaps the trade icon for a directional arrow (rotates per the card's data-status). |
nds-card-metric-chart | Wraps the embedded .nds-chart. Forces left-to-right reading. |
Data Attributes
| Attribute | Description |
|---|---|
data-status="positive" | Set on .nds-card. Applies the success palette to the chart line, the trend text, and the header featured icon. |
data-status="negative" | Set on .nds-card. Applies the error palette to the same three elements. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--metric-trend-color | --text-default | Color of the trend arrow icon and the delta value. Overridden by data-status on the card. |
--metric-chart-color | --colors-primary-sa-flag-600 | Color of the sparkline line and area gradient. Overridden by data-status on the card. |