Components

Header

Headers appear at the top of every page.

The header shows users that they are on the website and other things they can visit. It is included in the default page template.

When to use this component

Use the header on every page.

Formatted example
HTML code 
<header class="header" role="banner">
	<div class="header--container width-container">
		<div class="header--logo">
		  <a href="http://localhost:4000" class="header--logotype--link">
			<span class="header--logotype--text">Civil Service</span>
			<span class="header--logotype--text">LGBT+ Network</span>
		  </a>
		</div>
		<div class="header--content">

			<button type="button" id="menu-button" class="header--menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide navigation menu" onclick="toggleMenu()">Menu</button>

			<nav>
				<ul id="navigation" class="header--navigation" aria-label="Navigation menu">

						<li class="header--navigation-item">
							<a class="header--link" href="https://www.civilservice.lgbt/news" title="Visit the News page">
								News
							</a>
						</li>

						<li class="header--navigation-item">
							<a class="header--link" href="https://www.civilservice.lgbt/events" title="Visit the Events page">
								Events
							</a>
						</li>

						<!-- etc etc etc -->

				</ul>
			</nav>

		</div>
	</div>
</header>