• Components
  • Global

Hero banner with extra large stat

Latest release

Short title

126.9 %

Jan 2014 0.7%

View the statistical bulletin

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.