2 global Global

Global components are design components that appear on all pages of the site.

Source: styles.scss, line 89

2.1 global.header Branding header

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

@TODO: Replace this image mock-up with an HTML/CSS/JS implementation.

Examples
Default styling
.header--mobile
Mobile version of the header.
Markup: global/header/header.twig 
<header class="header {{modifier_class}}" role="banner">
  {% if modifier_class == 'header--mobile' %}
    <img src="components/global/header/mockup-mobile.png" />
  {% else %}
    <img src="components/global/header/mockup.png" />
  {% endif %}
</header>
Source: global/header/_header.scss, line 5

2.2 global.navigation Navigation

Navigation components are specialized design components that are used for site and page navigation.

Source: styles.scss, line 97

2.2.1 global.navigation.navbar Navbar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A simple method to get navigation links to appear in one line.

@TODO: Replace this image mock-up with an HTML/CSS/JS implementation.

Examples
Default styling
.navbar--mobile
Mobile version (closed)
.navbar--mobile.is-active
Mobile version (open)
Markup: navigation/navbar/navbar.twig 
<div class="navbar {{ modifier_class }}">
  {% if modifier_class == 'navbar--mobile' %}
    <img src="components/navigation/navbar/mockup-mobile.png" width="195" height="52" />
  {% elseif modifier_class == 'navbar--mobile is-active' %}
    <img src="components/navigation/navbar/mockup-mobile-active.png" width="375" height="797" />
  {% else %}
    <img src="components/navigation/navbar/mockup.png" width="938" height="208" />
  {% endif %}
</div>
Source: navigation/navbar/_navbar.scss, line 4

2.2.2 global.navigation.breadcrumb Breadcrumb navigation

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The path to the current page in the form of a list of links.

Example
Markup: navigation/breadcrumb/breadcrumb.twig 
<nav class="breadcrumb {{modifier_class}}" role="navigation">
  <h2 class="breadcrumb__title">You are here</h2>

  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="#">Home</a> › </li>
    <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
    <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
    <li class="breadcrumb__item">Current item</li>
  </ol>
</nav>
Source: navigation/breadcrumb/_breadcrumb.scss, line 4

2.2.3 global.navigation.skip-link Skip link

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

To make the link completely hidden until a user tabs to the link, combine it with the visually-hidden component.

Examples
Default styling

:focus
Focus styling.

Markup: navigation/skip-link/skip-link.twig 
<p class="skip-link__wrapper">
  <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable {{modifier_class}}">{{content}}</a>
</p>
Source: navigation/skip-link/_skip-link.scss, line 1