---
layout: docs
title: Demo
page_title: Demo - turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites
description: Demo of all HTML elements with turretcss styles applied.
---

## Colors

<div class="padding-xs color-black background-white">White</div>
<div class="padding-xs color-black background-light">Light</div>
<div class="padding-xs color-white background-grey">Grey</div>
<div class="padding-xs color-white background-dark">Dark</div>
<div class="padding-xs color-white background-black">Black</div>
<div class="padding-xs color-white background-primary">Primary</div>
<div class="padding-xs color-white background-secondary">Secondary</div>
<div class="padding-xs color-white background-tertiary">Tertiary</div>
<div class="padding-xs color-white background-error">Error</div>
<div class="padding-xs color-white background-warning">Warning</div>
<div class="padding-xs color-white background-success">Success</div>
<div class="padding-xs color-white background-info">Info</div>

### Shades

#### Light

<div class="padding-xs color-dark background-light">Light</div>
<div class="palette">
  <div class="padding-xs color-dark background-light-50">Light<br>50</div>
  <div class="padding-xs color-dark background-light-100">Light<br>100</div>
  <div class="padding-xs color-dark background-light-200">Light<br>200</div>
  <div class="padding-xs color-dark background-light-300">Light<br>300</div>
  <div class="padding-xs color-dark background-light-400">Light<br>400</div>
  <div class="padding-xs color-dark background-light-500">Light<br>500</div>
  <div class="padding-xs color-dark background-light-600">Light<br>600</div>
  <div class="padding-xs color-dark background-light-700">Light<br>700</div>
  <div class="padding-xs color-dark background-light-800">Light<br>800</div>
  <div class="padding-xs color-white background-light-900">Light<br>900</div>
</div>

#### Grey

<div class="padding-xs color-white background-grey">Grey</div>
<div class="palette">
  <div class="padding-xs color-dark background-grey-50">Grey<br>50</div>
  <div class="padding-xs color-dark background-grey-100">Grey<br>100</div>
  <div class="padding-xs color-dark background-grey-200">Grey<br>200</div>
  <div class="padding-xs color-dark background-grey-300">Grey<br>300</div>
  <div class="padding-xs color-white background-grey-400">Grey<br>400</div>
  <div class="padding-xs color-white background-grey-500">Grey<br>500</div>
  <div class="padding-xs color-white background-grey-600">Grey<br>600</div>
  <div class="padding-xs color-white background-grey-700">Grey<br>700</div>
  <div class="padding-xs color-white background-grey-800">Grey<br>800</div>
  <div class="padding-xs color-white background-grey-900">Grey<br>900</div>
</div>

#### Dark

<div class="padding-xs color-white background-dark">Dark</div>
<div class="palette">
  <div class="padding-xs color-dark background-dark-50">Dark<br>50</div>
  <div class="padding-xs color-dark background-dark-100">Dark<br>100</div>
  <div class="padding-xs color-dark background-dark-200">Dark<br>200</div>
  <div class="padding-xs color-dark background-dark-300">Dark<br>300</div>
  <div class="padding-xs color-white background-dark-400">Dark<br>400</div>
  <div class="padding-xs color-white background-dark-500">Dark<br>500</div>
  <div class="padding-xs color-white background-dark-600">Dark<br>600</div>
  <div class="padding-xs color-white background-dark-700">Dark<br>700</div>
  <div class="padding-xs color-white background-dark-800">Dark<br>800</div>
  <div class="padding-xs color-white background-dark-900">Dark<br>900</div>
</div>

### Palettes

#### Primary

<div class="padding-xs color-white background-primary">Primary</div>
<div class="palette">
  <div class="padding-xs color-dark background-primary-50">Primary<br>50</div>
  <div class="padding-xs color-dark background-primary-100">Primary<br>100</div>
  <div class="padding-xs color-dark background-primary-200">Primary<br>200</div>
  <div class="padding-xs color-dark background-primary-300">Primary<br>300</div>
  <div class="padding-xs color-white background-primary-400">Primary<br>400</div>
  <div class="padding-xs color-white background-primary-500">Primary<br>500</div>
  <div class="padding-xs color-white background-primary-600">Primary<br>600</div>
  <div class="padding-xs color-white background-primary-700">Primary<br>700</div>
  <div class="padding-xs color-white background-primary-800">Primary<br>800</div>
  <div class="padding-xs color-white background-primary-900">Primary<br>900</div>
</div>

#### Secondary

<div class="padding-xs color-white background-secondary">Secondary</div>
<div class="palette">
  <div class="padding-xs color-dark background-secondary-50">Secondary<br>50</div>
  <div class="padding-xs color-dark background-secondary-100">Secondary<br>100</div>
  <div class="padding-xs color-dark background-secondary-200">Secondary<br>200</div>
  <div class="padding-xs color-dark background-secondary-300">Secondary<br>300</div>
  <div class="padding-xs color-white background-secondary-400">Secondary<br>400</div>
  <div class="padding-xs color-white background-secondary-500">Secondary<br>500</div>
  <div class="padding-xs color-white background-secondary-600">Secondary<br>600</div>
  <div class="padding-xs color-white background-secondary-700">Secondary<br>700</div>
  <div class="padding-xs color-white background-secondary-800">Secondary<br>800</div>
  <div class="padding-xs color-white background-secondary-900">Secondary<br>900</div>
</div>

#### Tertiary

<div class="padding-xs color-white background-tertiary">Tertiary</div>
<div class="palette">
  <div class="padding-xs color-dark background-tertiary-50">Tertiary<br>50</div>
  <div class="padding-xs color-dark background-tertiary-100">Tertiary<br>100</div>
  <div class="padding-xs color-dark background-tertiary-200">Tertiary<br>200</div>
  <div class="padding-xs color-dark background-tertiary-300">Tertiary<br>300</div>
  <div class="padding-xs color-white background-tertiary-400">Tertiary<br>400</div>
  <div class="padding-xs color-white background-tertiary-500">Tertiary<br>500</div>
  <div class="padding-xs color-white background-tertiary-600">Tertiary<br>600</div>
  <div class="padding-xs color-white background-tertiary-700">Tertiary<br>700</div>
  <div class="padding-xs color-white background-tertiary-800">Tertiary<br>800</div>
  <div class="padding-xs color-white background-tertiary-900">Tertiary<br>900</div>
</div>

### Indicators

#### Error

<div class="padding-xs color-white background-error">Error</div>
<div class="palette">
  <div class="padding-xs color-dark background-error-50">Error<br>50</div>
  <div class="padding-xs color-dark background-error-100">Error<br>100</div>
  <div class="padding-xs color-dark background-error-200">Error<br>200</div>
  <div class="padding-xs color-dark background-error-300">Error<br>300</div>
  <div class="padding-xs color-white background-error-400">Error<br>400</div>
  <div class="padding-xs color-white background-error-500">Error<br>500</div>
  <div class="padding-xs color-white background-error-600">Error<br>600</div>
  <div class="padding-xs color-white background-error-700">Error<br>700</div>
  <div class="padding-xs color-white background-error-800">Error<br>800</div>
  <div class="padding-xs color-white background-error-900">Error<br>900</div>
</div>

#### Warning

<div class="padding-xs color-white background-warning">Warning</div>
<div class="palette">
  <div class="padding-xs color-dark background-warning-50">Warning<br>50</div>
  <div class="padding-xs color-dark background-warning-100">Warning<br>100</div>
  <div class="padding-xs color-dark background-warning-200">Warning<br>200</div>
  <div class="padding-xs color-dark background-warning-300">Warning<br>300</div>
  <div class="padding-xs color-white background-warning-400">Warning<br>400</div>
  <div class="padding-xs color-white background-warning-500">Warning<br>500</div>
  <div class="padding-xs color-white background-warning-600">Warning<br>600</div>
  <div class="padding-xs color-white background-warning-700">Warning<br>700</div>
  <div class="padding-xs color-white background-warning-800">Warning<br>800</div>
  <div class="padding-xs color-white background-warning-900">Warning<br>900</div>
</div>

#### Success

<div class="padding-xs color-white background-success">Success</div>
<div class="palette">
  <div class="padding-xs color-dark background-success-50">Success<br>50</div>
  <div class="padding-xs color-dark background-success-100">Success<br>100</div>
  <div class="padding-xs color-dark background-success-200">Success<br>200</div>
  <div class="padding-xs color-dark background-success-300">Success<br>300</div>
  <div class="padding-xs color-white background-success-400">Success<br>400</div>
  <div class="padding-xs color-white background-success-500">Success<br>500</div>
  <div class="padding-xs color-white background-success-600">Success<br>600</div>
  <div class="padding-xs color-white background-success-700">Success<br>700</div>
  <div class="padding-xs color-white background-success-800">Success<br>800</div>
  <div class="padding-xs color-white background-success-900">Success<br>900</div>
</div>

#### Info

<div class="padding-xs color-white background-info">Info</div>
<div class="palette">
  <div class="padding-xs color-dark background-info-50">Info<br>50</div>
  <div class="padding-xs color-dark background-info-100">Info<br>100</div>
  <div class="padding-xs color-dark background-info-200">Info<br>200</div>
  <div class="padding-xs color-dark background-info-300">Info<br>300</div>
  <div class="padding-xs color-white background-info-400">Info<br>400</div>
  <div class="padding-xs color-white background-info-500">Info<br>500</div>
  <div class="padding-xs color-white background-info-600">Info<br>600</div>
  <div class="padding-xs color-white background-info-700">Info<br>700</div>
  <div class="padding-xs color-white background-info-800">Info<br>800</div>
  <div class="padding-xs color-white background-info-900">Info<br>900</div>
</div>

## Box Shadows

<div class="padding-s margin-xs box-shadow-xxl">Box Shadow XXL</div>
<div class="padding-s margin-xs box-shadow-xl">Box Shadow XL</div>
<div class="padding-s margin-xs box-shadow-l">Box Shadow L</div>
<div class="padding-s margin-xs box-shadow-m">Box Shadow M</div>
<div class="padding-s margin-xs box-shadow-s">Box Shadow S</div>
<div class="padding-s margin-xs box-shadow-xs">Box Shadow XS</div>
<div class="padding-s margin-xs box-shadow-xxs">Box Shadow XXS</div>

## Icons

<div>
  <svg class="icon-xxl" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-xl" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-l" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-m" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-s" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-xs" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-xxs" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
</div>

## Typography

### Headings

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

### Display Title

<p class="display-title display-title-xxl">Display Title XXL</p>
<p class="display-title display-title-xl">Display Title XL</p>
<p class="display-title display-title-l">Display Title L</p>
<p class="display-title">Display Title M</p>
<p class="display-title display-title-s">Display Title S</p>
<p class="display-title display-title-xs">Display Title XS</p>
<p class="display-title display-title-xxs">Display Title XXS</p>

### All Caps

<p class="all-caps all-caps-xxl">All Caps XXL</p>
<p class="all-caps all-caps-xl">All Caps XL</p>
<p class="all-caps all-caps-l">All Caps L</p>
<p class="all-caps">All Caps M</p>
<p class="all-caps all-caps-s">All Caps S</p>
<p class="all-caps all-caps-xs">All Caps XS</p>
<p class="all-caps all-caps-xxs">All Caps XXS</p>

### Lead

<p class="lead lead-xxl">Lead XXL</p>
<p class="lead lead-xl">Lead XL</p>
<p class="lead lead-l">Lead L</p>
<p class="lead">Lead M</p>
<p class="lead lead-s">Lead S</p>
<p class="lead lead-xs">Lead XS</p>
<p class="lead lead-xxs">Lead XXS</p>

### Paragraph

<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

### Link

<p><a href="#">link</a></p>

### Strong

<p><strong>strong</strong></p>

### Emphasis

<p><em>emphasis</em></p>

### Horizontal Rule

<hr>

### Blockquote

<blockquote>
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.</p>
  <cite>Name</cite>
</blockquote>

### Unordered List

<ul>
  <li>Vehicula Dapibus Tellus Fermentum</li>
  <li>Vehicula Dapibus Tellus Fermentum</li>
  <li>Vehicula Dapibus Tellus Fermentum
    <ul>
      <li>Vehicula Dapibus Tellus Fermentum</li>
      <li>Vehicula Dapibus Tellus Fermentum</li>
    </ul>
  </li>
</ul>

### Ordered List

<ol>
  <li>Vehicula Dapibus Tellus Fermentum</li>
  <li>Vehicula Dapibus Tellus Fermentum</li>
  <li>Vehicula Dapibus Tellus Fermentum
    <ol>
      <li>Vehicula Dapibus Tellus Fermentum</li>
      <li>Vehicula Dapibus Tellus Fermentum</li>
    </ol>
  </li>
</ol>

### Definition List

<dl>
  <dt>Fringilla Ipsum Tellus</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  <dt>Fringilla Ipsum Tellus</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  <dt>Fringilla Ipsum Tellus</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>

### Code

`<p>code</p>`

### Pre

```html
<p>pre</p>
```

### Kbd

<p>Save file: <kbd>cmd</kbd> + <kbd>s</kbd></p>

### Mark

<p><mark>mark</mark></p>

## Form

### Field

<p class="field">
  <label for="input-field">Label</label>
  <input type="text" id="input-field" placeholder="Text">
</p>

#### Field Float Label

<div class="field field-float-label">
  <input type="email" id="field" placeholder="Name">
  <label for="field">Name</label>
</div>

### Fieldset

<form role="form">
  <fieldset>
    <legend>Login</legend>
    <p class="field">
      <label for="fieldset-email">Email</label>
      <input type="email" id="fieldset-email" placeholder="Enter Email">
    </p>
    <p class="field">
      <label for="fieldset-password">Password</label>
      <input type="password" id="fieldset-password" placeholder="Enter Password">
    </p>
    <p class="field">
      <button type="submit" class="button">Submit</button>
    </p>
  </fieldset>
</form>

### Form Message

<p class="form-message">Form message</p>
<p class="form-message info">Form message info</p>
<p class="form-message error">Form message error</p>
<p class="form-message warning">Form message warning</p>
<p class="form-message success">Form message success</p>

### Input

<form>
  <p class="field">
    <label for="input-text">Text Input</label>
    <input type="text" id="input-text" placeholder="Text">
  </p>
  <p class="field">
    <label for="input-disabled">Disabled</label>
    <input type="text" id="input-disabled" placeholder="Disabled" disabled="">
  </p>
  <p class="field">
    <label for="input-email">Email Input</label>
    <input type="email" id="input-email" placeholder="Email">
  </p>
  <p class="field">
    <label for="input-search">Search Input</label>
    <input type="search" id="input-search" placeholder="Search">
  </p>
  <p class="field">
    <label for="input-tel">Telephone Input</label>
    <input type="tel" id="input-tel" placeholder="Telephone">
  </p>
  <p class="field">
    <label for="input-url">URL Input</label>
    <input type="url" id="input-url" placeholder="https://">
  </p>
  <p class="field">
    <label for="input-password">Password Input</label>
    <input type="password" id="input-password" value="password">
  </p>
  <p class="field">
    <label for="input-file">File Input</label>
    <input type="file" id="input-file">
  </p>
  <p class="field">
    <label for="input-textarea">Textarea</label>
    <textarea id="input-textarea" cols="30" rows="5" placeholder="Textarea text"></textarea>
  </p>
  <p class="field">
    <label for="input-number">Number Input</label>
    <input type="number" id="input-number" min="0" max="10" placeholder="Enter a number form 0 to 10">
  </p>
  <p class="field">
    <label for="input-date">Date Input</label>
    <input type="date" id="input-date">
  </p>
  <p class="field">
    <label for="input-month">Month Input</label>
    <input type="month" id="input-month">
  </p>
  <p class="field">
    <label for="input-week">Week Input</label>
    <input type="week" id="input-week">
  </p>
  <p class="field">
    <label for="input-datetime">Datetime Input</label>
    <input type="datetime" id="input-datetime" placeholder="Enter a datetime string">
  </p>
  <p class="field">
    <label for="input-datetime-local">Datetime-local Input</label>
    <input type="datetime-local" id="input-datetime-local">
  </p>
  <p class="field">
    <label for="input-color">Color Input</label>
    <input type="color" id="input-color" value="#3455DB">
  </p>
  <p class="field">
    <input id="input-checkbox" type="checkbox" name="checkbox" value="Checkbox Input">
    <label for="input-checkbox">Checkbox Input</label>
  </p>
  <p class="field">
    <input id="input-radio" type="radio" name="radio" value="Radio Input">
    <label for="input-radio">Radio Input</label>
  </p>
</form>

### Input Indicators

<form>
  <p class="field">
    <label for="error">Input Error</label>
    <input class="error" type="text" id="error" value="Input Error">
  </p>
  <p class="field">
    <label for="warning">Input Warning</label>
    <input class="warning" type="text" id="warning" value="Input Warning">
  </p>
  <p class="field">
    <label for="success">Input Success</label>
    <input class="success" type="text" id="success" value="Input Success">
  </p>
  <p class="field">
    <label for="info">Input Info</label>
    <input class="info" type="text" id="info" value="Input Info">
  </p>
</form>

### Input Sizes

<form>
  <p class="field">
    <input class="input-xxl" type="text" placeholder="Input XXL">
  </p>
  <p class="field">
    <input class="input-xl" type="text" placeholder="Input XL">
  </p>
  <p class="field">
    <input class="input-l" type="text" placeholder="Input L">
  </p>
  <p class="field">
    <input type="text" placeholder="Input M">
  </p>
  <p class="field">
    <input class="input-s" type="text" placeholder="Input S">
  </p>
  <p class="field">
    <input class="input-xs" type="text" placeholder="Input XS">
  </p>
  <p class="field">
    <input class="input-xxs" type="text" placeholder="Input XS">
  </p>
</form>

### Input Group

<form>
  <div class="input-group">
    <input type="text" placeholder="Enter Keyword...">
    <button class="button" type="submit">Submit</button>
  </div>
</form>

### Input Group Sizes

<form>
  <div class="field">
    <div class="input-group">
      <input class="input-xxl" type="text" placeholder="Input Group XXL">
      <button class="button button-xxl" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-xl" type="text" placeholder="Input Group XL">
      <button class="button button-xl" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-l" type="text" placeholder="Input Group L">
      <button class="button button-l" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input type="text" placeholder="Input Group M">
      <button class="button" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-s" type="text" placeholder="Input Group S">
      <button class="button button-s" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-xs" type="text" placeholder="Input Group XS">
      <button class="button button-xs" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-xxs" type="text" placeholder="Input Group XS">
      <button class="button button-xxs" type="submit">Submit</button>
    </div>
  </div>
</form>

### Control

#### Checkbox

<form>
  <label class="control checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox</span>
  </label>
</form>

#### Radio

<form>
  <label class="control radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio</span>
  </label>
</form>

#### Switch

<form>
  <label class="control switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch</span>
  </label>
</form>

### Control Indicators

#### Checkbox

<form>
  <label class="control checkbox error">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Error</span>
  </label>
  <label class="control checkbox warning">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Warning</span>
  </label>
  <label class="control checkbox success">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Success</span>
  </label>
  <label class="control checkbox info">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox Info</span>
  </label>
</form>

#### Radio

<form>
  <label class="control radio error">
    <input type="radio" name="radio 1" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Error</span>
  </label>
  <label class="control radio warning">
    <input type="radio" name="radio 2" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Warning</span>
  </label>
  <label class="control radio success">
    <input type="radio" name="radio 3" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Succcess</span>
  </label>
  <label class="control radio info">
    <input type="radio" name="radio 4" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Radio Info</span>
  </label>
</form>

#### Switch

<form>
  <label class="control switch error">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Error</span>
  </label>
  <label class="control switch warning">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Warning</span>
  </label>
  <label class="control switch success">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Success</span>
  </label>
  <label class="control switch info">
    <input type="checkbox" name="checkbox" checked>
    <span class="control-indicator"></span>
    <span class="control-label">Switch Info</span>
  </label>
</form>

### Control Sizes

#### Checkbox

<form>
  <label class="control control-xxl checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox XXL</span>
  </label>
  <label class="control control-xl checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox XL</span>
  </label>
  <label class="control control-l checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox L</span>
  </label>
  <label class="control checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox M</span>
  </label>
  <label class="control control-s checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox S</span>
  </label>
  <label class="control control-xs checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox XS</span>
  </label>
  <label class="control control-xxs checkbox">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Checkbox XXS</span>
  </label>
</form>

#### Radio

<form>
  <label class="control control-xxl radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio XXL</span>
  </label>
  <label class="control control-xl radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio XL</span>
  </label>
  <label class="control control-l radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio L</span>
  </label>
  <label class="control radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio M</span>
  </label>
  <label class="control control-s radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio S</span>
  </label>
  <label class="control control-xs radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio XS</span>
  </label>
  <label class="control control-xxs radio">
    <input type="radio" name="radio">
    <span class="control-indicator"></span>
    <span class="control-label">Radio XXS</span>
  </label>
</form>

#### Switch

<form>
  <label class="control control-xxl switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch XXL</span>
  </label>
  <label class="control control-xl switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch XL</span>
  </label>
  <label class="control control-l switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch L</span>
  </label>
  <label class="control switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch M</span>
  </label>
  <label class="control control-s switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch S</span>
  </label>
  <label class="control control-xs switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch XS</span>
  </label>
  <label class="control control-xxs switch">
    <input type="checkbox" name="checkbox">
    <span class="control-indicator"></span>
    <span class="control-label">Switch XXS</span>
  </label>
</form>

### Select

<form>
  <p class="field">
    <label class="select" for="select">
      <select id="select">
        <option>Select Field</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select" for="select-disabled">
      <select id="select-disabled" disabled>
        <option>Select Field</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
</form>

### Select Indicators

<form>
  <p class="field">
    <label class="select error" for="select-error">
      <select id="select-error">
        <option>Select Error</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select warning" for="select-warning">
      <select id="select-warning">
        <option>Select Warning</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select success" for="select-success">
      <select id="select-success">
        <option>Select Success</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">
    <label class="select info" for="select-info">
      <select id="select-info">
        <option>Select Info</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
</form>

### Select Sizes

<form>
  <p class="field">  
    <label class="select select-xxl" for="select-xxl">
      <select id="select-xxl">
        <option>Select XXL</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">  
    <label class="select select-xl" for="select-xl">
      <select id="select-xl">
        <option>Select XL</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">  
    <label class="select select-l" for="select-l">
      <select id="select-l">
        <option>Select L</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">  
    <label class="select select-m" for="select-m">
      <select id="select-m">
        <option>Select M</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">  
    <label class="select select-s" for="select-s">
      <select id="select-s">
        <option>Select S</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">  
    <label class="select select-xs" for="select-xs">
      <select id="select-xs">
        <option>Select XS</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
  <p class="field">  
    <label class="select select-xxs" for="select-xxs">
      <select id="select-xxs">
        <option>Select XXS</option>
        <option value="1">Option 01</option>
        <option value="2">Option 02</option>
      </select>
    </label>
  </p>
</form>

### Range

<form>
  <p class="field">
    <input type="range" min="0" max="100" />
  </p>
  <p class="field">
    <input type="range" min="0" max="100" disabled />
  </p>
</form>

### Range Indicators

<form>
  <input class="error" type="range" min="0" max="100" />
  <input class="warning" type="range" min="0" max="100" />
  <input class="success" type="range" min="0" max="100" />
  <input class="info" type="range" min="0" max="100" />
</form>

### Range Sizes

<form>
  <input class="range-xxl" type="range" min="0" max="100">
  <input class="range-xl" type="range" min="0" max="100">
  <input class="range-l" type="range" min="0" max="100">
  <input type="range" min="0" max="100">
  <input class="range-s" type="range" min="0" max="100">
  <input class="range-xs" type="range" min="0" max="100">
  <input class="range-xxs" type="range" min="0" max="100">
</form>

### Progress

<form>
  <progress value="70" max="100">70%</progress>
</form>

### Progress Indicators

<form>
  <progress class="error" value="70" max="100">70%</progress>
  <progress class="warning" value="70" max="100">70%</progress>
  <progress class="success" value="70" max="100">70%</progress>
  <progress class="info" value="70" max="100">70%</progress>
</form>

### Progress Sizes

<form>
  <progress class="progress-xxl" value="70" max="100">70%</progress>
  <progress class="progress-xl" value="70" max="100">70%</progress>
  <progress class="progress-l" value="70" max="100">70%</progress>
  <progress value="70" max="100">70%</progress>
  <progress class="progress-s" value="70" max="100">70%</progress>
  <progress class="progress-xs" value="70" max="100">70%</progress>
  <progress class="progress-xxs" value="70" max="100">70%</progress>
</form>

## Elements

### Button

<div>
  <button>Button</button>
</div>

### Button Disabled

<div>
  <button disabled>Button</button>
</div>

### Button Spinner

<div>
  <button class="spinner"></button>
</div>

### Button Block

<div>
  <button class="button button-block">Button Block</button>
</div>

### Button Pill

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-pill button-xxl">Button XXL</button>
    </li>
    <li>
      <button class="button button-pill button-xl">Button XL</button>
    </li>
    <li>
      <button class="button button-pill button-l">Button L</button>
    </li>
    <li>
      <button class="button button-pill">Button M</button>
    </li>
    <li>
      <button class="button button-pill button-s">Button S</button>
    </li>
    <li>
      <button class="button button-pill button-xs">Button XS</button>
    </li>
    <li>
      <button class="button button-pill button-xxs">Button XXS</button>
    </li>
  </ul>
</div>

### Button Square

<div>
  <button class="button button-square"></button>
</div>

### Button with SVG

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-square button-white">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-light">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-grey">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-dark">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-black">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-primary">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-secondary">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square button-tertiary">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square error">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square warning">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square success">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-square info">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
  </ul>
</div>

<div class="group group-xs margin-top-xs">
  <ul>
    <li>
      <button class="button button-square button-white button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-light button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-grey button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-dark button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-black button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-primary button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-secondary button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square button-tertiary button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square error button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square warning button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square success button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-square info button-border">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
  </ul>
</div>

<div class="group group-xs margin-top-xs">
  <ul>
    <li>  
      <button class="button button-xxl button-square button-icon">
        <svg width="20" height="20" viewBox="0 0 20 20">
          <circle cx="10" cy="10" r="10"></circle>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-xl button-square button-icon">
        <svg width="20" height="20" viewBox="0 0 20 20">
          <circle cx="10" cy="10" r="10"></circle>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-l button-square button-icon">
        <svg width="18" height="18" viewBox="0 0 18 18">
          <circle cx="9" cy="9" r="9"></circle>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-m button-square button-icon">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"></circle>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-s button-square button-icon">
        <svg width="14" height="14" viewBox="0 0 14 14">
          <circle cx="7" cy="7" r="7"></circle>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-xs button-square button-icon">
        <svg width="12" height="12" viewBox="0 0 12 12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </button>
    </li>
    <li>  
      <button class="button button-xxs button-square button-icon">
        <svg width="12" height="12" viewBox="0 0 12 12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </button>
    </li>
  </ul>
</div>

### Button Sizes

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-xxl">Button XXL</button>
    </li>
    <li>
      <button class="button button-xl">Button XL</button>
    </li>
    <li>
      <button class="button button-l">Button L</button>
    </li>
    <li>
      <button class="button">Button M</button>
    </li>
    <li>
      <button class="button button-s">Button S</button>
    </li>
    <li>
      <button class="button button-xs">Button XS</button>
    </li>
    <li>
      <button class="button button-xxs">Button XXS</button>
    </li>
  </ul>
</div>

### Button Anchors

<div class="group group-xs">
  <ul>
    <li>
      <a class="button button-xxl">Button XXL</a>
    </li>
    <li>
      <a class="button button-xl">Button XL</a>
    </li>
    <li>
      <a class="button button-l">Button L</a>
    </li>
    <li>
      <a class="button">Button M</a>
    </li>
    <li>
      <a class="button button-s">Button S</a>
    </li>
    <li>
      <a class="button button-xs">Button XS</a>
    </li>
    <li>
      <a class="button button-xxs">Button XXS</a>
    </li>
  </ul>
</div>

### Button Shades

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-white">White</button>
    </li>
    <li>
      <button class="button button-light">Light</button>
    </li>
    <li>
      <button class="button button-grey">Grey</button>
    </li>
    <li>
      <button class="button button-dark">Dark</button>
    </li>
    <li>
      <button class="button button-black">Black</button>
    </li>
    <li>
      <button class="button button-white button-border">White</button>
    </li>
    <li>
      <button class="button button-light button-border">Light</button>
    </li>
    <li>
      <button class="button button-grey button-border">Grey</button>
    </li>
    <li>
      <button class="button button-dark button-border">Dark</button>
    </li>
    <li>
      <button class="button button-black button-border">Black</button>
    </li>
    <li>
      <button class="button button-white button-text">White</button>
    </li>
    <li>
      <button class="button button-light button-text">Light</button>
    </li>
    <li>
      <button class="button button-grey button-text">Grey</button>
    </li>
    <li>
      <button class="button button-dark button-text">Dark</button>
    </li>
    <li>
      <button class="button button-black button-text">Black</button>
    </li>
  </ul>
</div>

#### Disabled

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-white" disabled>White</button>
    </li>
    <li>
      <button class="button button-light" disabled>Light</button>
    </li>
    <li>
      <button class="button button-grey" disabled>Grey</button>
    </li>
    <li>
      <button class="button button-dark" disabled>Dark</button>
    </li>
    <li>
      <button class="button button-black" disabled>Black</button>
    </li>
    <li>
      <button class="button button-white button-border" disabled>White</button>
    </li>
    <li>
      <button class="button button-light button-border" disabled>Light</button>
    </li>
    <li>
      <button class="button button-grey button-border" disabled>Grey</button>
    </li>
    <li>
      <button class="button button-dark button-border" disabled>Dark</button>
    </li>
    <li>
      <button class="button button-black button-border" disabled>Black</button>
    </li>
    <li>
      <button class="button button-white button-text" disabled>White</button>
    </li>
    <li>
      <button class="button button-light button-text" disabled>Light</button>
    </li>
    <li>
      <button class="button button-grey button-text" disabled>Grey</button>
    </li>
    <li>
      <button class="button button-dark button-text" disabled>Dark</button>
    </li>
    <li>
      <button class="button button-black button-text" disabled>Black</button>
    </li>
  </ul>
</div>

### Button Palettes

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-primary">Primary</button>
    </li>
    <li>
      <button class="button button-secondary">Secondary</button>
    </li>
    <li>
      <button class="button button-tertiary">Tertiary</button>
    </li>
    <li>
      <button class="button button-primary button-border">Primary</button>
    </li>
    <li>
      <button class="button button-secondary button-border">Secondary</button>
    </li>
    <li>
      <button class="button button-tertiary button-border">Tertiary</button>
    </li>
    <li>
      <button class="button button-primary button-text">Primary</button>
    </li>
    <li>
      <button class="button button-secondary button-text">Secondary</button>
    </li>
    <li>
      <button class="button button-tertiary button-text">Tertiary</button>
    </li>
  </ul>
</div>

#### Disabled

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-primary" disabled>Primary</button>
    </li>
    <li>
      <button class="button button-secondary" disabled>Secondary</button>
    </li>
    <li>
      <button class="button button-tertiary" disabled>Tertiary</button>
    </li>
    <li>
      <button class="button button-primary button-border" disabled>Primary</button>
    </li>
    <li>
      <button class="button button-secondary button-border" disabled>Secondary</button>
    </li>
    <li>
      <button class="button button-tertiary button-border" disabled>Tertiary</button>
    </li>
    <li>
      <button class="button button-primary button-text" disabled>Primary</button>
    </li>
    <li>
      <button class="button button-secondary button-text" disabled>Secondary</button>
    </li>
    <li>
      <button class="button button-tertiary button-text" disabled>Tertiary</button>
    </li>
  </ul>
</div>

### Button Indicators

<div class="group group-xs">
  <ul>
    <li>
      <button class="button error">Error</button>
    </li>
    <li>
      <button class="button warning">Warning</button>
    </li>
    <li>
      <button class="button success">Success</button>
    </li>
    <li>
      <button class="button info">Info</button>
    </li>
    <li>
      <button class="button error button-border">Error</button>
    </li>
    <li>
      <button class="button warning button-border">Warning</button>
    </li>
    <li>
      <button class="button success button-border">Success</button>
    </li>
    <li>
      <button class="button info button-border">Info</button>
    </li>
    <li>
      <button class="button error button-text">Error</button>
    </li>
    <li>
      <button class="button warning button-text">Warning</button>
    </li>
    <li>
      <button class="button success button-text">Success</button>
    </li>
    <li>
      <button class="button info button-text">Info</button>
    </li>
  </ul>
</div>

#### Disabled

<div class="group group-xs">
  <ul>
    <li>
      <button class="button error" disabled>Error</button>
    </li>
    <li>
      <button class="button warning" disabled>Warning</button>
    </li>
    <li>
      <button class="button success" disabled>Success</button>
    </li>
    <li>
      <button class="button info" disabled>Info</button>
    </li>
    <li>
      <button class="button error button-border" disabled>Error</button>
    </li>
    <li>
      <button class="button warning button-border" disabled>Warning</button>
    </li>
    <li>
      <button class="button success button-border" disabled>Success</button>
    </li>
    <li>
      <button class="button info button-border" disabled>Info</button>
    </li>
    <li>
      <button class="button error button-text" disabled>Error</button>
    </li>
    <li>
      <button class="button warning button-text" disabled>Warning</button>
    </li>
    <li>
      <button class="button success button-text" disabled>Success</button>
    </li>
    <li>
      <button class="button info button-text" disabled>Info</button>
    </li>
  </ul>
</div>

### Button Icon

<div class="group group-xs margin-top-xs">
  <ul>
    <li>
      <button class="button button-square button-icon">
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <a class="button button-square button-icon" href="#">
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
  </ul>
</div>

#### Button Icon with Text Sizes

<div class="group group-xs">
  <ul>
    <li>
      <button class="button button-xxl button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-xl button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-l button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-s button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-xs button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
    <li>
      <button class="button button-xxs button-icon">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </button>
    </li>
  </ul>
</div>

#### Button Icon with Text Sizes Anchors

<div class="group group-xs">
  <ul>
    <li>  
      <a class="button button-xxl button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
    <li>  
      <a class="button button-xl button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
    <li>  
      <a class="button button-l button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
    <li>  
      <a class="button button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
    <li>  
      <a class="button button-s button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
    <li>  
      <a class="button button-xs button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
    <li>  
      <a class="button button-xxs button-icon" href="#">
        <span>Button</span>
        <svg viewBox="0 0 16 16">
          <circle cx="8" cy="8" r="8"/>
        </svg>
      </a>
    </li>
  </ul>
</div>

### Button Group

<div class="button-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

#### Button Group Block

<div class="button-group button-group-block">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

### Figure

<div>
  <figure>
    <div class="media media-16-9 spinner"></div>
    <figcaption>Figure Caption</figcaption>
  </figure>
</div>

### Spinner

<div class="group group-xs">
  <ul>
    <li>
      <div class="space-xxl background-light spinner spinner-xxl"></div>
    </li>
    <li>
      <div class="space-xxl background-light spinner spinner-xl"></div>
    </li>
    <li>
      <div class="space-xxl background-light spinner spinner-l"></div>
    </li>
    <li>
      <div class="space-xxl background-light spinner spinner-m"></div>
    </li>
    <li>
      <div class="space-xxl background-light spinner spinner-s"></div>
    </li>
    <li>
      <div class="space-xxl background-light spinner spinner-xs"></div>
    </li>
    <li>
      <div class="space-xxl background-light spinner spinner-xxs"></div>
    </li>
  </ul>
</div>

### Nav

<div>
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </nav>
</div>

### Nav Inline

<div>
  <nav class="nav-inline">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </nav>
</div>

### Table

<div>
  <table>
    <caption>Table Caption</caption>
    <thead>
      <tr>
        <th scope="col">Vestibulum Sem Ipsum</th>
        <th scope="col">Dolor Fringilla</th>
        <th scope="col">Amet Mattis</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Egestas Ipsum Nibh</td>
        <td>Magna Nullam</td>
        <td>Consectetur Euismod</td>
      </tr>
      <tr>
        <td>Egestas Ipsum Nibh</td>
        <td>Magna Nullam</td>
        <td>Consectetur Euismod</td>
      </tr>
      <tr>
        <td>Egestas Ipsum Nibh</td>
        <td>Magna Nullam</td>
        <td>Consectetur Euismod</td>
      </tr>
    </tbody>
  </table>
</div>

### Table Responsive

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th scope="col">Vestibulum Sem Ipsum</th>
        <th scope="col">Dolor Fringilla</th>
        <th scope="col">Amet Mattis</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Egestas Ipsum Nibh</td>
        <td>Magna Nullam</td>
        <td>Consectetur Euismod</td>
      </tr>
      <tr>
        <td>Egestas Ipsum Nibh</td>
        <td>Magna Nullam</td>
        <td>Consectetur Euismod</td>
      </tr>
      <tr>
        <td>Egestas Ipsum Nibh</td>
        <td>Magna Nullam</td>
        <td>Consectetur Euismod</td>
      </tr>
    </tbody>
  </table>
</div>