Components

Navigation bar

This is used in every page with a few modifications. It is responsive, always fixed and in its most basic form has your main color as background.

<div class="navbar navbar--nofixed">
  <nav class="nav__mobile"></nav>
  <div class="container">
    <div class="navbar__inner">
      <a href='/' class="navbar__logo">Logo</a>
      <nav class="navbar__menu">
        <ul>
          <li><a href="#">Option</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </nav>
      <div class="navbar__menu-mob"><a href="" id='toggle'><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" class=""></path></svg></a></div>
     </div>
    </div>
  </div>
</div>

In specific cases such as your landing or pages with headers (like this one), there is no point to have a colored background initially. That's why there is a transparent version, which when scrolled over a specified element becomes normal again. To use that add the class "navbar--extended" and the id "navConverter" to the element you prefer.

<div class="navbar navbar--extended">...</div>
<div id='navConverter'>When the bar scrolls here it will change</div>

The navbar is responsive by design but if you have only a few options and want to disable this, just remove the element with the "nav__mobile" class and the "navbar__menu-mob" div.

Hero unit

The top part of your landing, also uses your primary color and a few other layers to create an eye-catching effect. Here is the main code to create it:

<div class="hero">
  <div class="hero__overlay"></div>
  <div class="hero__mask"></div>
  <div class="hero__inner">
    <div class="container">
      <div class="hero__content">
        <div class="hero__content__inner" id='navConverter'>
          <h1 class="hero__title">Title</h1>
          <p class="hero__text">A small paragraph.</p>
          <a href="" class="button button__accent">Accent button</a>
          <a href="" class="button hero__button">Hero button</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="hero__sub">
  <span id="scrollToNext" class="scroll">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" class='hero__sub__down' fill="currentColor" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3z"/></svg>
  </span>
</div>

There are a few thing going on here so let's break it down:

hero: The main class that creates the hero unit. If you don't want the white line with the scroll option, add the "hero--full" class and it will cover it. The hero also has an image background which you can remove on your CSS.

hero__overlay: The color that will cover the hero. This is usually your primary color. To make it easy we use a single color but if you want to have a gradient background with your primary and secondary color add the class "hero__overlay--gradient" or "hero__overlay--gradientVertical" for a top to bottom one.

hero__mask: An SVG gradient mask to improve readability and create an effect. If you want to remove it, just delete the div.

hero__sub: The white strip on the bottom of your landing that allows users to scroll to the first element with the title "landing__section". To remove it just delete it or make the hero fullscreen as mentioned before.

Page

To create a simple two column layout with a fixed sidebar and an expandable main column, you can use the page component. On mobile and desktops the columns will be stacked vertically. Here is the necessary code:

<div class="page">
  <div class="container">
    <div class="page__inner">
      <div class="page__menu">Side column</div>
      <div class="page__main">Main column</div>
    </div>
  </div>
</div>

Vertical menu

To add a vertical menu with hover effects, like the one in this page, you just need to create a list and add the "vMenu" class to it. Add the "vMenu--active" to the page that is currently loaded, if you want.

<ul class="vMenu">
  <li><a href="#" class="vMenu--active">Link</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

App

This behaves almost identical to the page component but should be used with the plain navigation bar instead of the header. This is specified as a way to separate concerns between pages that serve different purposes (app/docs). Here is the necessary code:

<div class="app">
  <div class="container">
    <div class="app__inner">
      <div class="app__menu">Side column</div>
      <div class="app__main">Main column</div>
    </div>
  </div>
</div>

Other components

There are a few more components that are used throughout the pages but are pretty self-explanatory.

• Footer: The black bar at the bottom.
• Auth: The fullscreen authentication component.
• Steps: The 3 column section below the hero.
• Extended sections: The large columns in the landing page.
• Call To Action: The section with the colored background in the landing page.
• Header: The top of the plain pages. You can see it in this page. Remember to enter the id "navConverter" somewhere on the header to convert the navigation bar to normal.