Sidebar

The sidebars are used to pull out secondary content, such as related links, calls to action, promos, etc.


Width

Sidebar (200 px) – Both left and right sidebars can be used to add static or dynamic content to your website. Sidebars may have special CSS styling while still adhering to approved colors, fonts, and treatments.

Image Usage

  • The left sidebar can contain the following: left navigation, established departmental graphics, contact information, dynamic content, and external links.
  • The right sidebar can contain the following: right navigation, approved sub-brand logos or legacy marks used as graphics, contact information, dynamic content, and external links.

Sidebar Examples
Each of these examples shows the different types of content allowed in the sidebar.


Sidebar Backgrounds

  • Graphics may be used for sidebar backgrounds.
  • It is safe to include background colors from the approved web color palette.
  • Background treatments can be simple shapes and gradients using and/or coordinating with the approved web color palette.
  • There are other options for sidebar graphics available as customized elements. View Appendix B for further details.

Sidebar Background Examples
Each of these examples shows the different options available using standard colors, background images, treatments, and styles.  For more information, please see Appendix B.


Dynamic Content in Sidebar

The sidebar is often used to display dynamic content such as news or events, Twitter feeds, FAQs, login information or other types of long form copy and listings.


Graphic Elements in Sidebars

Promos and calls to action are the other types of sidebar items. These are not dynamic and may be full-color images. The left or right sidebar is a good place to add approved sub-brand or legacy logos, or established departmental graphics.

Sidebar Example
An example of a sidebar block with a background
An example of a sidebar block with a background
An example of a sidebar block with a background containing videos
An example of a sidebar block with a dynamic content
Examples of graphic elements in sidebar blocks