Jump to main content

A hero is a prominent banner section typically used to quickly capture the user's attention after they land on the page. Depending on the size and composition of your content, you can choose from a variety of hero layouts:

The hero pattern is composed of the following elements:

Element Description
Title (required) h1 title text
Subtitle h2 subtitle text
Description p description text
Call to action block Call to action block beneath the description
Image Main hero visual

50/50

50/50 on large

You can use .row--50-50-on-large to create a 50/50 hero that is split on large screens and stacked on small and medium screens. This is useful when your hero contents, especially your image, are not suitably balanced when viewed on medium screens. This makes your hero somewhat safer to use, as it helps to avoid awkward content sizing on medium screens, making all content stack vertically.

50/50 on large and medium

You can use .row--50-50 to create a 50/50 hero that is split on large and medium screens. This is useful when your available vertical space is limited, and your hero contents are suitably balanced to be viewed side-by-side on medium screens.

50/50 with full width image

The above hero layouts place the hero image in the right column by default. However, this is not suitable for very wide images. If you have a very wide image or otherwise want your image to take up the full hero width, place the title by itself in the first column and place the image in a .p-image-container .is-cover at the same level as the grid columns. This will make the image take up the full width of the hero.

25/75 "signpost"

If you have a small image that you want to associate with the hero title, you can use the "signpost" layout. This places the image in a small column beside the primary hero content.

This layout also supports a full-width image. Place the image in a .p-image-container .is-coverat the same level as the hero grid columns to make it take full width beneath the rest of the hero. This is identical to the full-width image layout for the 50/50 layout.

75/25

If you have a large amount of text content to place in the body of the hero and/or a portrait-oriented image, you can use the 75/25 layout. This places the image in a small column beside the hero text.

The .row--75-25 class is used to maintain the 75/25 split on medium screens. If you find that the image is too tall on small screens, you can use .u-hide--small to hide the image on small screens.

Fallback

If you have a very large amount of text content that is difficult to balance with the hero image, you can use the fallback layout. This places the title and subtitle in their own row above the rest of the hero content.

Import

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.