Skip to main content Skip to secondary navigation

Banners

gradient
This is a banner superhead

This is a banner headline

Any text on banners will appear white and centered. Bold and italics are supported.

Main content start

You can place banners at the top of your page and within your page to help break up text. When used strategically, banners create a high impact impression on users and can be used to draw attention to noteworthy information.

Banner Part 1

Image

(required)

If text is present, the image must allow the banner to meet accessibility standards.

Banner Part 2

Text Content

Super Headline (optional)

Headline (optional)

Body (optional)

Banner Part 3

Button Link

(optional)

Types of Banners

  1. Top Banner
    • Appears immediately below the main menu navigation and spans across the full width of the page. You can see a live example above at the top of this page.
  2. Paragraph Banner
    • Appears within the page content and spans the width of the page body. You can see a live example below.
Test

Accessibility for Banners

Engineering’s specific banners differ from the ones available to the rest of the university. Our banner text will not have the white card appear behind the text (see examples on the Stanford Sites User Guide). Instead, when you add any content (superhead, headline, or body text) the text will turn white.

Gradients are foolproof options

The gradient photo options that SWS has added to department sites provide sufficient color contrast for any text that you want to put on a banner to meet accessibility standards. These are the easiest options at your disposal to use for a banner image background.

gradient

 

gradient

 

gradient

 

If you want to use a different image on your banner and will have text on top, you will need to ensure it meets accessibility standards for color contrast between the colors of the image and the white banner text on top.

To get assistance with reviewing a banner’s accessibility, email Drea.