Banner

The banner is the first thing a visitor sees on the homepage of a website. It often spans the full width of the screen or the main content area.

It usually includes a(an):

  • Title
  • Brief description
  • Image or visual graphic
  • Optional image caption
  • Button

A banner displays an action you want people to take or highlights the most important information on a page.

Full span banner

Title

Highlight an action you want people to take or important information on the homepage.

Short link

Minimum width: 1600px


  

    

      

        
Title

        

          Highlight an action you want people to take or important information
          on the homepage.
        

        

          
            Short link

Feature banner

The feature banner spans the full width of the content area on desktop and full width of the screen on mobile. On mobile, the feature card will stack in this order:

  • Image
  • Image caption
  • Title
  • Description
  • Button

Title

Highlight an action you want people to take or important information on the homepage.

Short link (feature)

Maximum width: 1176px


  

    

      
Title

      

        Highlight an action you want people to take or important information on
        the homepage.
      

      
        Short link
        (feature)

Usage

When and how to use it

Use the hero banner to catch visitors' attention and highlight the top task or need.

Place it at the top of the homepage so it appears below the statewide header, site header, and site navigation. Learn more in our guidance on Webpage structure .

Include a concise title, description, image, and at least one button. Choose an image that’s in harmony with your brand identity, mission, and tone. The minimum image size is 776 x 517 pixels. For best results, use images with this aspect ratio.

How not to use it

Do not use more than one hero banner on your homepage.

Do not use more than one primary call-to-action within your hero banner.

Do not use the hero banner to make an image carousel. Carousels frustrate people more than they help them and do not meet accessibility standards.

Do not put a lot of content in your hero banner. Too much content is hard to read. It will also lengthen the hero banner and cause awkward whitespace.

Do not use busy images or graphics behind content.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes