Pattern Library

Navigation

Form elements range from buttons to inputs, checkboxes, selects and popovers. These are most commonly found in forms, but are also present in many other aspects of an interface.

Tabs

Tabs can be used in a lot of situations to separate discrete actions or information that fall under a single context (for example enrollments and deployments within a class).

<ul class="tab">
  <li class="tab__item">
    <a href="#" class="tab__link tab__link--active">Tab Item</a>
  </li>
  <li class="tab__item">
    <a href="#" class="tab__link">Another Tab</a>
  </li>
  <li class="tab__item">
    <a href="#" class="tab__link">Third</a>
  </li>
  <li class="tab__item">
    <a href="#" class="tab__link">Last item</a>
  </li>
</ul>

Topnav

The top navigation contains the logo and links to the main pages of the site, as well as any primary CTAs.

<header class="header">
  <div class="header__title">
    <a class="header__titleLink" href="/">
      <div class="header__logoContainer">
        <svg class="header__logo" xmlns="http://www.w3.org/2000/svg" width="25" height="34" viewBox="0 0 25 34">
          <g class="header__logoColour"><path fill="#FF0098" d="M0 8.84v15.887L25 0"></path><path fill="#0098FF" d="M0 25.16L25 34 0 9.273"></path></g>
          <path class="header__logoSolid" fill="#FFF" d="M8.168 16.648L25 0 .202 8.77l.15.147 7.816 7.73zM0 25.16L25 34 0 9.273"></path>
        </svg>
      </div>
      <div class="header__titleText">Site Title</div>
    </a>
  </div>

  <nav class="header__nav">
    <button class="header__toggleButton"><div class="header__toggleIcon"></div>Menu</button>
    <ul class="header__navList">
      <li class="header__navItem"><a href="#" class="header__navLink">About</a></li>
      <li class="header__navItem"><a href="#" class="header__navLink">Products</a></li>
      <li class="header__navItem"><a href="#" class="header__navLink">Log In</a></li>
    </ul>
  </nav>
</header>

The footer can contain useful secondary links that aren’t prioritized in the top navigation as well as copyright or policy information.

<footer class="footer">
  <div class="footer__wrapper">
    <ul class="footer__list">
      <li class="footer__listItem"><a class="footer__link" href="#">Contact</a></li>
      <li class="footer__listItem"><a class="footer__link" href="#">Workspace</a></li>
      <li class="footer__listItem"><a class="footer__link" href="#">smartsparrow.com</a></li>
    </ul>
    <ul class="footer__legal">
      <li class="footer__text">© Smart Sparrow Pty Ltd, 2018</li>
    </ul>
  </div>
</footer>