Skip to main content Skip to secondary navigation


Main content start

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

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 
        Banner Card Limited Text Editing
  2. Button Link
  3. Style
    • Card alignment: option to left or right-align the content Card overlay above the Banner image. 
      Banner Paragraph style modal

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:

Example of Banner with a Stanford landscape background
image of Banner Paragraph with right aligned card
Example of Banner with a group of Researchers in a lab background
banner sample 3

Here are some examples of Paragraph Banners:

Paragraph Banner Example 2
Paragraph Banner Example 3
Paragraph Banner Example 1