Banner

The Banner is a great way to add visual impact, tone and hierarchy to a page.

The banner paragraph comes with optional fields for a superhead, headline, short body, and button. It displays a long, wide image with text in a container on top of the image. 

You can use it as an image alone (with no text overlay), as done on some pages of HR at Stanford, or you can use it to introduce page topics, to highlight important events or news, or to make an important statement about the page.

A Banner is made up of three parts (all text content is optional):

1. Content
   • Image
   • Superhead. *Best Practice:To support readability, we recommend Superhead be 20 characters or less.
   • Headline. *Best Practice: To support readability, we recommend Headline be 70 characters or less.
   • Body: contains limited editing options with minimal HTML. The limited editing options include the following:
     • Bold
     • Italic
     • Styles dropdown: available when adding links, giving you the option to apply different button styles. If additional editing and styling are needed, we suggest using a Text Area paragraph to present the information.
     • Link
     • Unlink
     • Source 

       

2. Button Link
3. Style
   • Card alignment: option to left or right-align the content Card overlay above the Banner image. 
     

Verify the alternative text for your image

Because images and their alternative text are shared across your site, before adding an image you'll want to make sure your alternative text matches the context in which it is used.

Here's more on verifying and updating the alternative text.

There are two types of Banners available:

1. Top Banner
2. Paragraph Banner

The Top Banner appears immediately below the main menu navigation and spans across the full width of the page while the Paragraph Banner appears within the page content and spans the width of the page body. 

Here are some examples of Top Banners on a page:

Here are some examples of Paragraph Banners: