Components

Components combine basic HTML elements into small reusable pieces that act as the building blocks of our modules and layouts.

Media


We can make our images responsive by wrapping them in <figure> elements. Add a video class for responsive videos, or map for maps.

Media

Explanatory caption to compliment image.

First Last

Video

Map

Tables


Sometimes we need to show tabular data. Here are some different ways to show it and make it responsive.

Invisible

The default table style.

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Bordered

Add class="table--bordered" to <table> element.

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Striped

Add class="table--striped" to <table> element.

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Lined

Add class="table--lined" to <table> element.

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Code


Prism.js adds syntax highlighting and line numbers. Visit Prism.js to configure the languages and plugins you require. We can adjust the code colors in /source/scss/theme/_code.scss.

/* Code comment */
.nav {
  list-style:none;
  margin-left:0;

  > li,
  > li > a {
    display:inline-block;
     *display:inline-block;
    zoom:1;
  }
}

Markup example:

<pre class="language-css line-numbers"><code>/* Code comment */
    .nav {
      list-style:none;
      margin-left:0
      > li,
      > li > a {
        display:inline-block;
         *display:inline-block;
        zoom:1;
      }
    }</code></pre>

Navigation


Horizontal navigation

Markup example:

<nav class="horizontal-nav">
   <ul>
     <li><a href="page.html">Page name</a></li>        
     <li><a href="page.html">Page name</a></li>
     <li><a href="page.html">Page name</a></li>
   </ul>
</nav>

Vertical navigation

Markup example:

<nav class="vertical-nav">
   <ul>
     <li><a href="page.html">Page name</a></li>
     <li><a href="page.html">Page name</a></li>
     <li><a href="page.html">Page name</a></li>
   </ul>
</nav>

Callouts


These patterns are great for making wells and callouts inside of sidebars and primary content areas. Add images, videos, and forms to make them even more powerful.

Markup example:

<!-- Basic callout structure -->
<aside class="callout">
  <figure>
    <!-- Image or other content that should go edge-to-edge -->
  </figure>
  <div class="content">
    <!-- Inner content with background and padding -->
  </div>
</aside>

Drawers


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

Open drawer

Hidden drawer

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

Markup exxample:

<!-- 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>