# Hero Header

## A large hero header, perfect for a landing page.

## Example

# My Hero Header

Hello. I am a hero header.

Get Started

## Adding a hero header

A hero header is designed to be at the top of a landing page, and outside of any container. It will fill up 50% of the viewport height, and 100% of the width. It can have centered content and a background colour (any Magic Colour) or image.

To add a hero header with a background colour, use the hero class:

    <div class="hero default"> <!--Change 'default' to any colour-->
      <div class="hero-content">
        <h1 class="title">My Hero Header</h1>
        <p class="caption">Hello. I am a hero header.</p>
        <a href="start.html" class="btn btn-blue hero-action" style="display:inline-block">Get Started</a>
      </div>
    </div>

## Full height

By default, a hero header covers 50% of the screen size (50vh). You can change it to cover the entire screen size with the full class name:

# My Hero Header

Hello. I am a hero header.

Get Started

    <div class="hero default full">
      <div class="hero-content">
        <h1 class="title">My Hero Header</h1>
        <p class="caption">Hello. I am a hero header.</p>
        <a href="start.html" class="btn btn-blue hero-action" style="display:inline-block">Get Started</a>
      </div>
    </div>

## Using an image

Images are entirely different to background colours, so use different syntax (and an entirely different class name). Nevertheless, they are still simple to build:

# My Hero Header

Hello. I am a hero header.

Get Started

    <div class="hero-img">
      <img src="https://placeimg.com/1280/1080/arch">
      <div class="hero-content">
        <h1 class="title">My Hero Header</h1>
        <p class="caption">Hello. I am a hero header.</p>
        <a href="start.html" class="btn btn-blue hero-action" style="display:inline-block">Get Started</a>
      </div>
    </div>

The image may be re-scaled to fit into the container, but it will never be stretched. Ensure that you check the image before deployment.

Please also ensure that any white text contrasts effectively with your image.

## Full height image

Hero images can also be made full-height:

# My Hero Header

Hello. I am a hero header.

Get Started
This will result in different scaling of the image.

Magic does not include a parallax hero, as it's Javascript-free. Making a parallax using an img tag only is not entirely possible with pure CSS, and it's usually done with a background-image instead.