Status

Meters

Health 95%
Mana 42%
Stamina 13%
Container(s) .meter-container .meter-bar
Required .meter-bar-fill
Modifiers .is-above-50 .is-below-50 .is-below-25
HTML Elements div.meter-title div.meter-value

Guidelines

  • Labels should be uppercase and ≤ 20 characters.
  • Use only in isolated cases like emails remaining and reputation status.
  • Use only when data can logically be represented as a percentage.
Don't use to demonstate progress through multiple steps.

Contact Count

1,234
Container(s) .contact-count
Modifiers .is-right