Skip to main content Skip to secondary navigation

Banner

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
    • Super Headline
    • Headline
    • 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