Search/

Stats

Last modified:

Styling for important stats. Use stats to display a series of titled data points.

React documentation

Last modified:

HTML

Last modified:

Design

Last modified:

Preferably group the items as an unsorted list (<ul>) instead of with <div>s.

The following variants are available:

VariantPurpose
.bc-stats--inlineAligns the title and figure horizontally in a row. This removes the even distribution of stats horizontally.
.bc-stats--verticalAligns stats vertically in a column.
.bc-stats--unlinedRemoves the left border in each subsequent stat in ≥md and top border in <md.

For sizing:

VariantPurpose
.bc-stats--xsDecrease font size.
.bc-stats--lgIncrease font size.

Trend variants:

VariantPurpose
.bc-stat--uptrendChanges text color to green, to be used for an ‘up-trending’ number or percentage.
.bc-stat--downtrendChanges text color to red, to be used for a ‘down-trending’ number or percentage.

Accessibility

Last modified:

Rationale

Last modified:

See also

Last modified: