CSS

Global CSS styling, typography, forms, a whole bunch of helper classes, and an advanced grid system.

# Grid System

The Automile grid system uses Flexbox and defaults to equal width, and height, columns. Put as many .cols as you wish in your .rows and the .cols will automatically space out evenly. Extend .col with any of the helper width classes available to create custom layouts.

If you extend a .row with .row--collapsed all columns will collapse (no column gap).

Foo

<style>.bgr { background-color: papayawhip; height: 20px; }</style>

<div class="row">
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
</div>

<br>

<div class="row">
    <div class="col col--two-thirds"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
</div>

<br>

<div class="row">
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col col--three-fifths"><div class="bgr">Foo</div></div>
    <div class="col col--one-quarter"><div class="bgr">Foo</div></div>
</div>

<br>

<div class="row">
    <div class="col col--one-third"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
</div>

<br>

<!-- No column gap between these -->
<div class="row row--collapsed">
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
    <div class="col"><div class="bgr">Foo</div></div>
</div>

Row Alignments

The default is equal height on columns, but you can turn this off and align all .cols vertically.

<div class="row row--top">
    <div class="col"><img src="http://placehold.it/20x20"></div>
    <div class="col"><img src="http://placehold.it/60x60"></div>
    <div class="col"><img src="http://placehold.it/100x100"></div>
</div>

<hr>

<div class="row row--middle">
    <div class="col"><img src="http://placehold.it/20x20"></div>
    <div class="col"><img src="http://placehold.it/60x60"></div>
    <div class="col"><img src="http://placehold.it/100x100"></div>
</div>

<hr>

<div class="row row--bottom">
    <div class="col"><img src="http://placehold.it/20x20"></div>
    <div class="col"><img src="http://placehold.it/60x60"></div>
    <div class="col"><img src="http://placehold.it/100x100"></div>
</div>

Row Spacing

You can also use Flexbox without .cols. Any items you put inside a .row will be flex items and can be moved around accordingly.

<div class="row row--end">
    <div><img src="http://placehold.it/20x20"></div>
    <div><img src="http://placehold.it/60x60"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>

<hr>

<div class="row row--center">
    <div><img src="http://placehold.it/20x20"></div>
    <div><img src="http://placehold.it/60x60"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>

<hr>

<div class="row row--space-between">
    <div><img src="http://placehold.it/20x20"></div>
    <div><img src="http://placehold.it/60x60"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>

<hr>

<div class="row row--space-around">
    <div><img src="http://placehold.it/20x20"></div>
    <div><img src="http://placehold.it/60x60"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>

Wrap `.col` Elements

Sometimes you just want to throw a bunch of divs into a row and have them line up nicely. Maybe you don’t know how many items you have? Extend your .row with row--wrap.

For example, these are all the icons Interior ships with.

acceleration

accident

arrow-left

attachment

automile

brake

calendar

camera

caret-down

caret-left

caret-right

caret-up

circle

driver

event

excel

excluded

expense

export

folder

geofence

idling

inbox

included

inspection

list

live

logout

map

merge

notification

pdf

place

report

setting

speeding

split

support

task

trip

turn

unit

vehicle-activity

vehicle

<div class="row row--wrap row--collapsed">
    <div class="col col--one-sixth push-half--bottom">acceleration</div>
    <div class="col col--one-sixth push-half--bottom">accident</div>
    <div class="col col--one-sixth push-half--bottom">arrow-left</div>
    <div class="col col--one-sixth push-half--bottom">attachment</div>
    <div class="col col--one-sixth push-half--bottom">automile</div>
    <div class="col col--one-sixth push-half--bottom">brake</div>
    <div class="col col--one-sixth push-half--bottom">calendar</div>
    <div class="col col--one-sixth push-half--bottom">camera</div>
    <div class="col col--one-sixth push-half--bottom">caret-down</div>
    <div class="col col--one-sixth push-half--bottom">caret-left</div>
    <div class="col col--one-sixth push-half--bottom">caret-right</div>
    <div class="col col--one-sixth push-half--bottom">caret-up</div>
    <div class="col col--one-sixth push-half--bottom">circle</div>
    <div class="col col--one-sixth push-half--bottom">driver</div>
    <div class="col col--one-sixth push-half--bottom">event</div>
    <div class="col col--one-sixth push-half--bottom">excel</div>
    <div class="col col--one-sixth push-half--bottom">excluded</div>
    <div class="col col--one-sixth push-half--bottom">expense</div>
    <div class="col col--one-sixth push-half--bottom">export</div>
    <div class="col col--one-sixth push-half--bottom">folder</div>
    <div class="col col--one-sixth push-half--bottom">geofence</div>
    <div class="col col--one-sixth push-half--bottom">idling</div>
    <div class="col col--one-sixth push-half--bottom">inbox</div>
    <div class="col col--one-sixth push-half--bottom">included</div>
    <div class="col col--one-sixth push-half--bottom">inspection</div>
    <div class="col col--one-sixth push-half--bottom">list</div>
    <div class="col col--one-sixth push-half--bottom">live</div>
    <div class="col col--one-sixth push-half--bottom">logout</div>
    <div class="col col--one-sixth push-half--bottom">map</div>
    <div class="col col--one-sixth push-half--bottom">merge</div>
    <div class="col col--one-sixth push-half--bottom">notification</div>
    <div class="col col--one-sixth push-half--bottom">pdf</div>
    <div class="col col--one-sixth push-half--bottom">place</div>
    <div class="col col--one-sixth push-half--bottom">report</div>
    <div class="col col--one-sixth push-half--bottom">search</div>
    <div class="col col--one-sixth push-half--bottom">setting</div>
    <div class="col col--one-sixth push-half--bottom">speeding</div>
    <div class="col col--one-sixth push-half--bottom">split</div>
    <div class="col col--one-sixth push-half--bottom">support</div>
    <div class="col col--one-sixth push-half--bottom">task</div>
    <div class="col col--one-sixth push-half--bottom">trip</div>
    <div class="col col--one-sixth push-half--bottom">turn</div>
    <div class="col col--one-sixth push-half--bottom">unit</div>
    <div class="col col--one-sixth push-half--bottom">vehicle-activity</div>
    <div class="col col--one-sixth push-half--bottom">vehicle</div>
    
</div>

Helper Width Classes

Class Name	Width
`.col--one-half`	50%
`.col--one-third`	33.333%
`.col--two-thirds`	66.666%
`.col--one-quarter`	25%
`.col--two-quarters`	50%
`.col--three-quarters`	75%
`.col--one-fifth`	20%
`.col--two-fifths`	40%
`.col--three-fifths`	60%
`.col--four-fifths`	80%
`.col--one-sixth`	16.666%
`.col--two-sixths`	33.333%
`.col--three-sixths`	50%
`.col--four-sixths`	66.666%
`.col--five-sixths`	83.333%

# Typography

Headings

All HTML headings, <h1> through <h6>, are available as native element styles, and classes.

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

p. Heading Secondary text

<h1>h1. Heading <small>Secondary text</small></h1>
<h2>h2. Heading <small>Secondary text</small></h2>
<h3>h3. Heading <small>Secondary text</small></h3>
<h4>h4. Heading <small>Secondary text</small></h4>
<h5>h5. Heading <small>Secondary text</small></h5>
<h6>h6. Heading <small>Secondary text</small></h6>
<p class="h1">p. Heading <small>Secondary text</small></p>
<p class="h2">p. Heading <small>Secondary text</small></p>
<p class="h3">p. Heading <small>Secondary text</small></p>
<p class="h4">p. Heading <small>Secondary text</small></p>
<p class="h5">p. Heading <small>Secondary text</small></p>
<p class="h6">p. Heading <small>Secondary text</small></p>

Body Copy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque hic iste ipsa perspiciatis quae, adipisci nam aperiam nesciunt ducimus sit labore nostrum aspernatur, dolorum sequi inventore laborum odio laboriosam molestias.

Maxime atque, explicabo earum veniam esse mollitia dolore, suscipit nemo reprehenderit recusandae obcaecati alias repellat amet doloribus neque, iste necessitatibus dolorum minus.

Lorem ipsum dolor sit amet, consectetur.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque hic iste ipsa perspiciatis quae, adipisci nam aperiam nesciunt ducimus sit labore nostrum aspernatur, dolorum sequi inventore laborum odio laboriosam molestias.</p>
<p>Maxime atque, explicabo earum veniam esse mollitia dolore, suscipit nemo reprehenderit recusandae obcaecati alias repellat amet doloribus neque, iste necessitatibus dolorum minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur.</p>

Small Text

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small></p>

Bold & Italics

For emphasizing a snippet of text with a heavier font-weight or italics.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>

Alignment Classes

Realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Transformation classes

Transform text in components with text classes.

Lowercased text.

Uppercased text.

Capitalized text.

Light text.

Normal text.

Bold text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<p class="font-weight-light">Light text.</p>
<p class="font-weight-normal">Normal text.</p>
<p class="font-weight-bold">Bold text.</p>

Blockquotes

For quoting blocks of content from another source within your document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consectetur fugit et ipsam officiis enim reiciendis natus vel expedita maxime? Numquam fugiat aliquid, praesentium illum veritatis asperiores expedita dolore dicta.

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consectetur fugit et ipsam officiis enim reiciendis natus vel expedita maxime? Numquam fugiat aliquid, praesentium illum veritatis asperiores expedita dolore dicta.</p>
</blockquote>

# Lists

Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit</li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ol>

Bare

The list-bare object removes any indents and bullet points from lists. (immediate children only).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-bare">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Horizontal

The list-horizontal throws the list into horizontal mode.

Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-horizontal">
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Block

The list-horizontal throws the list into horizontal mode.

Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-block">
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Split

Simple split item for creating two elements floated away from one another.

Burger and fries: £5.99
Fillet steak: £19.99
Ice cream: £2.99

<dl class="list-split">
   <dt class="list-split__title">Burger and fries</dt>
   <dd>&pound;5.99</dd>
   <dt class="list-split__title">Fillet steak</dt>
   <dd>&pound;19.99</dd>
   <dt class="list-split__title">Ice cream</dt>
   <dd>&pound;2.99</dd>
</dl>

# Tables

Each td will use as much space as needed in your table. But we also ship a bunch of helper classes to style the widths of tds independantly. Read more about the helper width classes.

Table Heading 1	Table Heading 2	Table Heading 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

<table class="table">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </tbody>
</table>

No Border

Table Heading 1	Table Heading 2	Table Heading 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

<table class="table table--no-border">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </tbody>
</table>

Striped

Table Heading 1	Table Heading 2	Table Heading 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

<table class="table table--striped">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </tbody>
</table>

# Forms

All textual <input>, <textarea> elements with .form-control are set to width: 100%; by default. <select> needs a wrapper div with .select to function properly. Checkboxes and radios gets their styling from the wrapping .control class.

Add .push--bottom classes for needed spacing.

Example

<form>
    <label class="label" for="exampleEmail">Email address</label>
    <input class="form-control push--bottom" type="email" id="exampleEmail" placeholder="Email">

    <label class="label" for="disabledInput">Disabled Input</label>
    <input class="form-control push--bottom" type="text" id="disabledInput" placeholder="Disabled Input" disabled>

    <label class="label" for="examplePassword">Password</label>
    <input class="form-control push--bottom" type="password" id="examplePassword" placeholder="Password">

    <label class="label" for="exampleNoChrome">No Chrome</label>
    <input class="form-control form-control--no-chrome push--bottom" type="text" id="exampleNoChrome" placeholder="This input has no chrome">

    <div class="push--bottom">
        <label class="control checkbox">
            <input type="checkbox">
            <span class="control-indicator"></span> Check this custom checkbox
        </label>

        <label class="control checkbox">
            <input type="checkbox" disabled>
            <span class="control-indicator"></span> This checkbox is disabled
        </label>
    </div>

    <div class="select push--bottom">
        <select aria-label="Select menu example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>

    <label class="label" for="exampleTextarea">Message</label>
    <textarea class="form-control push--bottom" id="exampleTextarea" rows="4"></textarea>

    <div class="push--bottom">
        <label class="control radio">
            <input name="radio" type="radio">
            <span class="control-indicator"></span> Toggle this custom radio input
        </label>

        <label class="control radio">
            <input name="radio" type="radio">
            <span class="control-indicator"></span> Or toggle this other custom radio input
        </label>
    </div>

    <button type="submit" class="button">Submit</button>
</form>

Different Selects

<div class="push--bottom">
    <div class="select">
        <select aria-label="Select menu example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
</div>

<div class="select select--no-chrome">
    <select aria-label="Select menu example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, dicta.</option>
        <option value="3">Three</option>
    </select>
</div>

Inputs With Icons

Date picker

Odometer

<label class="label" for="dateExample">Date picker</label>
<div class="row">
    <div class="form-control--icon">
        <svg class="shape" aria-hidden="true">
            <use xlink:href="#shape-calendar"></use>
        </svg>
    </div>
    <input type="text" class="form-control" id="dateExample" placeholder="Pick a date…">
</div>

<br>

<label class="label" for="odometerExample">Odometer</label>
<div class="row">
    <input type="text" class="form-control" id="odometerExample" placeholder="Enter Odometer">
    <div class="form-control--icon">
        km
    </div>
</div>

Validation States

Email address

This value should be a valid email.

Your message

This value is required.

Odometer

This value is required.

<label class="label" for="email">Email address</label>
<input type="email" class="form-control form-control--error" id="email" placeholder="Enter email" value="david@automile">
<div class="form-control--error-message">This value should be a valid email.</div>

<br>

<label class="label" for="message">Your message</label>
<textarea class="form-control form-control--error" id="message" cols="30" rows="6" placeholder="Enter message"></textarea>
<div class="form-control--error-message">This value is required.</div>

<br>

<label class="label" for="odometerExample">Odometer</label>
<div class="row">
    <input type="text" class="form-control form-control--error" id="odometerExample" placeholder="Enter Odometer">
    <div class="form-control--icon form-control--error">
        km
    </div>
</div>
<div class="form-control--error-message">This value is required.</div>

Column Sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Something

<div class="row">
    <div class="col col--one-half">
        <label class="label" for="x">Something</label>
        <input class="form-control" type="text" id="x">
    </div>

    <div class="col">
        <label class="label" for="y">Something</label>
        <input class="form-control" type="text" id="y">
    </div>

    <div class="col">
        <label class="label" for="z">Something</label>
        <input class="form-control" type="text" id="z">
    </div>
</div>

# Buttons

For cross browser styling, it’s recommended to use the button element rather than styling an anchor tag as a button. If it should look like a button, it probarbly is.

Normal button

A link button

<button class="button">A button</button>
<a href="#" class="button" role="button">A link button</a>
<button class="button">
    A button with an icon
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>

Small buttons

A small button

<button class="button button--small">A small button</button>
<a href="#" class="button button--small" role="button">A small button</a>
<button class="button button--small">
    A small button with an icon
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>

Narrow buttons

Narrow buttons decrease the amount of padding on each side of the button.

A narrow button

<button class="button button--narrow">A narrow button</button>
<a href="#" class="button button--narrow" role="button">A narrow button</a>
<button class="button button--narrow">
    A narrow small button with an icon
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>

Block button

A block link button

<button class="button button--block">A block button</button>
<a href="#" class="button button--block" role="button">A block link button</a>
<button class="button button--block">
    A block button with an icon
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>

Button colors

<button class="button">Default</button>
<button class="button" disabled>Disabled</button>
<button class="button button--hollow">Hollow</button>
<button class="button button--success">Success</button>
<button class="button button--danger">Danger</button>
<button class="button button--warning">Warning</button>
<button class="button button--ghost">Ghost</button>

Button colors (with icons)

<button class="button">
    Default
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>
<button class="button" disabled>
    Disabled
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>
<button class="button button--hollow">
    Hollow
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>
<button class="button button--success">
    Success
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>
<button class="button button--danger">
    Danger
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>
<button class="button button--warning">
    Warning
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>
<button class="button button--ghost">
    Ghost
    <svg class="shape" aria-hidden="true">
        <use xlink:href="#shape-vehicles"></use>
    </svg>
</button>

Buttons group

Add multiple buttons grouped as a unit.

<div class="button-group">
    <button class="button button--hollow">Option 1</button>
    <button class="button button--hollow">Option 2</button>
    <button class="button button--hollow is-active">Option 3</button>
</div>

Block button group

As above, just take upp 100% in width and space out evenly.

<div class="button-group button-group--block">
    <button class="button button--hollow">Personal</button>
    <button class="button button--hollow is-active">Business</button>
    <button class="button button--hollow">Other</button>
</div>

Split button

A split button is just a button group that’s used in conjunction with Drop to create dropdown buttons.

Dropdown

<div class="button-group">
    <a class="button button--hollow" href="#">Dropdown</a>
    <button class="button button--hollow button--narrow split-button-example-target">
        <svg class="shape" aria-hidden="true">
            <use xlink:href="#shape-caret-down"></use>
        </svg>
    </button>
</div>
<div class="split-button-example-content" style="display: none;">
    <ul class="drop-menu">
        <li class="drop-menu__heading" role="heading">Lorem</li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Nisi deleniti</a></li>
        <li><a href="#">Dicta dolor</a></li>
        <li class="drop-menu__divider" role="separator"></li>
        <li class="drop-menu__heading" role="heading">Ipsum</li>
        <li><a href="#">Soluta est</a></li>
    </ul>
</div>

<script>
    (function () {
        'use strict';

        // Click on this el triggers the drop.
        var dropTarget = document.querySelector('.split-button-example-target');
        // What should we show in the drop?
        var dropContent = document.querySelector('.split-button-example-content');
        // Init drop.
        var drop = new Drop({
            target: dropTarget,
            content: dropContent.innerHTML
        });
    })();
</script>

# Helper Classes

A series of helper classes to use arbitrarily. A lot of these classes carry !important as you will always want them to win out over other selectors.

Add/remove Floats

.float-none

.float-right

.float-left

Force element to new row i.e. clear any float.

<div class="float-none">.float-none</div>
<div class="float-right">.float-right</div>
<div class="float-left">.float-left</div>
<div class="clear">Force element to new row i.e. <em>clear</em> any float.</div>

Add/Remove Margins

Add Full Margins

Adds $spacing-unit margins.

.push
.push–top
.push–right
.push–bottom
.push–left
.push–ends
.push–sides

Push Left

Push Sides

Add Half Margins

Adds ($spacing-unit / 2) margins.

.push-half
.push-half–top
.push-half–right
.push-half–bottom
.push-half–left
.push-half–ends
.push-half–sides

Push Half Left

Push Half Sides

Remove Margins

Takes away margins.

.flush
.flush–top
.flush–right
.flush–bottom
.flush–left
.flush–ends
.flush–sides

Flush Left

Flush Sides

Add/Remove Paddings

Add Full Paddings

Add $spacing-unit paddings.

.soft
.soft–top
.soft–right
.soft–bottom
.soft–left
.soft–ends
.soft–sides

Soft Left

Soft Sides

Add Half Paddings

Adds ($spacing-unit / 2) padding

.soft-half
.soft-half–top
.soft-half–right
.soft-half–bottom
.soft-half–left
.soft-half–ends
.soft-half–sides

Soft Half Left

Soft Half Sides

Remove Paddings

Takes away padding.

.hard
.hard–top
.hard–right
.hard–bottom
.hard–left
.hard–ends
.hard–sides

Hard Left

Hard Sides