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 variation
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 variation
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 variation
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-green 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 | Don'ts |
|---|---|
 Do use to highlight an offer or cross-sell.
|
 Don't use more than one per page.
|
|
Do use an appropriate background image that supports the content.
|
Don'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-grey-800
.bg-grey-100
|
Apply a background colour. | |
| Background image |
style='background-image: url()';
|
Apply a background image. |