Components

• Introduction
• Link
• List
• Description-list
• Table
• Button
• Button-group
• Message
• Input
• Select
• Textarea
• Checkbox
• Radio-group
• Segmented-control
• Content-container
• Form-container
• Media
• Summary
• Skip-link
• Header
• Footer
• Icons

Header

Used to create a site header including responsive navigation.

Overall usage

Used as the first main component of the website.

Accessibility

N/A

---

.header

<div class="header">
  <div class="header__container">
    <div class="header__title">
      Sitename
    </div>
    <nav class="header__nav">
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="current" href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </nav>
  </div>
</div>