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) Title text (to be placed in h1 heading)
Subtitle Subtitle text (using h2 style)
Description Description text (one or more paragraphs)
Call to action block CTA 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.

Jinja Macro New

The vf_hero Jinja macro can be used to generate a hero pattern. The API for the macro is shown below.

Parameters

Name Required? Type Default Description
layout Yes One of:
'50/50',
'50/50-full-width-image',
'75/25',
'25/75',
'fallback'
'fallback' Choice of hero layout
title_text Yes string N/A h1 title text
subtitle_text No string N/A h2 subtitle text
is_split_on_medium Yes boolean false Whether the layout is split on tablet-sized devices

Slots

Name Required? Description
description No Paragraph-style content below the title and subtitle
cta Yes Contents of a CTA block beneath the title and description
image Yes, when layout='50/50-full-width-image' Image content
signpost_image Yes, when layout='25/75' Small image (such as a logo) to place in the left column of the 25/75 Hero

Import Updated

Jinja Macro

To import the Hero Jinja macro, copy the following import statement into your Jinja template.

{% from "_macros/vf_hero.jinja" import vf_hero %}

View the building with Jinja macros guide for macro installation instructions.

SCSS

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