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>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:
<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>Images are entirely different to background colours, so use different syntax (and an entirely different class name). Nevertheless, they are still simple to build:
<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.
Hero images can also be made full-height:
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.