Required files

Hero animated

Classes applied to the .hero element:

.hero--content-centre, .hero--fade-in, .hero--content-pop-in, .bg-img-cover, .bg-overlay, .bg-overlay--black.

Hero markup

Hero structure

The basic structure of a hero component is .hero > .container > .content-block > .hero__content.

And helper classes .v-align-content-centre or .align-content-centre can be used to achieve centre alignment.

<section class="hero" style="background-image: url([IMAGE URL HERE])">
    <div class="container">
        <div class="content-block v-align-content-centre">
            <div class="hero__content">
                <h1>[TITLE HERE]</h1>
                <div class="font-size-lg">[TEXT HERE]</div>
            </div>
        </div>
    </div>
</section>

However there are lots of modifying classes and helper classes that can be added to create different types of heros...

Content alignment

The content is aligned left as default and there are two modifying classes available .hero--content-right and .hero--content-centre.

Background image

A background image can be applied on the .hero element (inline or in your separate styles), and the helper class can be added .bg-img-cover which applies a background cover and centre positioning.

Background overlay

The overlay class .bg-overlay adds a grey overlay covering the entire background and then there are modifying classes available such as .bg-overlay--black to increase the overlay intensity and alignment classes .bg-overlay--left, .bg-overlay--right, .bg-overlay--centre.

Note that the .bg-overlay--black and the alignment overlay classes can be used together.

Note that the .bg-overlay also makes the text color white. Otherwise the helper class .bg-light-content is also available.

Animations

There are also modifying classes for the hero that can add the animations .hero--fade-in, .hero--content-pop-in.

Hero left

Classes applied to the .hero element:

.bg-img-cover, .bg-overlay, .bg-overlay--black, .bg-overlay--left.

Hero right

Classes applied to the .hero element:

.hero--content-right, .bg-img-cover, .bg-overlay, .bg-overlay--right.

Hero centre

Classes applied to the .hero element:

.hero--content-centre, .bg-img-cover, .bg-overlay, .bg-overlay--black, .bg-overlay--centre.