Layout modules

The building blocks of our templates. Here you'll find our major layout modules like site header, site footer, and major layout sections.

Tabs

Tabs implementation is pretty flexible. You can even link directly to a tab by linking to its id.

E.g. <a href="/guide/components#tab2">

If you follow the general pattern, you can place anything in the tab elements.

Markup example

    <!-- Tab navigation -->
    <ul class="tabs">
      <li><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
    </ul>

    <!-- Tabbed content -->
    <div id="tab1">
      <!-- Tab 1 stuff -->
    </div>
    <div id="tab2">
      <!-- Tab 2 stuff -->
    </div>
    <div id="tab3">
      <!-- Tab 3 stuff -->
    </div>

Tab 1

Here is some content under tab 1.

Tab 2

This tab has an image in it.

Tab 3

This tab has a video in it.

Tab

Here is some long content under tab 4.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Donec sed odio dui.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.

Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

To top

Drawers

Use drawers to easily show and hide content. These work great both page-wide and within elements like callouts as shown below.

Open drawer

Markup example

    <!-- Point the href to the id of the drawer -->
    <a href="#drawer" class="button js-reveal">Open drawer</a>

    <!-- Drawer content. Anything here is hidden -->
    <div class="drawer" id="drawer">
      <!-- Contents of drawer -->
    </div>

To top

Hidden drawer

A page wide drawer for hidden content. You can put anything you want to hide in here.

Off canvas content

We use a lightweight offcanvas implementation with a few flexible options. These are great for mobile navigation, hidden drawers, and even alerts.

You can easily set the width and height of the offcanvas areas by adjusting the $offcanvas-height & $offcanvas-width variables in /source/scss/modules/navigation/offcanvas.scss.

Add class="offcanvas--push" to the <body> element to push the page to the side when the left or right menu opens.

Markup example

    <!-- Add offcanvas--push to the body element to push page content -->
    <body class="offcanvas--push">
      <!-- Left example. Other options are offcanvas--top, offcanvas--right, offcanvas--bottom -->
      <nav class="offcanvas--left" id="offcanvas">
      <!-- Offcanvas content. Put anything you want in here -->
      </nav>

      <!-- Other site content below -->
      <main role="main">
        <!-- Point the href to the id of the offcanvas area -->
        <div class="js-open-canvas"><a href="#offcanvas">Offcanvas toggle</a></div>
      </main>
    </body>

To top