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.

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.

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.

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.

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.