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
<div class="meter-container">
<span class="meter-title">Health</span>
<span class="meter-value">95%</span>
<div class="meter-bar">
<div class="meter-bar-fill is-above-50" style="width: 95%;"></div>
</div>
</div>
<div class="meter-container">
<span class="meter-title">Mana</span>
<span class="meter-value">42%</span>
<div class="meter-bar">
<div class="meter-bar-fill is-below-50" style="width: 42%;"></div>
</div>
</div>
<div class="meter-container">
<span class="meter-title">Stamina</span>
<span class="meter-value">13%</span>
<div class="meter-bar">
<div class="meter-bar-fill is-below-25" style="width: 13%;"></div>
</div>
</div>

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
<div class="contact-count">
<span data-tooltip="Contact Count" data-tooltip-pos="up"><abbr>1,234</abbr></span>
<i class="sg-icon sg-icon-people is-size-20"></i>
</div>