2 global Global

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

Source: styles.scss, line 89
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
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