This article explains how to design and build hero sections on brochure sites:
In its simplest form, a hero is a single h1 heading wrapped in a section container with p-section--hero class name (that provides the necessary shallow top padding and deep bottom padding). The h1 heading is the only required element in all hero sections. Examples of this type of usage can be found on Canonical blog, archive and similar pages.
See example of a hero with a single heading
Often the h1 heading is followed by a subtitle or another kind of supplementary text. It should be implemented as a paragraph with p-heading--2. The spacing between h1 and h2-sized headings is adjusted by Vanilla to shave off the excess margin and padding. This makes them look like they are part of the same paragraph:
See example of a hero with a heading and a subtitle
Any additional content should be separated from headings by wrapping them in another section with p-section--shallow class. This creates the visual equivalent of a pause in speech.
In the following example, we have a headings section, then pause, then a paragraph:
See example of a hero with additional content
Below, the paragraph is followed by another pause, followed by a form element:
See example of a hero with a form element
We insert muted rules (p-rule--muted) when large blocks of content are followed by one or more small elements, to help turn the small elements into a block that doesn’t seem overshadowed by preceding content.
See example of a hero with horizontal rules
When text in headings wraps, wherever possible, choose the best place in the sentence to wrap onto a new line. A good way to think about this is, if you had to take a breath (or insert a comma) in the middle of the sentence, where would you do it?
We have utilities to show/hide line breaks at specific breakpoints. We can also insert non-breaking spaces ( ) to achieve the same effect near the end of the line.
See example of a hero with deliberate line breaks
The examples above use the 25/75% section layout. We have so far only placed content in the 75% column, leaving the first 3 columns of the 12 column large screen grid empty.
The first three columns (25% column) can be used for purposes other than adding white space, provided content fits comfortably and doesn’t wrap excessively.
A few examples:
As a container for content that is known to be short and unlikely to become longer due to copy changes:
See example of a hero with a heading in 25% column (404 error screen)
See example of a hero with a portrait in 25% column (blog post)
As a “signpost” - a place to insert relevant small logos for example.
Wherever possible, take care to align the baseline of any text in the logo to the baseline of the h1. This can be done by exporting the logo with the needed amount of white space inside the image file itself:
See example of a hero with a signpost logo in 25% column
By default, the 25/75 split is preserved on medium screens by using 2 and 4 of the available columns (turning it into 33/66% split).
It is fine as long as the content of first column is small enough to fit in 2 of the grid’s 6 columns, as in the following example:
In a case where content in the first column is too large to fit in 2 columns, or the content of second column being long enough to justify using full width of the screen, the layout should be adjusted to stack on medium screens (by using row--25-75-on-large variant).
We encourage examining the content and finding a layout that makes better use of the available space. It is also important to pay attention to the layout in subsequent sections, and ensure the overall sequence of layouts is well balanced.
Layouts where the 25% column on desktop is empty automatically stretch the 75% container to fill the full width on medium screens. Any nested layouts, like the "Resources" and "Get in touch" section in the example below, should be handled on case-by-case basis. Here, they are adapted into a 33/66% layout, providing more space to the section that needs it:
See example of a hero with a nested row in 75% column
For more complicated layouts utilise both columns of the 25/75% split and a nested grid row inside the 75% column. This allows for more complex layouts, like the one below:
See example of a hero with a signpost logo and nested grid row in 75% column
Suru backgrounds are a common way to provide visual separation between hero and rest of the page.
Check out the Suru component documentation for more information on how to use it and relevant examples.
