Two Column Hero

Description

This component often contains a text block component and CTAs in the left side contend and an image in the right side of the component. Although there is no styling for the interior content of this component so you can style as needed.

PRO TIP: create your own BEM classes for the styling of interior content so as to not overwrite any current or future styles that may be added to this component. AVOID using the two-column-hero in your own custom classes.

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 two-col-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 image should be saved as two-col-hero.jpg_

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".

Modifiers

  • To vertically center your items inside the container use the class .two-column-hero--v-centered on the element with the class .two-column-hero__container

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-two-column-hero;

Sass Usage

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

Usage

Usage example

Code example

<section class="two-column-hero">
  <div class="two-column-hero__inner">
    <div class="two-column-hero__container">
      <div class="two-column-hero__content-left">
        <div class="placeholder-component"></div>
      </div>
      <div class="two-column-hero__content-right">
        <div class="placeholder-component"></div>
      </div>
    </div>
  </div>
</section>