Hero banner

Hero banner

Website visitors browse pages, scanning quickly for useful or interesting information. Pages with little visual interest and a weak title may cause visitors to leave your page quickly.

Hero banners provide a large contextual image with a bolded title to catch visitors' attention. This helps them quickly understand what information is on the page and encourages them to read further.


Component data

Component resources:
SCSS files

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a hero banner supports.

Hero banner context title Hero banner title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


Code


				
			

Responsive preview

Usage best practices

Place the hero banner at the top of the page because it is meant to grab users' attention as well as it contains the main page title. For those same reasons, any given page must only contain a single instance of the banner.

Consider using hero banner to:

  • help set a visual, emotional and informational tone
  • provide a clear introduction to the page
  • provide visual context to the page content, helping tell the story
  • highlight primary calls to action (if applicable)

Usage examples:

  • high profile content pages i.e. section home page/landing pages
  • introductions to specific content
Hero banner variations and features
Variation name Unique features
Standard
  • optional short description
  • optional call to action button
Long text
  • background image with multiple height options
  • optional context title
  • long text with optional distinct lead paragraph formatting
Adaptable
  • multiple configurations for the background image(s) and content
  • ability to add custom mobile image
  • configurable font size of the title
  • optional description
  • two optional call to action buttons

Do

Use high quality images which can scale to fit numerous screen sizes and aspect ratios with plenty of visual white space around the edges.

Use titles that are strong, descriptive and succinct.

Apply character limits on the content to reduce visual clutter:

  • Title: 50 characters
  • Context title - 50 characters
  • Short description - 75 characters
  • Body text (long text variation) - unlimited

Don't

Do not use slogans for the banner title as that is the main heading for the page. If you need a banner with a slogan, use the slogan banner instead.

Do not use multiple banners per page.

Do not embed any critical text into the background image.

Do not use images with important details close to the top, bottom or sides of the image, as they could get cropped out at different screen sizes.