Editorial Hero

Use to set context for content focussed pages.

Description

The titles of these pages are usually longer and require more detail to describe their content and demonstrate relevance to the user. The pages focus more on content than conversion, such as articles, tips and tricks or guides.

Sass Usage

@include radius-component-hero;
.hero--editorial {
   @include hero-editorial-customisation("img/hero", #333d65);
}

Usage

Usage example

Working capital loans

Working capital loans can give you the breathing space to make sensible management decisions and grow your business.

Code example

<section class="hero hero--editorial">
  <div class="hero__background"></div>
  <div class="hero__inner">
    <div class="hero__content u-color-white">
      <section class="text-block text-block--large u-mb-small">
        <h3 class="section-heading section-heading--large u-color-white">Working capital loans</h3>
        <p class="text-block__lead-paragraph">
          Working capital loans can give you the breathing space to make sensible management decisions and grow your business.
        </p>
      </section>
    </div>
  </div>
</section>