About Stat Numbers

These numbers should be paired with a label or title that explains the value. Stats are grouped into one of two categories, Main Stat and Sub Stats. A card will only have one Main Stat but may have multiple Sub Stats. Sub Stats are meant to support the Main Stat by showing relative information like changes over time or when comparing categories. When displaying a stat number in a card you may also combining with:

• Trend Indicator, number an/or icon, showing changes over time
• A data visual like spark lines, line chart, bar charts, progress bars
• Time stamp
• Supporting or explainer text
• A link or CTA

Main Stat (and Variants)

Text Color

The Main Stat values can be displayed in one of three colors: gray, blue, or red. Add class qw-stat-color-favorable for favorable blue. Add qw-stat-color-unfavorable for unfavorable red.

Stacked Label

Add class qw-stat-stack-label to the qw-stat div to stack the number and label.

Sub Stat

Icon Types

Icons are optional. We currently use icons to show upward #qw-icon-graph-stats-ascend, downward #qw-icon-graph-stats-descend, or netural #qw-icon-graph-stats-flat trends.

Icon Color

Icons can be display in gray, green, or red depending on their context. Add class qw-stat-icon-gray, qw-stat-icon-green, or qw-stat-icon-red to the dl tag to get the color icon.

Icon Location

By default icons will be displayed in front of the number, however there is the ability to move the icon behind the number by adding class qw-stat-icon-behind to the dl tag.

StatLabelHere

100.00%