skip to content

Header

Use the Header to brand your Democracy Club site and provide the main navigation. It includes a logo which links to https://democracyclub.org.uk/ and a set of main navigation links for the local site. The “Home” link should link to the local site’s homepage, not https://democracyclub.org.uk/ (unless the site in question is democracyclub.org.uk).

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element. 
<header class="ds-header">
  <a class="ds-skip-link" href="#main">skip to content</a>
  <a class="ds-logo" href="/">
    <img src="/path/to/logo.svg" alt="Democracy Club home" />
    <span>democracy<br>club</span>
  </a>
  <nav>
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a aria-current="true" href="#">About</a>
      </li>
      <li>
        <a href="#">Our work</a>
      </li>
      <li>
        <a href="#">Quests</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
      <li>
        <a href="#">Donate</a>
      </li>
    </ul>
  </nav>
</header>