Skip to main content Skip to secondary navigation

Banner

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 we have done on some pages of engineering.stanford.edu, or you can use it to introduce the page topics,  highlight any important events or news that might have occurred, or to make an important statement about the page.

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

  1. Image
  2. Content
  3. Button Link

The Body Text Area contains limited editing options with minimal HTML. The limited editing options include the following:

  • Bold
  • Italic
  • Styles dropdown 
  • Link
  • Unlink
  • Source
Banner Card Limited Text Editing

The Styles dropdown becomes available when adding links, giving you the option to apply different button styles. If additional editing and styling is needed, we suggest using a Text Area paragraph to present the information.

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
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