Overview
The hero component is usually the first component placed on a page and acts as an introduction to the page's content. The hero comes in several variations with different size, alignment, copy and image options.
Examples
Background colour variation
<section class="hero hero--height-sm hero--content-width-lg bg-blue fg-white waypoint">
<div class="hero__body">
<div class="hero__content">
<h6 class="hero__bookmark m0">
<div class="icon icon--sm full--h align--middle">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>1-circle-fill</title>
<path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12zm-.648-7.15h1.536V6h-1.142C11.535 7.032 10.18 7.522 9 7.522v1.2h2.352v8.127z" fill="#858788" fill-rule="evenodd"></path>
</svg>
</div>
Bookmark
</h6>
<div class="hero__title h1">Hero title</div>
<p class="hero__tagline">Hero tagline copy</p>
<div class="btn-group mb-min">
<a href="" class="btn btn--primary">Primary CTA</a>
<a href="" class="btn btn--bordered-mono">Secondary CTA</a>
</div>
<div class="hero__footnote">Extra info, usually fine copy.</div>
</div>
</div>
</section>Background image variation
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Hero tagline copy
Extra info, usually fine copy.
<section class="hero hero--height-lg hero--content-width-lg bg-grey-100 waypoint" data-interchange="[http://placehold.it/1600x300.png, http://placehold.it/1600x300.jpeg]" data-myob-image style="background-image: url('http://placehold.it/1600x300.jpg');">
<div class="hero__body">
<div class="hero__content">
<h1 class="hero__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<p class="hero__tagline">Hero tagline copy</p>
<div class="btn-group mb-min">
<a href="" class="btn btn--primary">Primary CTA</a>
<a href="" class="btn btn--bordered-secondary">Secondary CTA</a>
</div>
<div class="hero__footnote">Extra info, usually fine copy.
</div>
</div>
</section>Animated tagline variation
Hero title
Hero tagline copy
Lorem ipsum dolor sit amet, co
Curabitur tempus velit sed ips
Extra info, usually fine copy.
<section class="hero hero--bg-grey-100 hero--height-lg hero--content-width-md waypoint">
<div class="hero__body">
<div class="hero__content">
<h1 class="hero__title">Hero title</h1>
<p class="hero__tagline">Hero tagline copy</p>
<div class="typed mb-1" data-myob-typed>
<span class="typed__strings">
<p>Lorem ipsum dolor sit amet, co</p>
<p>Curabitur tempus velit sed ips</p>
</span>
<span class="typed__text"></span>
</div>
<div class="btn-group mb-min">
<a href="" class="btn btn--primary">Primary CTA</a>
<a href="" class="btn btn--bordered-secondary">Secondary CTA</a>
</div>
<div class="hero__footnote">Extra info, usually fine copy.</div>
</div>
</div>
</section>Feature image variation
<section class="hero hero--featured hero--left hero--content-width-md hero--bg-grey-100 hero--height-lg waypoint">
<div class="hero__body">
<div class="hero__content">
<h1 class="hero__title hero__title--candy-color">Hero title</h1>
<p class="hero__tagline">Hero tagline copy</p>
<div class="btn-group mb-min">
<a href="" class="btn btn--primary">Primary CTA</a>
<a href="" class="btn btn--bordered-secondary">Secondary CTA</a>
</div>
<div class="hero__footnote">Extra info, usually fine copy.</div>
</div>
<div class="hero__media">
<div class="hero__media-item hero__media-item--laptop">
<img src="" data-interchange="[/assets/img/both.png]" data-myob-image alt="" class="hero__media__image">
</div>
</div>
</div>
</section>Device image variation
Laptop screenshots
What is the best device dimensions?
<section class="hero hero--device hero--height-lg hero--content-width-md hero--bg-grey-100 waypoint" data-waypoint-autoplay>
<div class="hero__body">
<div class="hero__content">
<h1 class="hero__title hero__title--alt-color">Laptop screenshots</h1>
<p class="hero__tagline">What is the best device dimensions?</p>
</div>
<div class="hero__media">
<div class="hero__media-item hero__media-item--laptop hero__media-item--frame">
<!-- <img src="" data-interchange="[/assets/img/timebilling_landing.png]" data-myob-image alt="" class="hero__media__image"> -->
<div class="video hero__media__video" data-myob-video-wistia data-video-id="k3qivlrvll">
<div class="wistia_embed wistia_async_k3qivlrvll seo=true videoFoam=true wmode=transparent"> </div>
</div>
<div class="progress-indicator progress-indicator--md progress-indicator--center"></div>
</div>
</div>
</div>
</section>Mobile content variation
Hero title
Mobile Hero Title
Hero tagline copy
Extra info, usually fine copy.
<section class="hero hero--featured hero--left hero--content-width-md hero--bg-grey-100 hero--height-lg waypoint">
<div class="hero__body">
<div class="hero__content">
<h1 class="hero__title hero__title--candy-color show-for-large">Hero title</h1>
<h1 class="hero__title hero__title--candy-color hide-for-large">Mobile Hero Title</h1>
<p class="hero__tagline show-for-large">Hero tagline copy</p>
<p class="hero__tagline hide-for-large">Mobile Hero tagline copy</p>
<div class="btn-group mb-min">
<a href="" class="btn btn--primary">Primary CTA</a>
<a href="" class="btn btn--bordered-secondary">Secondary CTA</a>
</div>
<div class="hero__footnote show-for-large">Extra info, usually fine copy.</div>
<div class="hero__footnote hide-for-large">Mobile Extra info, usually fine copy.</div>
</div>
</div>
</section>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do place directly after the Header component.
|
 Don't place anything other than the Header above the Hero component.
|
|
Do ensure headings are clear and concise.
|
Don't include more than approximately 8 words in the H1 copy.
|
|
Do limit the tagline to a maximum of 2 lines.
|
Don't include more than approximately 25 words in the H2 copy.
|
|
Do use call-to-action buttons that relate directly to the Hero content.
|
Don't use multiple primary call-to-actions buttons.
|
|
Do make sure to optimise your images to retain quality but minimise file size as much as possible.
|
Don't exceed a maximum file size of 200Kb (for large images).
|
|
Do include images that are captivating and contextually appropriate.
|
|
|
Do optimise images for device, specifically desktop and mobile.
|
Implementation guidelines
| Name | Class | Attribute | Description |
|---|---|---|---|
| Background colour |
.bg-regal
.bg-dusk
.bg-rouge
.bg-candy
.bg-grey-800
.bg-grey-100
|
Apply a background colour. | |
| Background gradient |
.bg-gradient
|
Apply the MYOB gradient background. | |
| Background image |
style='background-image: url()';
|
Apply a background image. | |
| Size |
.hero--height-sm
.hero--height-lg
|
Sizes for Hero. Default is large. | |
| Content alignment |
.hero--center
|
Centre align the Hero content. | |
| Content width sizes |
.hero--content-width-sm
.hero--content-width-md
.hero--content-width-lg
|
Centre align the Hero content. | |
| Heading colour |
.hero__title--alt-color
|
Change the colour of the H1 to Dusk. Apply to the .hero__title element.
|
|
| Heading weight |
.hero__title--style-bold
|
Change the font weight of the H1. Apply to the .hero__title element.
|