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 |
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.
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.
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.
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.
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.
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.
The vf_hero Jinja macro can be used to generate a hero pattern. The API for the macro is shown below.
| 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 |
| 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 |
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.
Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.