• Components
  • Global

Hero banner

Latest release

CPI Annual Rate Percentage Change over 12 months

£456,789 %

Jan 2014 0.7%

View the statistical bulletin

Usage notes

The hero banner should be used to highlight key content on your site. There is a maximum of 7 characters recommended for the stat. Any headline with more than about 10 words will look a bit odd.

  
<section class="hero-banner panel--pad panel--bottom-mar-large 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">CPI Annual Rate Percentage Change over 12 months</h3>
      <div class="hero-banner__stat stat stat--hero">
        <div class="stat__figure">
          &#xA3;456,789
          <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>