Example
The nation's steps
810,013,162
The nation's steps
1000000000
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