Hero Options

A "hero" is usually the first thing anyone sees when they arrive to a site's homepage. A hero is meant to be eye catching, attention grabbing and should intrigue visitors stay on the site. The internal page's hero layouts can either be the same one from the homepage, or similar but toned down a bit. The media you choose for the row background will determine what kind of hero layout will work best. You can also pair your hero with a row separator


Site Goal(s): | Use Case(s): , ,

Style 1 - Rule of Thirds

Visually divide the hero section into thirds. The focal point is generally in 1/3 to 1/2 of the image on its right or left. The text content will go on the side opposite the focal point.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orc vitae. 

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orc vitae. 

Style 2 - The Stripe

Similar to the "Rule of Thirds" hero layout, but the text content might need more contrast or more of the image might need to show.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Style 3 - Split Screen

This layout is great for hero images with a center focal point. This means if you placed the text on top of the hero image, it would cover the important parts, so the content is placed beside the image instead.

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut.

Style 4 - Text Overlay

The text content in this hero layout is centered directly over the image. This is a good layout if the hero image is not too busy, has no real focal point or has lots of negative space along the top. If the text on top is still too hard to read, we'll add an opaque overlay for contrast.

Lorem ipsum dolor sit, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut eu sem integer vitae. 

Lorem ipsum dolor sit, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut eu sem integer vitae. 

Style 5 - Floating Image

This layout works best for cases where the hero image is too small to fill the screen, or if everything in the image is so important that it can't be cropped or hidden. The background of the row is usually a solid color, a gradient or a blurred image.

Lorem ipsum dolor, consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut eu sem integer vitae. 

Style 6 - Blog Slider

Use this hero layout if you have a blog-centric site with posts that get regularly updated, and you would like for your latest posts to be the first thing people see on the site.

Orci a scelerisque purus semper eget

August 4, 2020

Eu volutpat odio facilisis mauris. Egestas maecenas pharetra convallis posuere morbi leo urna. Duis ultricies lacus sed turpis. Lectus sit amet est placerat in. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Varius sit amet mattis vulputate enim nulla. In ante metus dictum at. Netus et malesuada fames ac turpis. Eget mauris pharetra…

Read More

Massa enim nec dui nunc mattis enim

July 4, 2020

Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. In eu mi bibendum neque egestas. Aliquet lectus proin nibh nisl condimentum id venenatis. Sit amet nisl purus in mollis nunc sed id semper. Et pharetra pharetra massa massa ultricies. Congue mauris rhoncus aenean vel…

Read More

Est lorem ipsum dolor sit amet consectetur adipiscing elit

June 4, 2020

Eget mauris pharetra et ultrices neque. Blandit massa enim nec dui. Arcu cursus vitae congue mauris rhoncus aenean. Pellentesque habitant morbi tristique senectus. Id diam vel quam elementum pulvinar etiam non quam. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Bibendum arcu vitae elementum curabitur vitae nunc. Mauris sit amet massa vitae tortor…

Read More

Tortor consequat id porta nibh venenatis cras sed felis

May 4, 2020

Ipsum suspendisse ultrices gravida dictum. Sed arcu non odio euismod lacinia at quis risus. At tellus at urna condimentum mattis pellentesque id nibh. Morbi tristique senectus et netus et malesuada fames. Molestie at elementum eu facilisis sed odio. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Sed vulputate mi sit amet mauris commodo…

Read More

Leo a diam sollicitudin tempor Ac felis donec et odio

April 4, 2020

Enim diam vulputate ut pharetra sit. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Bibendum neque egestas congue quisque egestas diam in. Nibh praesent tristique magna sit amet purus gravida quis. Nibh nisl condimentum id venenatis a. Sit amet porttitor eget dolor morbi. Eu feugiat pretium nibh ipsum consequat nisl. Gravida rutrum quisque non…

Read More

Style 7 - Product Slider

Use this hero layout if you have a premium shop with many products that get regularly added, and you would like for your latest or featured products to be the first thing people see on the site.