Examples
Basic usage
+12.5%
-8.3%
0.0%
<div class="cluster">
<span class="trend is-up">+12.5%</span>
<span class="trend is-down">-8.3%</span>
<span class="trend is-neutral">0.0%</span>
</div>
With an authored icon
12.5%
8.3%
0.0%
<div class="cluster">
<span class="trend is-up">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="18 15 12 9 6 15" />
</svg>
12.5%
</span>
<span class="trend is-down">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="6 9 12 15 18 9" />
</svg>
8.3%
</span>
<span class="trend is-neutral">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
0.0%
</span>
</div>
Inline in prose
Q3 closed with revenue up +12.5% against the prior quarter, while support tickets fell -8 from the previous week's spike.
<p>
Q3 closed with revenue up <span class="trend is-up">+12.5%</span> against the prior
quarter, while support tickets fell <span class="trend is-down">-8</span> from the
previous week's spike.
</p>
Customization
↑ 92%
+1,204
<div class="cluster">
<span class="trend" style="--trend-color: var(--color-warning)">↑ 92%</span>
<span class="trend" style="--trend-color: var(--color-primary)">+1,204</span>
</div>
Source comments
Trend -- inline up / down / neutral indicator (extra).
A semibold, color-coded inline span for delta indicators --
"+12.5%" in green for up, "-8" in red for down, "0.0%" muted for
neutral. Pairs with stat values, table-cell change indicators,
inline status callouts in prose.
Markup:
<span class="trend is-up">+12.5%</span>
<span class="trend is-down">-8</span>
<span class="trend is-neutral">0.0%</span>
With an authored icon (P6 -- content via markup, not CSS-painted):
<span class="trend is-up">
<svg aria-hidden="true">...arrow up...</svg>
12.5%
</span>
Archetype: Atom (P3). Pure CSS, no JS.
Why a scoped token: lets consumers override per-instance for
non-standard semantics (e.g., a "warning trend" that's amber
rather than green / red) without redefining the whole rule.
Reference
Source: src/css/extras/trend.css
Applies to
.trend
Classes
| Class | Kind | Description |
|---|---|---|
.is-up | variant | Upward trend, colored with success |
.is-down | variant | Downward trend, colored with danger |
.is-neutral | variant | Flat or unchanged trend, colored with subtle text |
Tokens
| Token | Default | Description |
|---|---|---|
--trend-color | var(--color-text-subtle) | Chromatic color axis, remapped by direction variants |