Skip to content
All effectsBadge

Trend Arrow

The arrow arrives from the direction it points.

Pure CSSBadgePro

Usage

MRR$34.1k14.2%

Meant for

Trend ChipKPI

Examples

On a Trend Chip

The chip arrives and its arrow settles a beat later, coming in from the direction it points — a rising arrow from below, a falling one from above (TrendChip marks its direction; on your own chip use data-trend="down"). The arrow moving after the chip is what reads as the number having changed — both at once and it is just a chip appearing. The semantic green stays, because here the colour is the meaning rather than decoration.

Monthly recurring revenue$34.1k14.2%Churn2.1%0.4%

The class is wm wm-trend-arrow — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.