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.
If text is present, the image must allow the banner to meet accessibility standards.
Super Headline (optional)
Types of Banners
- 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.
- Paragraph Banner
- Appears within the page content and spans the width of the page body. You can see a live example below.
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.
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.