kit

Meter

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Meter

Emails this month
7,200 of 10,000 emails
Sending pauses at the limit until the month ends.
Seats
4 of 6 seats
A seventh person needs a larger plan.
Source
<div data-kit-role="fact-group">
<dl data-kit-role="meter">
  <dt data-kit-region="name">Emails this month</dt>
  <dd data-kit-region="value"><span data-kit-region="reading">7,200 of 10,000 emails</span></dd>
  <dd data-kit-region="bar" style="--kit-meter-mark: 80%"><meter min="0" max="10000" low="8000" high="10000" optimum="0" value="7200" aria-label="Emails this month" aria-valuetext="7,200 of 10,000 emails"></meter></dd>
  <dd data-kit-region="supporting">Sending pauses at the limit until the month ends.</dd>
</dl>
<dl data-kit-role="meter">
  <dt data-kit-region="name">Seats</dt>
  <dd data-kit-region="value"><span data-kit-region="reading">4 of 6 seats</span></dd>
  <dd data-kit-region="bar" style="--kit-meter-mark: 66.67%"><meter min="0" max="6" low="4" high="6" optimum="0" value="4" aria-label="Seats" aria-valuetext="4 of 6 seats"></meter></dd>
  <dd data-kit-region="supporting">A seventh person needs a larger plan.</dd>
</dl>
</div>

Meter, near

Emails this month
8,700 of 10,000 emailsNear the limit
Sending pauses at the limit until the month ends.
Source
<div data-kit-role="fact-group">
<dl data-kit-role="meter" data-kit-state="near">
  <dt data-kit-region="name">Emails this month</dt>
  <dd data-kit-region="value"><span data-kit-region="reading">8,700 of 10,000 emails</span><span data-kit-role="stamp" data-kit-state="attention">Near the limit</span></dd>
  <dd data-kit-region="bar" style="--kit-meter-mark: 80%"><meter min="0" max="10000" low="8000" high="10000" optimum="0" value="8700" aria-label="Emails this month" aria-valuetext="8,700 of 10,000 emails"></meter></dd>
  <dd data-kit-region="supporting">Sending pauses at the limit until the month ends.</dd>
</dl>
</div>

Meter, over

Emails this month
10,450 of 10,000 emails, 450 overLimit reached
Sending is paused until the month ends.
Source
<div data-kit-role="fact-group">
<dl data-kit-role="meter" data-kit-state="over">
  <dt data-kit-region="name">Emails this month</dt>
  <dd data-kit-region="value"><span data-kit-region="reading">10,450 of 10,000 emails, 450 over</span><span data-kit-role="stamp" data-kit-state="alert">Limit reached</span></dd>
  <dd data-kit-region="bar" style="--kit-meter-mark: 80%"><meter min="0" max="10000" low="8000" high="10000" optimum="0" value="10450" aria-label="Emails this month" aria-valuetext="10,450 of 10,000 emails, 450 over"></meter></dd>
  <dd data-kit-region="supporting">Sending is paused until the month ends.</dd>
</dl>
</div>