Banner Paragraph

The Banner paragraph is a great way to add visual impact to a page.

The Banner paragraph comes with optional fields for a superhead, headline, short body, and button. The Banner displays a long, wide image with text in a container on top of the image that is called an "overlay."  On mobile, the overlay moves below the image for better legibility.

You can use it as an image alone (with no text overlay) or you can use it to introduce page topics, to highlight important events or news, or to make an important statement about the page.

There are two types of banners available:

• Top Banner. This is a banner that is built in to some content types, such as Basic Page and News. It cannot be removed, but will not appear if the fields are not filled in. The Top Banner always spans the full width of the page and appears above the page title on Stanford Sites and Stanford Sites Intranet.
• In-page Banner. Editors can use the Banner Paragraph together with other paragraphs to create visual interest and divide a page into sections. Banner Paragraphs placed inside the page will span the full width of the content area, which may be less than the entire browser window depending on other page elements such as sidebar menus.

This guide covers both types of banners.

Adding a Banner Paragraph

Important note: Banners may only be added to single column Section Layouts.

The Banner paragraph is made up of three parts

Content

• Image. We recommend an image that is at least 3000 px across. This image behaves responsively based on screen size. The ideal size for this image is 3000px by 1000px. Images not meeting this 3:1 aspect ration will have some sections that are not visible.
• Superhead. This is an optional field. We recommend your superhead be 20 characters or fewer.
• Headline. This is an optional field. We recommend your headline be 70 characters or fewer.
• Body. This field supports minimal formatting. We recommend this be 250 characters or fewer. 
  • 

Button Link

The banner supports a button link which can link to an internal or external page.

Style

The Banner paragraph has an option to left or right-align the overlay above the Banner image. This is handy if the primary focus of your image is to one side.