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):
- Brief description
- Image or visual graphic
- Optional image caption
A banner displays an action you want people to take or highlights the most important information on a page.
Full span 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 caption
Maximum width: 1176px
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.
Standard accessibility review
Each time a new component version is published: