Hero banner with extra large stat
Usage notes
Only use this for stats that are no more than 4 characters.
<section class="hero-banner hero-banner--xl panel--pad panel--mar slate--hero-banner">
<div class="wrapper">
<div class="hero-banner__inner">
<h2 class="hero-banner__headline">Latest release</h2>
<h3 class="hero-banner__main-title">Short title</h3>
<div class="hero-banner__stat stat stat--hero">
<div class="stat__figure">
126.9
<span class="stat__figure__unit">%</span>
</div>
<p class="stat__description">
<span class="lozenge--fat lozenge--semi-opaque">Jan 2014
<span class="icon icon--green icon--fat icon-up-bold"></span>
0.7%
</span>
</p>
</div>
<a href="#">View the statistical bulletin</a>
</div>
</div>
</section>
Developer Notes
Add the .hero-banner--xl
class to top-level element.