The React documentation for this component can be read from Storybook (link here)

Heroes

Use to set context for a page through a headline introducing the content.

Description

This component often contains a text block component and CTAs. The only difference between the FUNCTIONAL HERO and the BRAND HERO is the Title (different font, size and colour).

When this components is called a certain necessary layout is created. The hero needs to spread across the whole viewport width, but the content inside will be contained within the page grid (see: layout-patterns/page grid). The content's layout pattern will follow a 4:1 grid on mobile and a 2:1 on desktop following the golden ratio proportions. For desktop, the content will also be padded with the standard 1.5rem gutter on the left and right side.

This component should always be used in conjunction with the hero-customisation mixin for setting the background image and colour. First parameter of this mixin is the relative path to the folder containing all the different versions of the background image; the images should be saved as follows: portrait-s.jpg, portrait-l.jpg, landscape-s.jpg, landscape-l.jpg (from small resolutions to large ones and the screen ratio; check example for info on how each variant should differ).

To load different character-set fonts for other languages, define "$radius-config-brand-font-file" before the radius is loaded on "/m2dm/sass/init/_config.scss".

The hero__caption element is optional.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-hero;

Sass Usage

@include radius-component-hero;
.hero {
   @include hero-customisation(images);
}

Link to Abstract/Sketch file

Download Sketch / Abstract file

Subcategories

Usage

Usage example

Hero caption - description goes here

Code example

<section class="hero">
  <div class="hero__inner">
    <div class="hero__content">
      <div class="placeholder-component"></div>

      <span class="hero__caption u-color-white">Hero caption - description goes here</span>
    </div>
  </div>
</section>