1 Universal Corporate Header Bar

2 Mutual of Omaha Logo

The Universal Corporate Header is the blue bar at the top of the page. It is intended to connect a site to the corporate brand. This area can house links to other universal navigation and elements such as a state selector or a link back to a parent site from a landing page.

The Universal Corporate Header Bar’s purpose is to brand the site while allowing the site’s title to be the primary name on the page. For this reason, do not use it without the Global Header Bar (see the Global Header Bar documentation below).

1 Universal Corporate Header Bar

2 Global Header Bar

Utility items (ex. account login, search, tools, etc.) can also be placed in the Global Header Bar on the right-hand side.

A basic call to action that applies to the entire site (ex. a phone number on a marketing landing page) can be placed in the right-hand side of the Global Header Bar, space permitting.

If a site or application does not have a title (ex. mutualofomaha.com), the blue primary logo is placed in the Global Header Bar area, and the white reversed logo in the blue Universal Corporate Header bar is removed.

The Digital Design System offers several navigation patterns to fit a range of scenarios. The chart below details the strengths for each type of navigation pattern.

The hero is a marketing element designed to add visual interest to a page. It includes an image and a blue box with a headline. The hero always sits at the top of the page, below all navigation bars.

Heroes are not required. Because of their large size, pages where the user needs to get to content quickly should avoid using heroes.

Headlines are written in sentence form and give the user a clear understanding of the purpose of the current page. The headline can appear in the blue box on a hero image or with the page content.

Headlines are generally an h1 tag. To keep our sites optimized for search engines, every page should only have one h1.