University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Header (new brand) Component

Build your site's primary header with its formal title, a homepage link, and optional set of audience page links that will carry throughout your site.

New Brand Features

Developed for the new brand, this component replaces the Main and Mini Header components. 
> read more about the digital brand transition

Older sites will need to transition

> Step by step guide for transitioning to the new header

Using This Component

Add the component to the page. There is a main editable Header area plus two additional 'drag components or assets here' areas. And three fixed links are provided in a narrow banner at the very top: UB Home, Maps and UB Directory.

The header belongs at the top of your site. The normal order is as follows (not all sites will use all components) : 

  1. Emergency Alert Banner
  2. Header (this component)
  3. Top Navigation
  4. Breadcrumbs  
The component as it is first displayed on the page.

The component as first displayed on the page. NB. the main header display is NOT an official lockup and is only authorized for use in your website.

Main Header Settings

Title - Enter the formal title for your website, usually your office or program's official name.

Use your proper unit name and ensure the line breaks in your title match how it is displayed in your Unit Lockup. 
> Review brand guidlines

Title Link - Provide a link back to your homepage (required for all but single-page sites).

  • Use the magnifying glass tool to find the path to your website in the UBCMS ("/content/...").

Tagline - Enter an additional description for your site (optional). This description can clearify what your site is (e.g. https://www.buffalo.edu/alumni.html)

  • The tagline will be displayed at the bottom right of the header module.
The component opened for editing showing the Header settings.

The component opened for editing showing the Header settings.

School 1 Title - Name your unit's parent school/division or primary affiliation to match your Unit Lockup (required for most sites).

  • Will be displayed at the very top of the header module.

School 1 Link -Provide a link back to the primary parent website.

  • Use the magnifying glass tool to find the path to your parent's website.
  • For an external website, be sure to enter the complete URL ("http://...").

School 2 Title - If your office has a second parent or affiliation, enter its name here (optional but recommended).

  • It will be displayed at the very top of the header module, to the right of the primary affiliation.

School 2 Link - Provide a link back to the secondary parent website.

  • Use the magnifying glass tool to find the path to your second affiliation's website.
  • For an external website, be sure to enter the complete URL ("http://...").

Color Scheme - Choose: blue header with a gray bar (default), gray header with a blue bar, or a white header with a blue bar.

  • If you have provided School 1 or School 2 Titles, the bar will be darker beneath those links.

Tie your color choices into your overall brand strategy.

Additional Navigation Areas

Two additional buildable areas on the right are intended to house specific components.

Top Area - Use this to add Social Media Button components.

Bottom Area - Use this to add Button components for task navigation.

Restrictions

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Related Components:

Last Revised:

April 20, 2017