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.

Responsive image

Explanatory caption to compliment image. Photographer: First Last

Responsive embedded video

Responsive map

To top

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

To top

Code

Prism.js adds syntax highlighting and line numbers. Visit Prism.js to configure the languages and plugins you require. You 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>

To top

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>

To top