Example

The nation's steps

810,013,162
One billion step target

The nation's steps

1000000000
One billion step target
Markup: components/live-total-block/live-total-block.twig
<div class="block live-total-block">
  <div class="live-total-block__outerwrapper">
    <div class="live-total-block__wrapper">
      <div class="live-total__progress">
      <div class="progress-outer-circle" data-percentage="80">
        <div class="progress-inner-circle">
            <div class="progress-circle-full progress-circle__slice"></div>
            <div class="progress-circle__slice">
              <div class="progress-circle__bar"></div>
            </div>
        </div>
        <div class="progress-circle__overlay"></div>
      </div>
      </div>
      <div class="live-total__content">
        <h2>The nation's steps</h2>
        <div id="js-totaliser" class="live-total">810,013,162</div>
        <div class="live-total__button">One billion step target</div>
      </div>
    </div>
  </div>
</div>
<div class="block live-total-block">
  <div class="live-total-block__outerwrapper">
    <div class="live-total-block__wrapper">
      <div class="live-total__progress">
      <div class="progress-outer-circle" data-percentage="100">
        <div class="progress-inner-circle">
            <div class="progress-circle-full progress-circle__slice"></div>
            <div class="progress-circle__slice">
              <div class="progress-circle__bar"></div>
            </div>
        </div>
        <div class="progress-circle__overlay"></div>
      </div>
      </div>
      <div class="live-total__content">
        <h2>The nation's steps</h2>
        <div id="js-totaliser" class="live-total">1000000000</div>
        <div class="live-total__button">One billion step target</div>
      </div>
    </div>
  </div>
</div>
Source: _sr18-styleguide.scss, line 428