Full-Width Hero
A full-width pattern—with space for a large, dramatic photo—designed to fill the top header area of a high-level or landing page. The text area has a white background that overlaps the photo as well as the edges of the first item placed below it on a page. There is a textured orange bar beneath this pattern.
Use Cases:
- Reserve for home, landing, and routing pages that need to make a big visual impact.
- Give users a clear call to action, which should be the most important link on the page.
Guidelines:
- Optional superheading – Aim for 25 characters or fewer, should be supplemental to the large heading (to summarize, add context, add an editorial line for voice/tone, etc.).
- Large heading – The main H1 page title. Use short words, aiming for 30 characters or fewer. As with all H1 page titles, follow best SEO practices regarding use of keywords. As the page title, this heading should convey the overall meaning of your page whether or not you use the optional super/subheadings.
- Optional subheading – Use if you need space for additional context that does not fit into the other heading(s).
- Paragraph text – Orient the user to the page’s main purpose or unblock any barriers that would keep them from clicking the CTA. Aim for 25 words or fewer.
- Optional call-to-action link – One link, should be a true action — something you want the user to do (not just a place for them to go).
Avoid:
- This pattern should only be used as the page hero — do not place more than one per page (see accessibility note).
- Avoid long (many-lettered) words in the large heading field.
- At mobile sizes, more than 3 lines of text will take up entire screens.
Accessiblity:
This pattern codes the heading field at H1 level for the page title, and it’s bad practice for accessibility and SEO to use more than one H1 per page, so be sure to use the no-title page template.
Regarding the order of the superheading and page title—be aware that assistive devices will read the H1 page title first, so once again, make sure that the page title conveys the overall meaning of the page and is not dependent on the superheading text for understanding.
Dependencies:
This component is available on these page templates:
- Blank page
- Page without title
You must switch the page template from the default to one of these before you will see it as an option in the block editor.
Image Dimensions:
Recommended image dimensions: 1700x x 700h.
Component Viewer
Preview various component colors, widths, and alignments.
Optional superheading
Full-Width Hero
Optional subheading
Paragraph 25 words or fewer. Use to orient users or unblock any barriers that would keep them from clicking a CTA link.