Ensemble comes with 3 types of hero unit, regular hero unit, offscreen hero unit, and split hero unit. we will begin with the standard hero unit. The standard hero unit spans the entire visible screen, and is mainly used at the very top of your site.
<section>
<div class="hero-unit hero-unit--banner-1">
<div class="hero-unit__content">
<div class="grid-container">
<div class="grid-row">
<div class="column-12 text-center">
<h2 class="text-color-10">A Hero unit header</h2>
<p class="text-color-10">
Some hero unit sub text
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque dui, eleifend nec nulla eget, ornare tincidunt elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam placerat nunc in sagittis rhoncus. In vestibulum mollis libero, vitae faucibus odio iaculis vitae. Pellentesque a tempus nulla. Maecenas pharetra odio eget suscipit sodales. Mauris gravida, enim et rhoncus luctus, lacus felis vulputate velit, ut convallis nisi purus gravida risus.
Offscreen hero units, give you the ability to display an image partially off the screen. They can display an image on the left or right and be stacked to create interesting new layouts.
<section class="background-color-2 offset-hero-unit">
<div class="grid-container">
<div class="grid-row">
<div class="column-5">
<div class="offset-hero-unit__contents">
<div class="offset-hero-unit__content">
<h4 class="text-color-10">An Off-screen hero unit</h4>
<h5 class="text-color-1 line-height">
An offscreen hero unit sub-heading
</h5>
<p>
Some content
</p>
</div>
</div>
</div>
<div class="column-6 push-column-1 no-padding">
<div class="offset-hero-unit__images float-left">
<img src="offscreen-hero.jpg" class="offset-hero-unit__image" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Content on right side, image on left -->
<section class="background-color-2 offset-hero-unit">
<div class="grid-container">
<div class="grid-row">
<div class="column-6 no-padding">
<div class="offset-hero-unit__images float-left">
<img src="offscreen-hero.png" class="offset-hero-unit__image float-right" alt="">
</div>
</div>
<div class="column-5 push-column-1">
<div class="offset-hero-unit__contents">
<div class="offset-hero-unit__content">
<h4 class="text-color-10">An Off-screen hero unit</h4>
<h5 class="text-color-1 line-height">
An offscreen hero unit sub-heading
</h5>
<p>
Some content
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Split hero units are similar in function to the offscreen hero unit, but do not have any of their content hidden offscreen, they use a before or after pseudo class to display an image exactly the same height as its neighboring content. to use a left aligned image use the class split-hero-unit--left-image for a right aligned image omit this class completely.
<section class="split-hero-unit split-hero-unit--left-image split-hero-unit--banner-1 background-color-2">
<div class="grid-container">
<div class="grid-row">
<div class="column-5 push-column-7 background-color-2 text-color-4">
<h5 class="text-color-4 line-height">
A Heading
</h5>
<p>
some content
</p>
</div>
</div>
</div>
</section>
As the split hero unit uses a pseudo element to display its image (:before for left aligned images, and :after for right aligned images) you will need to add your backgrounds via CSS.
.split-hero-unit--banner-1:before {
background-image: url(../img/general/split-hero-demo.jpg);
}
.split-hero-unit--banner-1:after {
background-image: url(../img/general/split-hero-demo.jpg);
}