Meters

.Meter

Meters can be used to show information about e.g. resource usage and credit levels.

They can show either an absolute value or a fraction.

Example

Domains and subdomains 20 SSH accounts 0 / 1 Statistics 1 Storage 1.9 / 2GB

Markup

<span class="Meter " title="Domains and subdomains - 20 of unlimited">
    <strong class="Meter-label">Domains and subdomains</strong> <span class="Meter-value">20</span>
</span>

<span class="Meter " title="SSH accounts - 0 of 1">
    <strong class="Meter-label">SSH accounts</strong> <span class="Meter-value">0 <span class="Meter-value-limit">/ 1</span></span>
</span>

<a href="#" class="Meter " title="Statistics - 1 of unlimited">
    <strong class="Meter-label">Statistics</strong> <span class="Meter-value">1</span>
</a>

<a href="#" class="Meter " title="Storage - 1.9 / 2GB">
    <strong class="Meter-label">Storage</strong> <span class="Meter-value">1.9 <span class="Meter-value-limit">/ 2GB</span></span>
</a>

Level notifications

Meters can be color coded if they reach certain levels.

Modifiers

Meter--warning
Use when the metered value should be noticed.
Domains and subdomains 20 SSH accounts 0 / 1 Statistics 1 Storage 1.9 / 2GB
Meter--critical
Use when the metered value needs immediate attention.
Domains and subdomains 20 SSH accounts 0 / 1 Statistics 1 Storage 1.9 / 2GB

Markup

<span class="Meter [modifier class]" title="Domains and subdomains - 20 of unlimited">
    <strong class="Meter-label">Domains and subdomains</strong> <span class="Meter-value">20</span>
</span>

<span class="Meter [modifier class]" title="SSH accounts - 0 of 1">
    <strong class="Meter-label">SSH accounts</strong> <span class="Meter-value">0 <span class="Meter-value-limit">/ 1</span></span>
</span>

<a href="#" class="Meter [modifier class]" title="Statistics - 1 of unlimited">
    <strong class="Meter-label">Statistics</strong> <span class="Meter-value">1</span>
</a>

<a href="#" class="Meter [modifier class]" title="Storage - 1.9 / 2GB">
    <strong class="Meter-label">Storage</strong> <span class="Meter-value">1.9 <span class="Meter-value-limit">/ 2GB</span></span>
</a>