Metric

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.

24h Views

29,840

24% vs last week

View Report


<div class="nds-card nds-stroke" data-status="positive">
  <div class="nds-card-header">
    <div class="nds-card-featured-icon">
      <span class="nds-featured-icon nds-circle nds-sm">
        <i class="nds-icon nds-hgi-trade-up" aria-hidden="true"></i>
      </span>
    </div>
    <span class="nds-card-title">24h Views</span>
    <button type="button" class="nds-btn nds-subtle nds-md nds-icon-only" aria-label="More options">
      <i class="nds-icon nds-hgi-more-vertical" aria-hidden="true"></i>
    </button>
  </div>
  <div class="nds-card-content">
    <div class="nds-card-metric">
      <div class="nds-card-metric-info">
        <span class="nds-card-metric-value">29,840</span>
        <p class="nds-card-metric-trend">
          <i class="nds-icon nds-hgi-trade-up" aria-hidden="true"></i>
          <strong>24%</strong>
          <span class="nds-card-metric-text">vs last week</span>
        </p>
      </div>
      <div class="nds-card-metric-chart">
        <div class="nds-chart"
          data-chart-type="line"
          data-chart-series='[{"name":"Views","data":[1500,4500,3000,4500,6000,4500,6000,8500,11000,13000,13000,14500,13000,11000,7800,7200,9500,11500,13000,14500,17000,19000,19000,17500,19500,22000,22000,25000,25000,29800]}]'
          data-chart-labels='["Day 1","Day 2","Day 3","Day 4","Day 5","Day 6","Day 7","Day 8","Day 9","Day 10","Day 11","Day 12","Day 13","Day 14","Day 15","Day 16","Day 17","Day 18","Day 19","Day 20","Day 21","Day 22","Day 23","Day 24","Day 25","Day 26","Day 27","Day 28","Day 29","Day 30"]'
          data-chart-config='{"height":110,"legend":{"show":false},"xaxis":{"show":false},"yaxis":{"show":false},"line":{"smooth":true,"area":true,"dots":false,"spotlight":22},"grid":{"show":false},"padding":{"top":0,"bottom":0,"left":0,"right":0}}'>
        </div>
      </div>
    </div>
  </div>
  <div class="nds-card-actions">
    <button type="button" class="nds-btn nds-subtle nds-md nds-icon-only" aria-label="Settings">
      <i class="hgi hgi-stroke hgi-settings-02" aria-hidden="true"></i>
    </button>
    <a href="#" class="nds-btn nds-secondary-outline nds-md">View Report</a>
  </div>
</div>

Negative Trend

data-status="negative" repaints the same elements with the error palette. Pair with falling chart data so the visual story stays consistent.

24h Views

3,200

32% vs last week

View Report


<div class="nds-card nds-stroke" data-status="negative">
  <div class="nds-card-header">
    <div class="nds-card-featured-icon">
      <span class="nds-featured-icon nds-circle nds-sm">
        <i class="nds-icon nds-hgi-trade-down" aria-hidden="true"></i>
      </span>
    </div>
    <span class="nds-card-title">24h Views</span>
    <button type="button" class="nds-btn nds-subtle nds-md nds-icon-only" aria-label="More options">
      <i class="nds-icon nds-hgi-more-vertical" aria-hidden="true"></i>
    </button>
  </div>
  <div class="nds-card-content">
    <div class="nds-card-metric">
      <div class="nds-card-metric-info">
        <span class="nds-card-metric-value">3,200</span>
        <p class="nds-card-metric-trend">
          <i class="nds-icon nds-hgi-trade-down" aria-hidden="true"></i>
          <strong>32%</strong>
          <span class="nds-card-metric-text">vs last week</span>
        </p>
      </div>
      <div class="nds-card-metric-chart">
        <div class="nds-chart"
          data-chart-type="line"
          data-chart-series='[{"name":"Views","data":[29800,25000,25000,22000,22000,19500,17500,19000,19000,17000,14500,13000,11500,9500,7200,7800,11000,13000,14500,13000,13000,11000,8500,6000,4500,6000,4500,6000,4500,3000]}]'
          data-chart-labels='["Day 1","Day 2","Day 3","Day 4","Day 5","Day 6","Day 7","Day 8","Day 9","Day 10","Day 11","Day 12","Day 13","Day 14","Day 15","Day 16","Day 17","Day 18","Day 19","Day 20","Day 21","Day 22","Day 23","Day 24","Day 25","Day 26","Day 27","Day 28","Day 29","Day 30"]'
          data-chart-config='{"height":110,"legend":{"show":false},"xaxis":{"show":false},"yaxis":{"show":false},"line":{"smooth":true,"area":true,"dots":false,"spotlight":22},"grid":{"show":false},"padding":{"top":0,"bottom":0,"left":0,"right":0}}'>
        </div>
      </div>
    </div>
  </div>
  <div class="nds-card-actions">
    <button type="button" class="nds-btn nds-subtle nds-md nds-icon-only" aria-label="Settings">
      <i class="hgi hgi-stroke hgi-settings-02" aria-hidden="true"></i>
    </button>
    <a href="#" class="nds-btn nds-secondary-outline nds-md">View Report</a>
  </div>
</div>

Built-in Features

Trend Status Theming

A single data-status on the card colors the chart line, the trend label, and the header featured icon together.

Inline Sparkline

An embedded line chart with axes, legend, grid, and padding tuned out so the line fills the available space edge-to-edge.

Compact and Full Layouts

Default splits the body 60/40 between stat and chart; nds-full stacks the chart full-width below the stat.

Always-LTR Sparklines

The chart always reads oldest to newest left-to-right inside a metric card, even when the page is rendered RTL.

Card Composition

Drops into any card. Visual treatments such as nds-stroke, nds-shadow, and nds-color remain consumer-controlled.

Customizable Tokens

--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-col to 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-statistic modifier 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, and data-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. When `.nds-arrow` is present on the trend, also rotates the arrow icon 90deg (pointing up).
`data-status="negative"`	Set on `.nds-card`. Applies the error palette to the same three elements. When `.nds-arrow` is present on the trend, also rotates the arrow icon -90deg (pointing down).

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-600`	Color of the sparkline line and area gradient. Overridden by `data-status` on the card.