Overview

Welcome to Orchestra UI! This framework is a collection of reusable user interface (UI) components built with HTML and CSS. It is the result of a weekend hackathon by a group of students enrolled in the Bov Academy. This framework was created as a learning experience. It is a proof-of-concept, and a work-in-progress. We do not recommend using it in a real-life web application at this time.

Color Palette

This is a reference guide for all of the colors used in this UI framework.

Grayscale

Several shades of gray, from white to black, are available for use.

#ffffff

#f3f5f8

#c3ced9

#acb6bf

#76818c

#58616b

#34383c

#1e2226

#000000

Colors

Several colors with varying shades are available for use.

Blue

#51d0ef

#a5cfdb

#dce8fa

#f2f5fa

Pink

#eb74aa

#d45f94

#ffe7f2

Orange

#ff9948

Base

The bedrock of this UI framework includes a few basic but integral styling decisions.

Box-Sizing

We reset the CSS box-sizing property to border-box for all elements. This makes it easier to calculate sizing and spacing for the rest of the elements in the framework.

Show Markup

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

Text

To prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS, we include some minimal reset styles to keep the experience more consistent.

Show Markup

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

Images

Inline images (<img>) are set to be “responsive” by default, using this very simple technique. Setting max-width to 100% and height to auto allows inline images maintain their aspect ratio and only ever be as wide as their parent elements.

Show Markup

img {
  max-width: 100%;
  height: auto;
}

Form Elements

Form elements are really difficult to tame, which is why it’s important for any UI framework to set some ground rules to normalize the user experience of them across browsers. This framework includes some opinionated base styling decisions that make it easier to build form-related UI components with a consistent cross-browser experience.

Show Markup

input[type='search'] {
  -webkit-appearance: none;
  appearance: none;
}

Typography

This UI framework makes some basic, opinionated decisions about text-related elements that ensure text is easy-to-read and visually appealing. These styles also make it easier to build UI components that are reusable, easy to maintain, and look visually consistent with the rest of the elements in the UI framework.

Body Text

Better default font-family, font-size, and line-height styles are set for the entire framework, to be used as the basis for the rest of the UI elements. These styles can be overwritten on a per-project basis (e.g. if you would like to use a custom web font instead of our defaults).

Show Markup

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

Vertical Rhythm

Consistent spacing between elements in a UI framework is essential to provide a pleasing user experience. This UI framework is built upon a 4 pixel baseline spacing value. This simply means that wherever possible, the styles for all UI components in this framework should use values that are a multiple of the baseline spacing value. Following this basic rule helps to create visual harmony and consistency within the framework.

Show Markup

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 24px;
}

Headings

Headings help create visual and logical separation between large blocks of text. They can also represent the name of a webpage, and sections within that webpage. By default, headings are given some extra top margin to create better separation between the elements that come before and its related elements beneath.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Show Markup

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

The paragraph (<p>) element is one of the most basic building blocks of an HTML page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae amet sit quos assumenda tempora accusamus illo sed qui aut? Beatae ipsam maiores blanditiis a vitae eum ut repellendus sed ullam.

Show Markup

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae amet sit quos assumenda tempora accusamus illo sed qui aut? Beatae ipsam maiores blanditiis a vitae eum ut repellendus sed ullam.</p>

Lists

This UI framework add some sensible default styles to common HTML list elements like <dl>, <ol>, and <ul>.

Definition Lists

Definition List Title 1: This is a definition list division.
Definition List Title 2: This is a definition list division.
Definition List Title 3: This is a definition list division.

Show Markup

<dl>
  <dt>Definition List Title 1</dt>
  <dd>This is a definition list division.</dd>
  <dt>Definition List Title 2</dt>
  <dd>This is a definition list division.</dd>
  <dt>Definition List Title 3</dt>
  <dd>This is a definition list division.</dd>
</dl>

Ordered Lists

List Item 1
List Item 2
1. Child List Item 1
2. Child List Item 2
  1. Grandchild List Item 1
  2. Grandchild List Item 2
  3. Grandchild List Item 3
3. Child List Item 3
List Item 3

Show Markup

<ol>
  <li>List Item 1</li>
  <li>
    List Item 2
    <ol>
      <li>Child List Item 1</li>
      <li>
        Child List Item 2
        <ol>
          <li>Grandchild List Item 1</li>
          <li>Grandchild List Item 2</li>
          <li>Grandchild List Item 3</li>
        </ol>
      </li>
      <li>Child List Item 3</li>
    </ol>
  </li>
  <li>List Item 3</li>
</ol>

Unordered Lists

List Item 1
List Item 2
- Child List Item 1
- Child List Item 2
  - Grandchild List Item 1
  - Grandchild List Item 2
  - Grandchild List Item 3
- Child List Item 3
List Item 3

Show Markup

<ul>
  <li>List Item 1</li>
  <li>
    List Item 2
    <ul>
      <li>Child List Item 1</li>
      <li>
        Child List Item 2
        <ul>
          <li>Grandchild List Item 1</li>
          <li>Grandchild List Item 2</li>
          <li>Grandchild List Item 3</li>
        </ul>
      </li>
      <li>Child List Item 3</li>
    </ul>
  </li>
  <li>List Item 3</li>
</ul>

Inline Elements

There are many inline HTML elements available to use, and this UI framework sets some opinionated default styles for better consistency and flexibility.

This is a text link
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
~~This text is deleted~~ and This text is inserted
~~This text has a strikethrough~~
Superscript^®
Subscript for things like H₂O
This small text is small for for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
The variable element, such as x = y

Show Markup

<a href="#!">This is a text link</a>
<br>
<strong>Strong is used to indicate strong importance</strong>
<br>
<em>This text has added emphasis</em>
<br>
The <b>b element</b> is stylistically different text from normal text, without any special importance
<br>
The <i>i element</i> is text that is set off from the normal text
<br>
The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation
<br>
<del>This text is deleted</del> and <ins>This text is inserted</ins>
<br>
<s>This text has a strikethrough</s>
<br>
Superscript<sup>®</sup>
<br>
Subscript for things like H<sub>2</sub>O
<br>
<small>This small text is small for for fine print, etc.</small>
<br>
Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>
<br>
<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q> <cite>This is a citation</cite>
<br>
The <dfn>dfn element</dfn> indicates a definition.
<br>
The <mark>mark element</mark> indicates a highlight
<br>
The <var>variable element</var>, such as <var>x</var> = <var>y</var>

Horizontal Rules

Horizontal rules (<hr>) are used on webpages to break up elements into visual and logical sections. This UI framework includes some basic default styles for this HTML element.

Show Markup

<hr>

Preformatted Text

Preformatted text is often used on webpages to display software code in a visually-friendly format. This UI framework includes some basic styles for these elements.

Keyboard input: Cmd

This is what inline code looks like.

This is sample output from a computer program

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Show Markup

Keyboard input: <kbd>Cmd</kbd>
<br><br>
<code>This is what inline code looks like.</code>
<br><br>
<samp>This is sample output from a computer program</samp>
<br><br>
<pre>P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~</pre>

Form

The Form UI component introduces some more advanced styles for common HTML form elements.

Default

Form labels, inputs, fieldsets, and legends are given some default styles so they look consistent and can be given layout. The Form UI component uses the Button UI component for the submit button.

Full Name

Email

Password

Birthday

Month

Day

Year

Show Markup

<form class="form" action="#!">
  <div class="form-field">
    <label class="form-label form-label-hidden" for="formInput1">Full Name</label>
    <svg class="form-icon icon-user" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
    <input class="form-input" id="formInput1" type="text" placeholder="Full Name">
  </div>
  <div class="form-field">
    <label class="form-label form-label-hidden" for="formInput2">Email</label>
    <svg class="form-icon icon-envelope" aria-hidden="true"><use xlink:href="#icon-envelope"></use></svg>
    <input class="form-input" id="formInput2" type="email" placeholder="Email">
  </div>
  <div class="form-field">
    <label class="form-label form-label-hidden" for="formInput3">Password</label>
    <svg class="form-icon icon-lock" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
    <input class="form-input" id="formInput3" type="password" placeholder="Password">
  </div>
  <fieldset class="form-fieldset">
      <legend class="form-legend">Birthday</legend>
      <div class="form-group">
        <div class="form-field">
          <label class="form-label form-label-hidden" for="formInput4">Month</label>
          <select class="form-input form-select" id="formInput4">
            <option value="MM" selected disabled>MM</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
        </div>
        <div class="form-field">
          <label class="form-label form-label-hidden" for="formInput5">Day</label>
          <select class="form-input form-select" id="formInput5">
            <option value="DD" selected disabled>DD</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="3">13</option>
            <option value="4">14</option>
            <option value="5">15</option>
            <option value="6">16</option>
            <option value="7">17</option>
            <option value="8">18</option>
            <option value="9">19</option>
            <option value="10">20</option>
            <option value="11">21</option>
            <option value="12">22</option>
            <option value="3">23</option>
            <option value="4">24</option>
            <option value="5">25</option>
            <option value="6">26</option>
            <option value="7">27</option>
            <option value="8">28</option>
            <option value="9">29</option>
            <option value="10">30</option>
            <option value="11">31</option>
          </select>
        </div>
        <div class="form-field">
          <label class="form-label form-label-hidden" for="formInput6">Year</label>
          <select class="form-input form-select" id="formInput6">
            <option value="YY" selected disabled>YY</option>
            <option value="1">1981</option>
            <option value="2">1982</option>
            <option value="3">1983</option>
            <option value="4">1984</option>
            <option value="5">1985</option>
            <option value="6">1986</option>
            <option value="7">1987</option>
            <option value="8">1988</option>
            <option value="9">1989</option>
            <option value="10">1990</option>
            <option value="1">1991</option>
            <option value="2">1992</option>
            <option value="3">1993</option>
            <option value="4">1994</option>
            <option value="5">1995</option>
            <option value="6">1996</option>
            <option value="7">1997</option>
            <option value="8">1998</option>
            <option value="9">1999</option>
            <option value="10">2000</option>
            <option value="10">2001</option>
          </select>
        </div>
      </div>
  </fieldset>
  <div class="form-field">
    <button class="button button-blue button-block" type="submit">Sign Up</button>
  </div>
</form>

Table

The Table UI component adds sensible default styles to HTML <table> elements, which are used to display data in a tabular format.

Default

The default styles for a Table are fairly sparse, adding some consistent padding and colors to the entire table.

.table
#	Thing 1	Thing 2	Thing 3
1	1246	Hello	true
2	4652	Goodbye	false
3	1657	Cheers	false
4	1498	Beers	true
5	3286	Awesome	true

Show Markup

<table class="table">
  <caption>.table</caption>
  <tbody>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Thing 1</th>
      <th scope="col">Thing 2</th>
      <th scope="col">Thing 3</th>
    </tr>
    <tr>
      <td>1</td>
      <td>1246</td>
      <td>Hello</td>
      <td>true</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4652</td>
      <td>Goodbye</td>
      <td>false</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1657</td>
      <td>Cheers</td>
      <td>false</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1498</td>
      <td>Beers</td>
      <td>true</td>
    </tr>
    <tr>
      <td>5</td>
      <td>3286</td>
      <td>Awesome</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

Responsive Tables

You can wrap a .table element in a <div> with the class .table-responsive, and it will add scrollbars to the table in case the table is larger than its parent element. Resize the browser to see this behavior in action.

.table
#	Thing 1	Thing 2	Thing 3
1	1246	Hello	true
2	4652	Goodbye	false
3	1657	Cheers	false
4	1498	Beers	true
5	3286	Awesome	true

Show Markup

<div class="table-responsive">
  <table class="table">
    <caption>.table</caption>
    <tbody>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Thing 1</th>
        <th scope="col">Thing 2</th>
        <th scope="col">Thing 3</th>
      </tr>
      <tr>
        <td>1</td>
        <td>1246</td>
        <td>Hello</td>
        <td>true</td>
      </tr>
      <tr>
        <td>2</td>
        <td>4652</td>
        <td>Goodbye</td>
        <td>false</td>
      </tr>
      <tr>
        <td>3</td>
        <td>1657</td>
        <td>Cheers</td>
        <td>false</td>
      </tr>
      <tr>
        <td>4</td>
        <td>1498</td>
        <td>Beers</td>
        <td>true</td>
      </tr>
      <tr>
        <td>5</td>
        <td>3286</td>
        <td>Awesome</td>
        <td>true</td>
      </tr>
    </tbody>
  </table>
</div>

Outer Border

A Table UI element with a border around the outside of the entire table.

.table-border
#	Thing 1	Thing 2	Thing 3
1	1246	Hello	true
2	4652	Goodbye	false
3	1657	Cheers	false
4	1498	Beers	true
5	3286	Awesome	true

Show Markup

<table class="table table-border">
  <caption>.table-border</caption>
  <tbody>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Thing 1</th>
      <th scope="col">Thing 2</th>
      <th scope="col">Thing 3</th>
    </tr>
    <tr>
      <td>1</td>
      <td>1246</td>
      <td>Hello</td>
      <td>true</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4652</td>
      <td>Goodbye</td>
      <td>false</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1657</td>
      <td>Cheers</td>
      <td>false</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1498</td>
      <td>Beers</td>
      <td>true</td>
    </tr>
    <tr>
      <td>5</td>
      <td>3286</td>
      <td>Awesome</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

Row Border

A Table UI element with a border between each row in the table.

.table-border-rows
#	Thing 1	Thing 2	Thing 3
1	1246	Hello	true
2	4652	Goodbye	false
3	1657	Cheers	false
4	1498	Beers	true
5	3286	Awesome	true

Show Markup

<table class="table table-border-rows">
  <caption>.table-border-rows</caption>
  <tbody>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Thing 1</th>
      <th scope="col">Thing 2</th>
      <th scope="col">Thing 3</th>
    </tr>
    <tr>
      <td>1</td>
      <td>1246</td>
      <td>Hello</td>
      <td>true</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4652</td>
      <td>Goodbye</td>
      <td>false</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1657</td>
      <td>Cheers</td>
      <td>false</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1498</td>
      <td>Beers</td>
      <td>true</td>
    </tr>
    <tr>
      <td>5</td>
      <td>3286</td>
      <td>Awesome</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

Cell Border

A Table UI element with a border between each cell in the table.

.table-border-cells
#	Thing 1	Thing 2	Thing 3
1	1246	Hello	true
2	4652	Goodbye	false
3	1657	Cheers	false
4	1498	Beers	true
5	3286	Awesome	true

Show Markup

<table class="table table-border-cells">
  <caption>.table-border-cells</caption>
  <tbody>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Thing 1</th>
      <th scope="col">Thing 2</th>
      <th scope="col">Thing 3</th>
    </tr>
    <tr>
      <td>1</td>
      <td>1246</td>
      <td>Hello</td>
      <td>true</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4652</td>
      <td>Goodbye</td>
      <td>false</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1657</td>
      <td>Cheers</td>
      <td>false</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1498</td>
      <td>Beers</td>
      <td>true</td>
    </tr>
    <tr>
      <td>5</td>
      <td>3286</td>
      <td>Awesome</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

Striped

A Table UI element with alternating background colors for each row in the table.

.table-striped
#	Thing 1	Thing 2	Thing 3
#	Thing 1	Thing 2	Thing 3
1	1246	Hello	true
2	4652	Goodbye	false
3	1657	Cheers	false
4	1498	Beers	true
5	3286	Awesome	true

Show Markup

<table class="table table-striped">
  <caption>.table-striped</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Thing 1</th>
      <th scope="col">Thing 2</th>
      <th scope="col">Thing 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td scope="col">#</td>
      <td scope="col">Thing 1</td>
      <td scope="col">Thing 2</td>
      <td scope="col">Thing 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>1246</td>
      <td>Hello</td>
      <td>true</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4652</td>
      <td>Goodbye</td>
      <td>false</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1657</td>
      <td>Cheers</td>
      <td>false</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1498</td>
      <td>Beers</td>
      <td>true</td>
    </tr>
    <tr>
      <td>5</td>
      <td>3286</td>
      <td>Awesome</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

Icon

The Icon UI component displays an icon from an SVG sprite that is included at the top of the webpage.

Default

The default size for an Icon is 1em. This means the icon will inherit its width and height based on the font-size of its parent. The default color, or fill, is set to currentColor. This means the icon will inherit its color based on the color or fill of its parent.

Show Markup

<svg class="icon-book"><use xlink:href="#icon-book"></use></svg>

Sizes

You can change the default size of an icon by attaching modifier classes. This is useful for icons that stand alone. It is not recommended to use sizing and alignment classes together. Instead, modify the font-size of the parent element, and the icon will scale accordingly with the text beside it.

Show Markup

<svg class="icon-book icon-small"><use xlink:href="#icon-book"></use></svg>
<svg class="icon-book icon-medium"><use xlink:href="#icon-book"></use></svg>
<svg class="icon-book icon-large"><use xlink:href="#icon-book"></use></svg>

Alignment

If you want to align an icon next to text or some other inline element, you can attach modifier classes that will provide some extra styling to make sure they align properly. It is not recommended to use sizing and alignment classes together. Instead, modify the font-size of the parent element, and the icon will scale accordingly with the text beside it.

Left-aligned

Right-aligned

Inside a heading!

Show Markup

<p>
  <svg class="icon-book icon-left"><use xlink:href="#icon-book"></use></svg>
  Left-aligned
</p>
<p>
  Right-aligned
  <svg class="icon-book icon-right"><use xlink:href="#icon-book"></use></svg>
</p>
<button class="button button-blue">
  <svg class="icon-book icon-left"><use xlink:href="#icon-book"></use></svg>
  Inside a Button
</button>
<h2>
  <svg class="icon-book icon-left"><use xlink:href="#icon-book"></use></svg>
  Inside a heading!
</h2>

Container

The Container UI component sets a maximum width for its child content, and can be used to help create layout on a webpage. This website itself uses Containers to set a maximum width for the header, body, and footer contents.

Default

The default maximum width for a Container is 1280px.

I am contained!

Show Markup

<div class="container">I am contained!</div>

Grid

The Grid UI component provides row-column functionality that can be used to create more complex layouts on a webpage.

Default

The Grid UI component consists of twelve columns with fluid widths and gutters.

12

1

11

2

10

3

9

4

8

5

7

6

1

8

4

9

3

10

2

11

1

12

Show Markup

<div class="grid">
  <div class="grid-row">
    <div class="grid-col-12"><div class="sw-demo-grid-col">12</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-1"><div class="sw-demo-grid-col">1</div></div>
    <div class="grid-col-11"><div class="sw-demo-grid-col">11</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-2"><div class="sw-demo-grid-col">2</div></div>
    <div class="grid-col-10"><div class="sw-demo-grid-col">10</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-3"><div class="sw-demo-grid-col">3</div></div>
    <div class="grid-col-9"><div class="sw-demo-grid-col">9</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-4"><div class="sw-demo-grid-col">4</div></div>
    <div class="grid-col-8"><div class="sw-demo-grid-col">8</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-5"><div class="sw-demo-grid-col">5</div></div>
    <div class="grid-col-7"><div class="sw-demo-grid-col">7</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-6"><div class="sw-demo-grid-col">6</div></div>
    <div class="grid-col-6"><div class="sw-demo-grid-col">6</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-7"><div class="sw-demo-grid-col">1</div></div>
    <div class="grid-col-5"><div class="sw-demo-grid-col">1</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-8"><div class="sw-demo-grid-col">8</div></div>
    <div class="grid-col-4"><div class="sw-demo-grid-col">4</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-9"><div class="sw-demo-grid-col">9</div></div>
    <div class="grid-col-3"><div class="sw-demo-grid-col">3</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-10"><div class="sw-demo-grid-col">10</div></div>
    <div class="grid-col-2"><div class="sw-demo-grid-col">2</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-11"><div class="sw-demo-grid-col">11</div></div>
    <div class="grid-col-1"><div class="sw-demo-grid-col">1</div></div>
  </div>
  <div class="grid-row">
    <div class="grid-col-12"><div class="sw-demo-grid-col">12</div></div>
  </div>
</div>

Nested

The Grid UI component supports nesting columns inside one another.

6

Show Markup

<div class="grid">
  <div class="grid-row">
    <div class="grid-col-4">
      <div class="grid-row">
        <div class="grid-col-6">6</div>
        <div class="grid-col-6">6</div>
      </div>
    </div>
    <div class="grid-col-4">
      <div class="grid-row">
        <div class="grid-col-6">6</div>
        <div class="grid-col-6">6</div>
      </div>
    </div>
    <div class="grid-col-4">
      <div class="grid-row">
        <div class="grid-col-6">6</div>
        <div class="grid-col-6">6</div>
      </div>
    </div>
  </div>
</div>

Push & Pull

The Grid UI component supports pushing and pulling columns right and left within a row.

2.grid-push-1

4.grid-push-3

4.grid-push-8

4

4.grid-pull-8

Show Markup

<div class="grid">
  <div class="grid-row">
    <div class="grid-col-2 grid-push-1">2.grid-push-1</div>
    <div class="grid-col-4 grid-push-3">4.grid-push-3</div>
  </div>
</div>
<div class="grid">
  <div class="grid-row">
    <div class="grid-col-4 grid-push-8">4.grid-push-8</div>
    <div class="grid-col-4">4</div>
    <div class="grid-col-4 grid-pull-8">4.grid-pull-8</div>
  </div>
</div>

No Gutters

The Grid UI component supports removing gutters between columns so they sit flush with one another.

12

1

11

2

10

3

9

4

8

5

7

6

1

8

4

9

3

10

2

11

1

12

Show Markup

<div class="grid">
  <div class="grid-row grid-gapless">
    <div class="grid-col-12">12</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-1">1</div>
    <div class="grid-col-11">11</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-2">2</div>
    <div class="grid-col-10">10</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-3">3</div>
    <div class="grid-col-9">9</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-4">4</div>
    <div class="grid-col-8">8</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-5">5</div>
    <div class="grid-col-7">7</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-6">6</div>
    <div class="grid-col-6">6</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-7">1</div>
    <div class="grid-col-5">1</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-8">8</div>
    <div class="grid-col-4">4</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-9">9</div>
    <div class="grid-col-3">3</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-10">10</div>
    <div class="grid-col-2">2</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-11">11</div>
    <div class="grid-col-1">1</div>
  </div>
  <div class="grid-row grid-gapless">
    <div class="grid-col-12">12</div>
  </div>
</div>

List

The List UI component provides a few simple variations from the default list styles introduced by Typography.

Unstyled

This modifier strips a list of all its default styles. This is useful if you plan on styling a list to look very different from the default, and want to start from scratch.

List Item 1
List Item 2
- Child List Item 1
- Child List Item 2
  - Grandchild List Item 1
  - Grandchild List Item 2
  - Grandchild List Item 3
- Child List Item 3
List Item 3

Show Markup

<ul class="list-unstyled">
  <li>List Item 1</li>
  <li>
    List Item 2
    <ul>
      <li>Child List Item 1</li>
      <li>
        Child List Item 2
        <ul>
          <li>Grandchild List Item 1</li>
          <li>Grandchild List Item 2</li>
          <li>Grandchild List Item 3</li>
        </ul>
      </li>
      <li>Child List Item 3</li>
    </ul>
  </li>
  <li>List Item 3</li>
</ul>

Inline

This modifier sets each list item to display: inline-block; so that they are arranged side-by-side. This is useful for situations where you need a list to render horizontal instead of vertical.

Definition List Title 1: This is a definition list division.
Definition List Title 2: This is a definition list division.

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

Show Markup

<dl class="list-inline">
  <dt>Definition List Title 1</dt>
  <dd>This is a definition list division.</dd>
  <dt>Definition List Title 2</dt>
  <dd>This is a definition list division.</dd>
</dl>
<ul class="list-inline">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
</ul>

Alert

The Alert UI component is used to notify a user of a change in the state of the interface.

Default

Alerts come in several different colors that should be used based on the type of alert (success, failure, informational, or warning).

Default: I am a default alert. This is an alert link.

Success: I am a success alert. This is an alert link.

Fail: I am a fail alert. This is an alert link.

Info: I am an info alert. This is an alert link.

Warning: I am a warning alert. This is an alert link.

Show Markup

<div class="alert" role="alert">
  <strong>Default:</strong> I am a default alert. <a href="#!">This is an alert link</a>.
</div>
<div class="alert alert-success" role="alert">
  <strong>Success:</strong> I am a success alert. <a href="#!">This is an alert link</a>.
</div>
<div class="alert alert-fail" role="alert">
  <strong>Fail:</strong> I am a fail alert. <a href="#!">This is an alert link</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Info:</strong> I am an info alert. <a href="#!">This is an alert link</a>.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning:</strong> I am a warning alert. <a href="#!">This is an alert link</a>.
</div>

Breadcrumbs

The Breadcrumbs UI component is navigation that displays a trail of webpages leading to the current webpage.

Default

Pages are separated with an icon to indicate that the pages are nested within each other.

Orchestra
Instrumentation
Woodwinds
Flutes

Show Markup

<ul class="breadcrumbs">
  <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="#!">Orchestra</a></li>
  <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="#!">Instrumentation</a></li>
  <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="#!">Woodwinds</a></li>
  <li class="breadcrumbs-item is-current"><a class="breadcrumbs-link" href="#!">Flutes</a></li>
</ul>

Button

The Button UI component is a clickable interface element that can trigger an action or state change within the interface.

Default

Four different colors are available for use. Buttons also have built-in support for inline icons.

Show Markup

<button class="button button-blue">Blue</button>
<button class="button button-blue-lightest">Blue Lightest</button>
<button class="button button-blue">
  <svg class="icon-upload icon-left" aria-hidden="true"><use xlink:href="#icon-upload"></use></svg>
  Upload
</button>
<button class="button button-blue">
  <svg class="icon-pencil icon-left" aria-hidden="true"><use xlink:href="#icon-pencil"></use></svg>
  Edit
</button>
<button class="button button-gray-lighter">Gray Lighter</button>
<button class="button button-gray-lightest">Gray Lightest</button>

Pill-Shaped

A pill-shaped Button design is also available for use.

Show Markup

<button class="button button-pill button-blue">Blue</button>
<button class="button button-pill button-blue-lightest">Blue Lightest</button>
<button class="button button-pill button-blue">
  <svg class="icon-upload icon-left" aria-hidden="true"><use xlink:href="#icon-upload"></use></svg>
  Upload
</button>
<button class="button button-pill button-blue">
  <svg class="icon-pencil icon-left" aria-hidden="true"><use xlink:href="#icon-pencil"></use></svg>
  Edit
</button>
<button class="button button-pill button-gray-lighter">Gray Lighter</button>
<button class="button button-pill button-gray-lightest">Gray Lightest</button>

Pagination

The Pagination UI component is a clickable interface element that let}s the user navigate between pages of related content.

Default

Default styles set the page links side-by-side to create a navigation bar effect.

Show Markup

<nav class="pagination" role="navigation" aria-label="Page navigation">
  <ul class="pagination-list">
    <li class="pagination-item is-disabled">
      <a href="#!" class="pagination-link pagination-prev" aria-label="Previous">
        <span class="pagination-link-icon" aria-hidden="true">←</span>
      </a>
    </li>
    <li class="pagination-item is-current">
      <a href="#!" class="pagination-link">1</a>
    </li>
    <li class="pagination-item">
      <a href="#!" class="pagination-link">2</a>
    </li>
    <li class="pagination-item">
      <a href="#!" class="pagination-link">3</a>
    </li>
    <li class="pagination-item is-disabled">
      <span class="pagination-link" aria-hidden="true">…</span>
    </li>
    <li class="pagination-item">
      <a href="#!" class="pagination-link">4</a>
    </li>
    <li class="pagination-item">
      <a href="#!" class="pagination-link">5</a>
    </li>
    <li class="pagination-item">
      <a href="#!" class="pagination-link pagination-next" aria-label="Next">
        <span class="pagination-link-icon" aria-hidden="true">→</span>
      </a>
    </li>
  </ul>
</nav>

Card

The Card UI component is a way to organize related information in a condensed, reusable format. Cards are typically represented stacked on top of one another, or arranged side-by-side in a grid format.

Default

The default Card styles use enlarged text in the header. This style treatment works nicely for describing the pricing and features for a product.

$15PSD Version

Photoshop CS6+ Optimized
Vector Shapes Used
Well Organized PSD Files
Light & Dark Theme
Free Fonts Used

Show Markup

<div class="card">
  <div class="card-header">
    <div class="card-heading"><span>$15</span>PSD Version</div>
  </div>
  <div class="card-body">
    <ul class="card-list">
      <li><strong>Photoshop CS6+</strong> Optimized</li>
      <li><strong>Vector Shapes</strong> Used</li>
      <li><strong>Well Organized</strong> PSD Files</li>
      <li><strong>Light & Dark</strong> Theme</li>
      <li><strong>Free Fonts</strong> Used</li>
    </ul>
    <a href="#!" class="card-button button button-blue">Read More</a>
  </div>
</div>

With Image

Alternatively, images can be used as the header. This style treatment works nicely for article excerpts.

Feb 12, 2015

Bendin’ The Wind

Goodbye, friends. I never thought I'd die like this. But I always really hoped. We can't compete with Mom! Her company is big and evil!

Show Markup

<div class="card card-image">
  <div class="card-header">
    <img src="./assets/ui/card/card-image.jpg" alt="Foggy Lake">
  </div>
  <div class="card-body">
    <span class="card-date">Feb 12, 2015</span>
    <h3 class="card-title">Bendin’ The Wind</h3>
    <div class="card-desc">Goodbye, friends. I never thought I'd die like this. But I always really hoped. We can't compete with Mom! Her company is big and evil!</div>
    <a href="#!" class="card-button button button-blue">Read More</a>
  </div>
</div>

Accordion

The Accordion UI component is used to toggle the visibility of information on a webpage. Accordions help reduce the initial amount of visible information on the page, allowing users to toggle visibility as they please.

Default

The default Accordion styles stack each block of information vertically, and each Accordion item’s visibility can be toggled by clicking.

Is today’s hectic lifestyle making you tense and impatient?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nisi cupiditate, corporis, magnam est nam iusto officia harum illo porro aperiam, tempore id rem cumque asperiores autem quas molestias animi.

What are you hacking off? Is it my torso!?

There are too many states nowadays. Please, eliminate three. P.S. I am not a crackpot. Stan Lee never left. I’m afraid his mind is no longer in mint condition.

Can we have Bender Burgers again?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nisi cupiditate, corporis, magnam est nam iusto officia harum illo porro aperiam, tempore id rem cumque asperiores autem quas molestias animi.

Show Markup

<div class="accordion">
  <input class="accordion-input" type="radio" name="accordion-1" id="accordion-input-1" checked>
  <label class="accordion-label" for="accordion-input-1">
    <i class="accordion-label-icon" aria-hidden="true"></i> Is today’s hectic lifestyle making you tense and impatient?</label>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nisi cupiditate, corporis, magnam est nam iusto officia harum illo porro aperiam, tempore id rem cumque asperiores autem quas molestias animi.</p>
  </div>
  <input class="accordion-input" type="radio" name="accordion-1" id="accordion-input-2">
  <label class="accordion-label" for="accordion-input-2">
    <i class="accordion-label-icon" aria-hidden="true"></i> What are you hacking off? Is it my torso!?</label>
  <div class="accordion-body">
    <p>There are too many states nowadays. Please, eliminate three. P.S. I am not a crackpot. Stan Lee never left. I’m afraid his mind is no longer in mint condition.</p>
  </div>
  <input class="accordion-input" type="radio" name="accordion-1" id="accordion-input-3">
  <label class="accordion-label" for="accordion-input-3">
    <i class="accordion-label-icon" aria-hidden="true"></i> Can we have Bender Burgers again?</label>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nisi cupiditate, corporis, magnam est nam iusto officia harum illo porro aperiam, tempore id rem cumque asperiores autem quas molestias animi.</p>
  </div>
</div>

Modal

The Modal UI component is a popup window whose visibility is triggered by its respective label, which is styled as a Button UI component. It can then be closed by clicking

Default

Click the Button UI component below and a Modal UI component will be displayed on top of the entire page.

Show Markup

<input type="checkbox" id="modal1" class="modal-input">
<label class="button button-blue" for="modal1">Open Modal</label>
<label class="modal-overlay" for="modal1"></label>
<div class="modal">
  <div class="modal-body">
    <h3 class="modal-heading">
      <svg class="modal-heading-icon icon-exclamation-circle icon-left" aria-hidden="true"><use xlink:href="#icon-exclamation-circle"></use></svg>
      Update form Feb 12, 2015
    </h3>
    <div class="modal-content">Bender, we’re trying our best. You’ll have all the Slurm you can drink when you’re partying with Slurms McKenzie!</div>
  </div>
  <div class="modal-footer">
    <label class="modal-button modal-button-blue" for="modal1">Apply</label>
    <label class="modal-button" for="modal1">Cancel</label>
  </div>
</div>

Tabpanel

The Tabpanel UI component is another way to reduce the initial amount of visible information on the page, allowing users to toggle visibility as they please. When a user clicks on a tab, it displays the corresponding tab content.

Default

The default Tabpanel arranges tabs horizontally, with the tab content located directly beneath.

First Tab Second Tab Third Tab

Hell is Other Robots

Stop bickering or I’m going to come back there and change your opinions manually! Robot 1-X, save my friends! And Zoidberg!

Time Keeps on Slippin’

File not found. Ask her how her day was. This is the worst kind of discrimination: the kind against me! Say it in Russian! Come. Comrade Bender! We must take to the streets! No! The cat shelter's on to me. Well, then good news! It’s a suppository.

Bendin’ in the Wind

Goodbye, friends. I never thought I’d be like this. But I always really hoped. We can’t compete with Mom! Her company is big and evil!

Show Markup

<div class="tabpanel" role="tabpanel">
  <input class="tabpanel-input" type="radio" id="tabpanel-1-input-1" name="tabpanel-1" checked>
  <input class="tabpanel-input" type="radio" id="tabpanel-1-input-2" name="tabpanel-1">
  <input class="tabpanel-input" type="radio" id="tabpanel-1-input-3" name="tabpanel-1">
  <div class="tabpanel-nav">
    <label class="tabpanel-label" for="tabpanel-1-input-1">First Tab</label>
    <label class="tabpanel-label" for="tabpanel-1-input-2">Second Tab</label>
    <label class="tabpanel-label" for="tabpanel-1-input-3">Third Tab</label>
  </div>
  <div class="tabpanel-list">
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Hell is Other Robots</h3>
        <p class="tabpanel-desc">Stop bickering or I’m going to come back there and change your opinions manually! Robot 1-X, save my friends! And Zoidberg!</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Time Keeps on Slippin’</h3>
        <p class="tabpanel-desc">File not found. Ask her how her day was. This is the worst kind of discrimination: the kind against me! Say it in Russian! Come. Comrade Bender! We must take to the streets! No! The cat shelter's on to me. Well, then good news! It’s a suppository.</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Bendin’ in the Wind</h3>
        <p class="tabpanel-desc">Goodbye, friends. I never thought I’d be like this. But I always really hoped. We can’t compete with Mom! Her company is big and evil!</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
  </div>
</div>

Default Alternative

Alternatively, you can change the Tabpanel tab styles to look a bit more like physical tabs. The tab content is still located directly beneath.

First Tab Second Tab Third Tab

Hell is Other Robots

Stop bickering or I’m going to come back there and change your opinions manually! Robot 1-X, save my friends! And Zoidberg!

Time Keeps on Slippin’

File not found. Ask her how her day was. This is the worst kind of discrimination: the kind against me! Say it in Russian! Come. Comrade Bender! We must take to the streets! No! The cat shelter's on to me. Well, then good news! It’s a suppository.

Bendin’ in the Wind

Goodbye, friends. I never thought I’d be like this. But I always really hoped. We can’t compete with Mom! Her company is big and evil!

Show Markup

<div class="tabpanel tabpanel-alt" role="tabpanel">
  <input class="tabpanel-input" type="radio" id="tabpanel-2-input-1" name="tabpanel-2" checked>
  <input class="tabpanel-input" type="radio" id="tabpanel-2-input-2" name="tabpanel-2">
  <input class="tabpanel-input" type="radio" id="tabpanel-2-input-3" name="tabpanel-2">
  <div class="tabpanel-nav">
    <label class="tabpanel-label" for="tabpanel-2-input-1">First Tab</label>
    <label class="tabpanel-label" for="tabpanel-2-input-2">Second Tab</label>
    <label class="tabpanel-label" for="tabpanel-2-input-3">Third Tab</label>
  </div>
  <div class="tabpanel-list">
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Hell is Other Robots</h3>
        <p class="tabpanel-desc">Stop bickering or I’m going to come back there and change your opinions manually! Robot 1-X, save my friends! And Zoidberg!</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Time Keeps on Slippin’</h3>
        <p class="tabpanel-desc">File not found. Ask her how her day was. This is the worst kind of discrimination: the kind against me! Say it in Russian! Come. Comrade Bender! We must take to the streets! No! The cat shelter's on to me. Well, then good news! It’s a suppository.</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Bendin’ in the Wind</h3>
        <p class="tabpanel-desc">Goodbye, friends. I never thought I’d be like this. But I always really hoped. We can’t compete with Mom! Her company is big and evil!</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
  </div>
</div>

Vertical Alternative

You can also arrange the tab navigation vertically and to the left of the tab content.

First Tab Second Tab Third Tab

Hell is Other Robots

Stop bickering or I’m going to come back there and change your opinions manually! Robot 1-X, save my friends! And Zoidberg!

Time Keeps on Slippin’

File not found. Ask her how her day was. This is the worst kind of discrimination: the kind against me! Say it in Russian! Come. Comrade Bender! We must take to the streets! No! The cat shelter's on to me. Well, then good news! It’s a suppository.

Bendin’ in the Wind

Goodbye, friends. I never thought I’d be like this. But I always really hoped. We can’t compete with Mom! Her company is big and evil!

Show Markup

<div class="tabpanel tabpanel-vertical" role="tabpanel">
  <input class="tabpanel-input" type="radio" id="tabpanel-3-input-1" name="tabpanel-3" checked>
  <input class="tabpanel-input" type="radio" id="tabpanel-3-input-2" name="tabpanel-3">
  <input class="tabpanel-input" type="radio" id="tabpanel-3-input-3" name="tabpanel-3">
  <div class="tabpanel-nav">
    <label class="tabpanel-label" for="tabpanel-3-input-1">First Tab</label>
    <label class="tabpanel-label" for="tabpanel-3-input-2">Second Tab</label>
    <label class="tabpanel-label" for="tabpanel-3-input-3">Third Tab</label>
  </div>
  <div class="tabpanel-list">
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Hell is Other Robots</h3>
        <p class="tabpanel-desc">Stop bickering or I’m going to come back there and change your opinions manually! Robot 1-X, save my friends! And Zoidberg!</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Time Keeps on Slippin’</h3>
        <p class="tabpanel-desc">File not found. Ask her how her day was. This is the worst kind of discrimination: the kind against me! Say it in Russian! Come. Comrade Bender! We must take to the streets! No! The cat shelter's on to me. Well, then good news! It’s a suppository.</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
    <div class="tabpanel-item">
      <div class="tabpanel-image">
        <img src="./assets/ui/tabpanel/tabpanel-image-1.jpg" alt="Timex alarm clock">
      </div>
      <div class="tabpanel-content">
        <h3 class="tabpanel-heading">Bendin’ in the Wind</h3>
        <p class="tabpanel-desc">Goodbye, friends. I never thought I’d be like this. But I always really hoped. We can’t compete with Mom! Her company is big and evil!</p>
        <a href="#!" class="tabpanel-button button button-blue">Read More</a>
      </div>
    </div>
  </div>
</div>

Carousel

The Carousel UI component lets a user navigate through a set of images using different types of navigation.

Default

Click on the rectangle shapes beneath the images to navigate to the corresponding image in the carousel.

Show Markup

<div class="carousel">
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel1" id="carousel1Item1" checked>
    <label class="carousel-label carousel-label-1" for="carousel1Item1"></label>
    <img class="carousel-image" src="carousel-image-1.png" alt="sky">
  </div>
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel1" id="carousel1Item2">
    <label class="carousel-label carousel-label-2" for="carousel1Item2"></label>
    <img class="carousel-image" src="carousel-image-2.png" alt="lantern">
  </div>
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel1" id="carousel1Item3">
    <label class="carousel-label carousel-label-3" for="carousel1Item3"></label>
    <img class="carousel-image" src="carousel-image-3.png" alt="beach">
  </div>
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel1" id="carousel1Item4">
    <label class="carousel-label carousel-label-4" for="carousel1Item4"></label>
    <img class="carousel-image" src="carousel-image-4.png" alt="sand">
  </div>
</div>

Arrows

Instead of rectangular pagination, this carousel uses left and right arrow icons to navigate to the next or previous image in the carousel.

Show Markup

<div class="carousel carousel-arrows">
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel2" id="carousel2Item1" checked>
    <span class="carousel-arrow carousel-arrow-left" aria-hidden="true"></span>
    <label class="carousel-label carousel-label-1" for="carousel2Item4"></label>
    <label class="carousel-label carousel-label-right carousel-label-1" for="carousel2Item2"></label>
    <img class="carousel-image" src="carousel-image-1.png" alt="sky">
  </div>
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel2" id="carousel2Item2">
    <label class="carousel-label carousel-label-2" for="carousel2Item1"></label>
    <label class="carousel-label carousel-label-right carousel-label-2" for="carousel2Item3"></label>
    <img class="carousel-image" src="carousel-image-2.png" alt="lantern">
  </div>
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel2" id="carousel2Item3">
    <label class="carousel-label carousel-label-3" for="carousel2Item2"></label>
    <label class="carousel-label carousel-label-right carousel-label-3" for="carousel2Item4"></label>
    <img class="carousel-image" src="carousel-image-3.png" alt="beach">
  </div>
  <div class="carousel-item">
    <input class="carousel-input" type="radio" name="carousel2" id="carousel2Item4">
    <span class="carousel-arrow carousel-arrow-right" aria-hidden="true"></span>
    <label class="carousel-label carousel-label-4" for="carousel2Item3"></label>
    <label class="carousel-label carousel-label-right carousel-label-3" for="carousel2Item1"></label>
    <img class="carousel-image" src="carousel-image-4.png" alt="sand">
  </div>
</div>

Tilt Hover

The Tilt Hover UI component adds a “tilting” visual effect to a card-like UI element as the user hovers over the element.

Default

Hover over the element below with your mouse to see how the Tilt Hover UI component changes in response.

Unaccompanied Cello,
Suite No. 1 in G Major

Bach

Show Markup

<div class="tilt">
  <div class="tilt-container">
    <div class="tilt-grid" id="tilt-grid-1"></div>
    <div class="tilt-grid" id="tilt-grid-2"></div>
    <div class="tilt-grid" id="tilt-grid-3"></div>
    <div class="tilt-grid" id="tilt-grid-4"></div>
    <div class="tilt-grid" id="tilt-grid-5"></div>
    <div class="tilt-grid" id="tilt-grid-6"></div>
    <div class="tilt-grid" id="tilt-grid-7"></div>
    <div class="tilt-grid" id="tilt-grid-8"></div>
    <div class="tilt-grid" id="tilt-grid-9"></div>
    <div class="tilt-background"></div>
    <div class="tilt-frame"></div>
    <div class="tilt-content">
      <h1 class="tilt-heading">Tilt Hover Effect</h1>
      <p>Bov Academy</p>
    </div>
  </div>
</div>

Flipnav

The Flipnav UI component is a navigation bar with links that perform a 3d “flip” animation on mouse hover.

Default

Hover over each link in the Flipnav below with your mouse to see the animation in action.

Show Markup

<nav class="flipnav" role="navigation">
  <ul class="flipnav-list">
    <li class="flipnav-item">
      <a class="flipnav-link" href="#!">
        Home
        <span class="flipnav-cube" aria-hidden="true">
          <span class="flipnav-front">Home</span>
          <span class="flipnav-back">Home</span>
        </span>
      </a>
    </li>
    <li class="flipnav-item">
      <a class="flipnav-link" href="#!">
        About
        <span class="flipnav-cube" aria-hidden="true">
          <span class="flipnav-front">About</span>
          <span class="flipnav-back">About</span>
        </span>
      </a>
    </li>
    <li class="flipnav-item">
      <a class="flipnav-link" href="#!">
        Contact Us
        <span class="flipnav-cube" aria-hidden="true">
          <span class="flipnav-front">Contact Us</span>
          <span class="flipnav-back">Contact Us</span>
        </span>
      </a>
    </li>
  </ul>
</nav>

Scrollspy

The Scrollspy UI component is a visual guide applied to a set of navigation items on the page that indicates the user’s current scroll position. To use it, simply add the .js-scrollspy-section class to every element on the page that you would like to spy, and add the .js-scrollspy-link to every link in the navigation that corresponds to the element you are spying. The JavaScript adds/removes an HTML class to each navigation item based on whether or not the user has scrolled to the location of that item on the page.

Default

You can see the Scrollspy component in action from the sidebar of this very website.

Show Markup

var scrollSpy = (function () {
  // STRICT MODE
  'use strict';

  //
  // PUBLIC METHODS
  //
  function init () {
    var sections = {};
    var section = document.querySelectorAll('.js-scrollspy-section');
    var i = 0;

    Array.prototype.forEach.call(section, function (event) {
      sections[event.id] = event.offsetTop;
    });

    document.addEventListener('scroll', function (event) {
      var scrollPos = document.documentElement.scrollTop || document.body.scrollTop;

      for (i in sections) {
        if (sections[i] <= scrollPos) {
          document.querySelector('.js-scrollspy-link.is-current').classList.remove('is-current');
          document.querySelector('.js-scrollspy-link[href*=' + i + ']').classList.add('is-current');
        }
      }
    }, false);
  }

  return {
    init: init
  }
})();