Banner

Selector

header, nav > header

The banner, or primary navigation, is a site-wide banner that appears stickied to the top of the page. Additionally, since it's purpose is navigation, the first child should be the nav element. The banner is implemented with a header element, since it automatically takes a role="banner" when not a child of the main or article element. This restriction is enforced in the selector as well. The banner styles from Mango UI will only apply to header elements that are not a descendent of the page tags. This ensures that the visuals align with the semantics of the element.

Because of this restriction, it's not possible to include a banner in an example box, but the pattern can be seen in use as the banner of this page.