The hero element is the first one in the page, always. It contains the most important information and almost always some kind of call-to-action.
Hero structure
All the landing pages in Ascension contain a hero element. Here is a complete list of the elements that can be found in a hero area. Please note that each page has a slightly different hero area so you won't find all of these elements in a single page.
Navbar with logo
Main statement
Secondary statement
Call-to-action (it can be a simple button leading somewhere else or an entire form)
Embedded video
Video simulator
Static image
List of benefits/features
In terms of design, a hero area has a solid background but can also use a background image.
For reference, here's the complete code for one of the hero areas:
<div class="hero color-bg artwork-bg" data-internal-nav-section id="top">
<!-- Main header. -->
<header class="grid sm-center lg-distribute middle main" data-smart-header>
<div class="cell shrink">
<a href="landing-1.html" class="hide-on-cloned"><img src="../../assets/img/logos/placeholder-logo-light.svg" alt="Logo"></a>
<a href="landing-1.html" class="show-on-cloned"><img src="../../assets/img/logos/placeholder-logo-dark.svg" alt="Logo"></a>
</div> <!-- end .cell -->
<nav class="cell shrink menu hide-sm show-lg" data-internal-nav>
<ul>
<li><a href="#features-v1">Features v1</a></li>
<li><a href="#features-v2">Features v2</a></li>
<li><a href="#testimonials-v1">Testimonials v1</a></li>
</ul>
</nav>
</header> <!-- end header.main -->
<div class="wrapper content flush-top">
<div class="grid middle center gutter">
<div class="cell md-10 lg-6 xlg-4">
<h1>This is the hero title.</h1>
<h3>This is the hero subtitle.</h3>
</div> <!-- end .cell -->
<div class="cell sm-12 lg-1"><!-- a vertical spacer --></div>
<div class="cell md-auto lg-5 xlg-4">
<div class="form-container with-header">
<header>
<h4 class="heavy">This is the form title.</h4>
<p><small><em>This is the form subtitle.</em></small></p>
</header>
<div class="content">
<form action="#" method="POST" class="alternate">
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name">
</div> <!-- end .form-group -->
<div class="form-group">
<label for="email">Your Email Address:</label>
<input type="email" id="email" name="email">
</div> <!-- end .form-group -->
<button class="button large full-width">Button Text</button>
<p><small><em>By clicking the button you agree to YourCompany's Terms of Service.</em></small></p>
</form>
</div> <!-- end .content -->
</div> <!-- end .form-container -->
</div> <!-- end .cell -->
</div> <!-- end .grid -->
</div> <!-- end .wrapper -->
</div> <!-- end .hero -->
This is the hero title.
This is the hero subtitle.
This is the form title.
This is the form subtitle.
One of the classes you'll find in every single hero area is .hero. This is necessary in order for all hero elements to be displayed properly.
Helper classes
On top of the .hero class that's necessary for all hero areas, there are a few helper classes needed for proper content styling and layout.
Class
Description
content
Any container with this class will center the text and add a large bottom padding. This is not to be used on a .hero container, instead use it inside one (see the example above).
color-bg
This will add the proper color to the elements inside a hero with a solid background and also sets the solid background to the tertiary color in the palette.
light-bg
This will add the proper color to the elements inside a hero with a solid background and also sets the solid background to the black-4 color in the palette.
dark-bg
This will add the proper color to the elements inside a hero with a solid background and also sets the solid background to the black-95 color in the palette.
artwork-bg
This will add a background image to the hero, on top of the existing color background.
light-overlay
This will add a background color that's meant to be displayed on top of a background image. The color added is white-75 from the palette. This class is meant to be added to the hero element and needs to be used in conjunction with a .hero-bg element (see the explanation below).
dark-overlay
This will add a background color that's meant to be displayed on top of a background image. The color added is black-65 from the palette. This class is meant to be added to the hero element and needs to be used in conjunction with a .hero-bg element (see the explanation below).
Using a background image with a color overlay.
If you take a look at demos 5, 6 and 11 you'll see that each hero area has a background image but also a color layer overlayed on top of those images. Here's how you achieve this effect.
Add the class of .light-overlay or .dark-overlay to the hero area.
Create a new element with the class of .hero-bg that looks like this:
