Components

Reusable components built to provide iconography, dropdowns, tabbed content, pagination, alerts, and more.

# Icons

Icons are displayed through a SVG sprite path that’s included right after the body. Prefix the icon name with shape- as showned below.

<svg class="shape" aria-hidden="true">
    <use xlink:href="#shape-vehicles"></use>
</svg>

Available Icons

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

# A-to-B

This is used on av induvidual trip to show origin address and destination address.

Diagonalvägen 8, 141 75 Kungens Kurva, Sweden
Hedenhösvägen 28, 141 33 Huddinge, Sweden

<ul class="a-to-b">
    <li>
        <svg class="shape" aria-hidden="true">
            <use xlink:href="#shape-circle"></use>
        </svg>
        Diagonalvägen 8, 141 75 Kungens Kurva, Sweden
    </li>

    <li>
        <svg class="shape" aria-hidden="true">
            <use xlink:href="#shape-circle"></use>
        </svg>
        Hedenhösvägen 28, 141 33 Huddinge, Sweden
    </li>
</ul>

Small A-to-B

This is used in the trips list to show origin address and destination address.

Enköpingsvägen 33C, 177 38 Järfälla, Sweden
Fänriksvägen, 177 38 Järfälla, Sweden

<ul class="a-to-b a-to-b--small">
    <li>
        <svg class="shape" aria-hidden="true">
            <use xlink:href="#shape-circle"></use>
        </svg>
        Enköpingsvägen 33C, 177 38 Järfälla, Sweden
    </li>

    <li>
        <svg class="shape" aria-hidden="true">
            <use xlink:href="#shape-circle"></use>
        </svg>
        Fänriksvägen, 177 38 Järfälla, Sweden
    </li>
</ul>

# Avatar

Add a class of avatar to any image to style it as an avatar, i.e. make it round.

<img src="//s3.amazonaws.com/uifaces/faces/twitter/davidpaulsson/48.jpg"
     class="avatar"
     alt="David Paulsson">

# Badge

Highlight new or unread items.

Lorem 4

Ipsum 33

Dolor 678

Sit amet 49

<h1>Lorem <span class="badge">4</span></h1>
<h2>Ipsum <span class="badge">33</span></h2>
<h3>Dolor <span class="badge">678</span></h3>
<p>Sit amet <span class="badge">49</span></p>

# Box

Boxes are used to incapsulate content.

This content is inside a box with a link in it.

This content is inside a smaller box with a link in it.

<div class="box">
    <p>This content is inside a box with a <a href="#">link in it</a>.</p>
</div>

<br>

<div class="box box--small">
    <p>This content is inside a smaller box with a <a href="#">link in it</a>.</p>
</div>

Box With Heading

Box Heading

Box content.

<div class="box">
    <div class="box__heading">
        <h3>Box Heading</h3>
    </div>
    <p>Box content.</p>
</div>

Box colors

This is an alert message with a link in it.

This is a success message with a link in it.

This is a warning message with a link in it.

<div class="box box--alert">
    <p>This is an alert message with a <a href="#">link in it</a>.</p>
</div>

<br>

<div class="box box--success">
    <p>This is a success message with a <a href="#">link in it</a>.</p>
</div>

<br>

<div class="box box--warning">
    <p>This is a warning message with a <a href="#">link in it</a>.</p>
</div>

# Label

A label

<span class="label">A label</span>

# Loader

Wrap any icon with a .loader div.

<div class="loader">
  <svg class="shape" aria-hidden="true">
      <use xlink:href="#shape-automile"></use>
  </svg>
</div>

# Pagination

Previous 1 … 5 6 7 8 9 10 11 … 36 Next

Trips per page

<div class="pagination">
    <div class="pagination__links">
        <a href="#" class="pagination__link pagination__link--prev">Previous</a>
        <a href="#" class="pagination__link">1</a>
        <span>&hellip;</span>
        <a href="#" class="pagination__link">5</a>
        <a href="#" class="pagination__link">6</a>
        <a href="#" class="pagination__link">7</a>
        <span class="pagination__link pagination__link--current">8</span>
        <a href="#" class="pagination__link">9</a>
        <a href="#" class="pagination__link">10</a>
        <a href="#" class="pagination__link">11</a>
        <span>&hellip;</span>
        <a href="#" class="pagination__link">36</a>
        <a href="#" class="pagination__link pagination__link--next">Next</a>
    </div>

    Trips per page
    <div class="select">
        <select>
            <option value="">20</option>
            <option value="">50</option>
            <option value="">100</option>
        </select>
    </div>
</div>

# Slats

Slats are used to generate groups of content in a list form.

Lorem ipsum dolor sit.

Alias laboriosam ullam porro.

Aperiam neque, odio ad.

Obcaecati molestiae, omnis expedita.

<div class="slats">
    <div class="slat">Lorem ipsum dolor sit.</div>
    <div class="slat">Alias laboriosam ullam porro.</div>
    <div class="slat">Aperiam neque, odio ad.</div>
    <div class="slat">Obcaecati molestiae, omnis expedita.</div>
</div>