Billboard

Overview

The Billboard is very similar to the hero component, however it is used to highlight content further down the page. It leverages helper classes, allowing you some control over the background colour. The background image is mandatory. There is a heading, paragraph, and button available. The content will always sit vertically centred within the container.

Examples

Left aligned variation

Example
External Link

Billboard heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.

Primary CTA 
<section class="billboard billboard--bg-cabana billboard--left billboard--padding-lg" data-interchange="[/assets/img/hero-couple-on-mac.png]" data-myob-image style="background-image: url('/assets/img/hero-couple-on-mac.jpg');">
  <div class="billboard__body">
    <div class="billboard__copy">
      <h3>Billboard heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.</p>
      <a href="" class="btn btn--bordered-secondary">Primary CTA</a>
    </div>
  </div>
</section>

Centre aligned variation

Example
External Link

Billboard heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.

Primary CTA 
<section class="billboard billboard--bg-candy billboard--center billboard--padding-lg fg-light" data-interchange="[/assets/img/hero-lady-on-laptop-desk.png]" data-myob-image style="background-image: url('/assets/img/hero-lady-on-laptop-desk.jpg');">
  <div class="billboard__body">
    <div class="billboard__copy">
      <h3>Billboard heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.</p>
      <a href="" class="btn btn--bordered-mono">Primary CTA</a>
    </div>
  </div>
</section>

Right aligned variation

Example
External Link

Billboard heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.

Primary CTA 
<section class="billboard billboard--bg-golf billboard--right billboard--padding-lg fg-light" data-interchange="[/assets/img/hero-partners.png]" data-myob-image style="background-image: url('/assets/img/hero-partners.jpg');">
  <div class="billboard__body">
    <div class="billboard__copy">
      <h3>Billboard heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.</p>
      <a href="" class="btn btn--bordered-mono">Primary CTA</a>
    </div>
  </div>
</section>

Usage guidelines

Dos Donts
do iconDo use to highlight an offer or cross-sell.
do-not iconDon't use more than one per page.
do iconDo use an appropriate background image that supports the content.
do-not iconDon't use near the top of the page, 'above the fold' or in place of a Hero.

Implementation guidelines

Name Class Attribute Description
Alignment .billboard--left billboard--center billboard--right Aligns the copy of the Billboard. Default is left.
Background colour .bg-regal .bg-dusk .bg-rouge .bg-candy .bg-storm-100 .bg-storm-6 Apply a background colour.
Background image style='background-image: url()'; Apply a background image.