Counters

Basic Usage

Counters used to display stats. Use the data-from and data-to attributes on the counter__number element to set what the counter starts and finshes at.

We deliver

Courses

  <div class="docs-example">
    <div class="counter">
      <div class="counter__label">We deliver<div>
      <div class="counter__number" data-from="0" data-to="200"></div>
      <div class="counter__label">Courses</div>
    </div>
  </div>

Modifiers

Use the following modifiers where needed.

Inline modifer for when you want the number to be on the same line as the labels.

We deliver

Courses

  <div class="docs-example">
    <div class="counter counter--inline">
      ...
    </div>
  </div>

For longer counters (like 2,000,000) you can set a min-width on the number to stop it "bouncing" as it counts up.

We've awarded

Certificates

  <div class="docs-example">
    <div class="counter counter--inline">
      <div class="counter__label">We've awarded</div>
      <div class="counter__number counter__number--min-width" data-from="0" data-to="2000000"></div>
      <div class="counter__label">Certificates</div>
    </div>
  </div>