Hero

This is the default hero with just a title, hero's can also contain:

Paragraph copy
Buttons
Image left

We are The Idea Bureau

<section class="hero">
    <div class="wrapper">
        <div class="hero__content">
            <h1>We are <span class="is-grey">The Idea Bureau</span></h1>
        </div>
    </div>
</section>

Slim

The slim variation has reduced padding top and bottom.

We are The Idea Bureau

<section class="hero hero--slim">
    <div class="wrapper">
        <div class="hero__content">
            <h1>We are <span class="is-grey">The Idea Bureau</span></h1>
        </div>
    </div>
</section>

With Extras

This hero includes a paragraph and some buttons.

We are The Idea Bureau

Want to find out more?

Our People Contact us

<section class="hero hero--slim">
    <div class="wrapper">
        <div class="hero__content">
            <h1>We are <span class="is-grey">The Idea Bureau</span></h1>
            <p>Want to find out more?</p>
            <a class="button">Our People</a>
            <a class="button button--ghost">Contact us</a>
        </div>
    </div>
</section>