Brand

Logo

Wordmark

Symbol

App Icon

Avatar

<div class="col col-4">
  <div class="container">
    <p>Wordmark</p>
    <div class="logo logo-type-kt"></div>
  </div>
  <div class="container">
    <p>Symbol</p>
    <div class="logo logo-symbol-kt"></div>
  </div>
  <div class="container">
    <p>App Icon</p>
    <div class="logo app-icon-kt"></div>
  </div>
  <div class="container">
    <p>Avatar</p>
    <div class="logo app-avatar-kt"></div>
  </div>
</div>

color

$grey-80
#262F36
$grey-70
#3A4651
$grey-60
#4D5E6C
$grey-50
#607587
$grey-40
#7D91A2
$grey-30
#9DACB9
$grey-20
#BEC8D1
$grey-10
#EFF1F3
$blue-80
#0D324A
$blue-70
#134A70
$blue-60
#1A6395
$blue-50
#207CBA
$blue-40
#389ADD
$blue-30
#6AB3E5
$blue-20
#9BCDEE
$blue-10
#E6F3FB
$green-80
#153518
$green-70
#205023
$green-60
#2A6A2F
$green-50
#35853B
$green-40
#47B350
$green-30
#74C87A
$green-20
#A2DAA7
$green-10
#E8F6E9
$red-80
#581C16
$red-70
#83231D
$red-60
#B12723
$red-50
#E22A2A
$red-40
#F06151
$red-30
#FB8B7A
$red-20
#FFB2A4
$red-10
#FFECE8
$yellow-80
#382D01
$yellow-70
#554401
$yellow-60
#715A02
$yellow-50
#8D7102
$yellow-40
#C19F17
$yellow-30
#E8C228
$yellow-20
#ECD166
$yellow-10
#F9F2D2
$dpe-corner
#B078D9
$dpe-acceleration
#ECD166
$dpe-brake
#F06151
$white-20
#F5F7F8
$white-10
#FCFCFD
$white-00
#FFFFFF
<div class="col col-8">
  <div class="container">
    <div class="sg-color-swatch grey grey-80"></div>
    <div class="sg-color-name">$grey-80</div>
    <div class="sg-color-value">#262F36</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-70"></div>
    <div class="sg-color-name">$grey-70</div>
    <div class="sg-color-value">#3A4651</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-60"></div>
    <div class="sg-color-name">$grey-60</div>
    <div class="sg-color-value">#4D5E6C</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-50"></div>
    <div class="sg-color-name">$grey-50</div>
    <div class="sg-color-value">#607587</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-40"></div>
    <div class="sg-color-name">$grey-40</div>
    <div class="sg-color-value">#7D91A2</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-30"></div>
    <div class="sg-color-name">$grey-30</div>
    <div class="sg-color-value">#9DACB9</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-20"></div>
    <div class="sg-color-name">$grey-20</div>
    <div class="sg-color-value">#BEC8D1</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch grey grey-10"></div>
    <div class="sg-color-name">$grey-10</div>
    <div class="sg-color-value">#EFF1F3</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-80"></div>
    <div class="sg-color-name">$blue-80</div>
    <div class="sg-color-value">#0D324A</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-70"></div>
    <div class="sg-color-name">$blue-70</div>
    <div class="sg-color-value">#134A70</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-60"></div>
    <div class="sg-color-name">$blue-60</div>
    <div class="sg-color-value">#1A6395</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-50"></div>
    <div class="sg-color-name">$blue-50</div>
    <div class="sg-color-value">#207CBA</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-40"></div>
    <div class="sg-color-name">$blue-40</div>
    <div class="sg-color-value">#389ADD</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-30"></div>
    <div class="sg-color-name">$blue-30</div>
    <div class="sg-color-value">#6AB3E5</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-20"></div>
    <div class="sg-color-name">$blue-20</div>
    <div class="sg-color-value">#9BCDEE</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch blue blue-10"></div>
    <div class="sg-color-name">$blue-10</div>
    <div class="sg-color-value">#E6F3FB</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-80"></div>
    <div class="sg-color-name">$green-80</div>
    <div class="sg-color-value">#153518</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-70"></div>
    <div class="sg-color-name">$green-70</div>
    <div class="sg-color-value">#205023</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-60"></div>
    <div class="sg-color-name">$green-60</div>
    <div class="sg-color-value">#2A6A2F</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-50"></div>
    <div class="sg-color-name">$green-50</div>
    <div class="sg-color-value">#35853B</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-40"></div>
    <div class="sg-color-name">$green-40</div>
    <div class="sg-color-value">#47B350</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-30"></div>
    <div class="sg-color-name">$green-30</div>
    <div class="sg-color-value">#74C87A</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-20"></div>
    <div class="sg-color-name">$green-20</div>
    <div class="sg-color-value">#A2DAA7</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch green green-10"></div>
    <div class="sg-color-name">$green-10</div>
    <div class="sg-color-value">#E8F6E9</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-80"></div>
    <div class="sg-color-name">$red-80</div>
    <div class="sg-color-value">#581C16</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-70"></div>
    <div class="sg-color-name">$red-70</div>
    <div class="sg-color-value">#83231D</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-60"></div>
    <div class="sg-color-name">$red-60</div>
    <div class="sg-color-value">#B12723</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-50"></div>
    <div class="sg-color-name">$red-50</div>
    <div class="sg-color-value">#E22A2A</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-40"></div>
    <div class="sg-color-name">$red-40</div>
    <div class="sg-color-value">#F06151</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-30"></div>
    <div class="sg-color-name">$red-30</div>
    <div class="sg-color-value">#FB8B7A</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-20"></div>
    <div class="sg-color-name">$red-20</div>
    <div class="sg-color-value">#FFB2A4</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch red red-10"></div>
    <div class="sg-color-name">$red-10</div>
    <div class="sg-color-value">#FFECE8</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-80"></div>
    <div class="sg-color-name">$yellow-80</div>
    <div class="sg-color-value">#382D01</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-70"></div>
    <div class="sg-color-name">$yellow-70</div>
    <div class="sg-color-value">#554401</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-60"></div>
    <div class="sg-color-name">$yellow-60</div>
    <div class="sg-color-value">#715A02</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-50"></div>
    <div class="sg-color-name">$yellow-50</div>
    <div class="sg-color-value">#8D7102</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-40"></div>
    <div class="sg-color-name">$yellow-40</div>
    <div class="sg-color-value">#C19F17</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-30"></div>
    <div class="sg-color-name">$yellow-30</div>
    <div class="sg-color-value">#E8C228</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-20"></div>
    <div class="sg-color-name">$yellow-20</div>
    <div class="sg-color-value">#ECD166</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch yellow yellow-10"></div>
    <div class="sg-color-name">$yellow-10</div>
    <div class="sg-color-value">#F9F2D2</div>
  </div>
</div>
<div class="col col-8">
  <div class="container">
    <div class="sg-color-swatch driving-event dpe-corner"></div>
    <div class="sg-color-name">$dpe-corner</div>
    <div class="sg-color-value">#B078D9</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch driving-event dpe-acceleration"></div>
    <div class="sg-color-name">$dpe-acceleration</div>
    <div class="sg-color-value">#ECD166</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch driving-event dpe-brake"></div>
    <div class="sg-color-name">$dpe-brake</div>
    <div class="sg-color-value">#F06151</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch off-white white-20"></div>
    <div class="sg-color-name">$white-20</div>
    <div class="sg-color-value">#F5F7F8</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch off-white white-10"></div>
    <div class="sg-color-name">$white-10</div>
    <div class="sg-color-value">#FCFCFD</div>
  </div>
  <div class="container">
    <div class="sg-color-swatch off-white white-10"></div>
    <div class="sg-color-name">$white-00</div>
    <div class="sg-color-value">#FFFFFF</div>
  </div>
</div>

font

Fleet App: Open Sans

The quick brown fox jumps over the lazy dog. Light, 300.

The quick brown fox jumps over the lazy dog. Light, 300, Italic.

The quick brown fox jumps over the lazy dog. Regular, 400.

The quick brown fox jumps over the lazy dog. Regular, 400, Italic.

The quick brown fox jumps over the lazy dog. Semibold, 600.

Driver App: Roboto

The quick brown fox jumps over the lazy dog. Light, 300.

The quick brown fox jumps over the lazy dog. Regular, 400.

The quick brown fox jumps over the lazy dog. Regular, 400, Italic.

The quick brown fox jumps over the lazy dog. Bold, 700.

<div class="col col-2">
  <div class="container">
    <p>Fleet App: <a href="https://fonts.google.com/specimen/Open+Sans" target="_blank">Open Sans</a></p>
    <p class="font font-open-sans font-300">The quick brown fox jumps over the lazy dog. Light, 300.</p>
    <p class="font font-open-sans font-300 font-italic">The quick brown fox jumps over the lazy dog. Light, 300, Italic.</p>
    <p class="font font-open-sans font-400">The quick brown fox jumps over the lazy dog. Regular, 400.</p>
    <p class="font font-open-sans font-400 font-italic">The quick brown fox jumps over the lazy dog. Regular, 400, Italic.</p>
    <p class="font font-open-sans font-600">The quick brown fox jumps over the lazy dog. Semibold, 600.</p>
  </div>
  <div class="container">
    <p>Driver App: <a href="https://fonts.google.com/specimen/Roboto" target="_blank">Roboto</a></p>
    <p class="font font-roboto font-300">The quick brown fox jumps over the lazy dog. Light, 300.</p>
    <p class="font font-roboto font-400">The quick brown fox jumps over the lazy dog. Regular, 400.</p>
    <p class="font font-roboto font-400 font-italic">The quick brown fox jumps over the lazy dog. Regular, 400, Italic.</p>
    <p class="font font-roboto font-700">The quick brown fox jumps over the lazy dog. Bold, 700.</p>
  </div>
</div>

base

button

.button-primary

Button

Button

Button

Button

.button-secondary

Button

Button

Button

Button

.button-subtle

Button

Button

Button

Button

.button-save

Button

Button

Button

Button

.button-delete

Button

Button

Button

Button

.button-warning

Button

Button

Button

Button

.button-size-sm

Button

.button-size-md

Button

.button-size-lg

Button

.button-icon

Button

.button-dropdown

Button

.button-icon-only

<div class="col col-6">
  <div class="container">
    <p class="col-header">.button-primary</p>
    <p><a href="#" class="button button-size-md">Button</a></p>
    <p><a href="#" class="button button-size-md button-hover">Button</a></p>
    <p><a href="#" class="button button-size-md button-active button-focus">Button</a></p>
    <p><a href="#" class="button button-size-md button-disabled">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-secondary</p>
    <p><a href="#" class="button button-size-md button-secondary">Button</a></p>
    <p><a href="#" class="button button-size-md button-secondary button-hover">Button</a></p>
    <p><a href="#" class="button button-size-md button-secondary button-active button-focus">Button</a></p>
    <p><a href="#" class="button button-size-md button-secondary button-disabled">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-subtle</p>
    <p><a href="#" class="button button-size-md button-subtle">Button</a></p>
    <p><a href="#" class="button button-size-md button-subtle button-hover">Button</a></p>
    <p><a href="#" class="button button-size-md button-subtle button-active button-focus">Button</a></p>
    <p><a href="#" class="button button-size-md button-subtle button-disabled">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-save</p>
    <p><a href="#" class="button button-size-md button-save">Button</a></p>
    <p><a href="#" class="button button-size-md button-save button-hover">Button</a></p>
    <p><a href="#" class="button button-size-md button-save button-active button-focus">Button</a></p>
    <p><a href="#" class="button button-size-md button-save button-disabled">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-delete</p>
    <p><a href="#" class="button button-size-md button-delete">Button</a></p>
    <p><a href="#" class="button button-size-md button-delete button-hover">Button</a></p>
    <p><a href="#" class="button button-size-md button-delete button-active button-focus">Button</a></p>
    <p><a href="#" class="button button-size-md button-delete button-disabled">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-warning</p>
    <p><a href="#" class="button button-size-md button-warning">Button</a></p>
    <p><a href="#" class="button button-size-md button-warning button-hover">Button</a></p>
    <p><a href="#" class="button button-size-md button-warning button-active button-focus">Button</a></p>
    <p><a href="#" class="button button-size-md button-warning button-disabled">Button</a></p>
  </div>
</div>
<div class="col col-6 button-variant">
  <div class="container">
    <p class="col-header">.button-size-sm</p>
    <p><a href="#" class="button button-size-sm">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-size-md</p>
    <p><a href="#" class="button button-size-md">Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-size-lg</p>
    <p><a href="#" class="button button-size-lg">Button</a></p>
  </div>
</div>
<div class="col col-6 button-variant">
  <div class="container">
    <p class="col-header">.button-icon</p>
    <p><a href="#" class="button button-size-md variant-icon"><span class="icon"></span>Button</a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-dropdown</p>
    <p><a href="#" class="button button-size-md variant-chevron">Button<span class="icon icon-chevron"></span></a></p>
  </div>
  <div class="container">
    <p class="col-header">.button-icon-only</p>
    <p><a href="#" class="button button-size-md variant-icon-only"><span class="icon"></span></a></p>
  </div>
</div>

grid

The general rule is always use even numbers. More precisely use a scale of 4/8px increments.

From sketch canvas size and grid, to element height, width
 and position. To breakpoints, margin, padding, gutters, border radius, box shadow.

<div class="col col-2">
  <div class="container">
    <p>The general rule is always use even numbers. More precisely use a scale of 4/8px increments.</p>
  </div>
  <div class="container">
    <p>From sketch canvas size and grid, to element height, width
 and position. To breakpoints, margin, padding, gutters, border radius, box shadow.</p>
  </div>
</div>
<div class="col col-2">
  <div class="container">
    <div class="container-grid">
      <div class="row col">
        <div class="column"></div>
      </div>
      <div class="row col">
        <div class="column"></div>
      </div>
      <div class="row col">
        <div class="column"></div>
      </div>
      <div class="row col">
        <div class="column"></div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="container-grid">
      <div class="row col">
        <div class="column"></div>
      </div>
      <div class="row col-2">
        <div class="column"></div>
        <div class="column"></div>
      </div>
      <div class="row col-2">
        <div class="column"></div>
        <div class="column"></div>
      </div>
      <div class="row col">
        <div class="column"></div>
      </div>
    </div>
  </div>
</div>

icon

16px fill

20px fill

20px outline

24px fill

24px outline

24px video overlay

120px outline

<p>16px fill</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-16 icon-chevron-down" title="Chevron Down"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-chevron-left" title="Chevron Left"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-chevron-right" title="Chevron Right"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-chevron-up" title="Chevron Up"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-cross" title="Cross"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-info" title="Info"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-link" title="Link"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-lock" title="Lock"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-maximize" title="Maximize"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-minimize" title="Minimize"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-pop-up-list" title="Popup List"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-16 icon-spacer" title="Spacer"></div>
  </div>
</div>

<p>20px fill</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-20 icon-alert icon-fill" title="Alert Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-app-android-fill" title="App Android Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-app-ios-fill" title="App iOS Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-apps icon-fill" title="Apps Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-calendar icon-fill" title="Calendar Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-coachable icon-fill" title="Coaching Coachable Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-coached icon-fill" title="Coaching Coached"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-locked icon-fill" title="Coaching Locked Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-pending icon-fill" title="Coaching Pending Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-uncoachable icon-fill" title="Coaching Uncoachable"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-company icon-fill" title="Company Filled"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-cross icon-fill" title="Cross Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-diagnostics icon-fill" title="Diagnostics Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-documents icon-fill" title="Documents Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-driver icon-fill" title="Driver Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-location icon-fill" title="Location Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-logs icon-fill" title="Logs Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-messages icon-fill" title="Messages Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-minus icon-fill" title="Minus Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-overview icon-fill" title="Overview Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-plus icon-fill" title="Plus Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-printer icon-fill" title="Printer Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-scorecard icon-fill" title="Scorecard Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-stopwatch icon-fill" title="Stopwatch Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-vehicle icon-fill" title="Vehicle Fill"></div>
  </div>

</div>

<p>20px outline</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-20 icon-16-hour-exception" title="16 Hour Exception"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-account-security" title="Account Security"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-add" title="Add"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-alert" title="Alert"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-apps" title="Apps"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-beta" title="Beta"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-broadcast" title="Broadcast"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-bulb" title="Bulb"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-calculator" title="Calculator"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-calendar" title="Calendar"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-cycle" title="Cycle"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-dashcam" title="Dashcam"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-coachable" title="Coaching Coachable"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-coached" title="Coaching Coached"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-locked" title="Coaching Locked"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-pending" title="Coaching Pending"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-coaching-uncoachable" title="Coaching Uncoachable"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-company" title="Company"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-compass" title="Compass"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-costs" title="Costs"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-cross" title="Cross"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-cycle" title="Cycle"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-dashcam" title="Dashcam"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-dashcam-disconnect" title="Dashcam Disconnect"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-dashcam-eld" title="Dashcam Eld"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-dashcam-recall" title="Dashcam Recall"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-dashcam-video" title="Dashcam Video"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-developers" title="Developers"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-diagnostics" title="Diagnostics"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-documents" title="Documents"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-download" title="Download"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-driver" title="Driver"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-location" title="Location"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-logs" title="Logs"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map" title="Map"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-message" title="Message"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-message-check" title="Message Check"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-message-send" title="Message Send"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-messages" title="Messages"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-minus" title="Minus"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-note" title="Note"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-odometer" title="Odometer"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-overview" title="Overview"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-phone" title="Phone"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-phone-receiver" title="Phone Reciever"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-plus" title="Plus"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-printer" title="Printer"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-proximity" title="Proximity"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-receipt" title="Receipt"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-refresh" title="Refresh"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-remark" title="Remark"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-remove" title="Remove"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-reports" title="Reports"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-rotate" title="Rotate"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-scorecard" title="Scorecard"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-search" title="Search"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-settings" title="Settings"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-sign" title="Sign"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-slide-in" title="Slide In"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-slide-out" title="Slide Out"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-speed" title="Speed"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-stopwatch" title="Stopwatch"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-tag" title="Tag"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-time" title="Time"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-trash" title="Trash"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-unlock" title="Unlock"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-upload" title="Upload"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-upgrade" title="Upgrade"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-vehicle" title="Vehicle"></div>
  </div>
</div>

<p>24px fill</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-24 icon-avatar icon-fill" title="Avatar Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-cross icon-fill" title="Cross Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-event-acceleration" title="Event Acceleration Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-event-brake" title="Event Brake Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-event-collision" title="Event Collision Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-event-corner" title="Event Corner Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-event-recall" title="Event Recall Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-event-speeding" title="Event Speeding Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-minus icon-fill" title="Minus Fill"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-plus icon-fill" title="Plus Fill"></div>
  </div>
</div>

<p>24px outline</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-24 icon-avatar" title="Avatar"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-clock" title="Clock"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-cross" title="Cross"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-minus" title="Minus"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-plus" title="Plus"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-redo" title="Redo"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-referral" title="Referral"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-undo" title="Undo"></div>
  </div>
</div>

<p>24px video overlay</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-24 icon-overlay-compass-dynamic" title="Overlay Compass Dynamic"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-overlay-cross" title="Overlay Cross"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-overlay-redo" title="Overlay Redo"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-overlay-undo" title="Overlay Undo"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-overlay-video-download" title="Overlay Video Download"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-overlay-video-fullscreen" title="Overlay Video Fullscreen"></div>
  </div>
</div>

<p>120px outline</p>
<div class="col col-6">
  <div class="container">
    <div class="icon icon-size-120 icon-alert" title="Alert"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-archive" title="Archive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-dashcam" title="Dashcam"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-dashcam-recall" title="Dashcam Recall"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-developers" title="Developers"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-driver" title="Driver"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-driver-add" title="Driver Add"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-driver-invite" title="Driver Invite"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-error" title="Error"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-file" title="File"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-file-import" title="File Import"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-file-upload" title="File Upload"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-geofence" title="Geofence"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-group" title="Group"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-ifta" title="IFTA"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-location" title="Location"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-location-unavailable" title="Location Unavailable"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-maintenance" title="Maintenance"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-message" title="Message"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-overview" title="Overview"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-pending" title="Pending"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-phone" title="Phone"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-record" title="Record"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-report" title="Report"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-report-locked" title="Report Locked"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-scorecard" title="Scorecard"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-scorecard-leader" title="Scorecard Leader"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-search" title="Search"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-sign" title="Sign"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-stopwatch" title="Stopwatch"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-success" title="Success"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-unknown" title="Unknown"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-vehicle" title="Vehicle"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-video-pending" title="Video Pending"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-120 icon-warning" title="Warning"></div>
  </div>
</div>

Default

Link

Link

Link

Link

Subtle

Link

Link

Link

Link

Delete

Link

Link

Link

Link

Add

+ Link

+ Link

+ Link

+ Link

<div class="col col-4">
  <div class="container">
    <p>Default</p>
    <p><a href="#" class="link">Link</a></p>
    <p><a href="#" class="link link-hover">Link</a></p>
    <p><a href="#" class="link link-active link-focus">Link</a></p>
    <p><a href="#" class="link link-disabled">Link</a></p>
  </div>
  <div class="container">
    <p>Subtle</p>
    <p><a href="#" class="link link-subtle">Link</a></p>
    <p><a href="#" class="link link-subtle link-hover">Link</a></p>
    <p><a href="#" class="link link-subtle link-active link-focus">Link</a></p>
    <p><a href="#" class="link link-subtle link-disabled">Link</a></p>
  </div>
  <div class="container">
    <p>Delete</p>
    <p><a href="#" class="link link-delete">Link</a></p>
    <p><a href="#" class="link link-delete link-hover">Link</a></p>
    <p><a href="#" class="link link-delete link-active link-focus">Link</a></p>
    <p><a href="#" class="link link-delete link-disabled">Link</a></p>
  </div>
  <div class="container">
    <p>Add</p>
    <p><a href="#" class="link link-add">+ Link</a></p>
    <p><a href="#" class="link link-add link-hover">+ Link</a></p>
    <p><a href="#" class="link link-add link-active link-focus">+ Link</a></p>
    <p><a href="#" class="link link-add link-disabled">+ Link</a></p>
  </div>
</div>

type

Heading 1

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.

Heading 2

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.

Heading 3

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.

Heading 4

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.

Heading 5

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.

Heading 6

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.

Ordered List

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Unordered List

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1
<div class="col col-2">
  <div class="container">
    <h1>Heading 1</h1>
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.</p>
    <h2>Heading 2</h2>
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.</p>
    <h3>Heading 3</h3>
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.</p>
  </div>
  <div class="container">
    <h4>Heading 4</h4>
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.</p>
    <h5>Heading 5</h5>
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.</p>
    <h6>Heading 6</h6>
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis fringilla elementum. Morbi magna ex, posuere eu egestas nec, ultrices sed felis. Praesent mauris lorem, laoreet vitae eros et, dignissim tristique erat.</p>
  </div>
  <div class="container">
    <h4>Ordered List</h4>
    <ol>
      <li>list item 1</li>
      <li>list item 1
        <ol>
          <li>list item 2</li>
          <li>list item 2
            <ol>
              <li>list item 3</li>
              <li>list item 3</li>
            </ol>
          </li>
          <li>list item 2</li>
          <li>list item 2</li>
        </ol>
      </li>
      <li>list item 1</li>
      <li>list item 1</li>
    </ol>
  </div>
  <div class="container">
    <h4>Unordered List</h4>
    <ul>
      <li>list item 1</li>
      <li>list item 1
        <ul>
          <li>list item 2</li>
          <li>list item 2
            <ul>
              <li>list item 3</li>
              <li>list item 3</li>
            </ul>
          </li>
          <li>list item 2</li>
          <li>list item 2</li>
        </ul>
      </li>
      <li>list item 1</li>
      <li>list item 1</li>
    </ul>
  </div>
</div>

component

badge

Initial

D
On
Off
SB
WT

Word

Major
Minor
Beta

Count

+99
<div class="col col-8">
  <div class="container">
    <p>Initial</p>
    <div class="badge badge-driving">D</div>
    <div class="badge badge-on-duty">On</div>
    <div class="badge badge-off-duty">Off</div>
    <div class="badge">SB</div>
    <div class="badge">WT</div>
  </div>
  <div class="container">
    <p>Word</p>
    <div class="badge badge-word badge-major">Major</div>
    <div class="badge badge-word badge-minor">Minor</div>
    <div class="badge badge-word badge-beta">Beta</div>
  </div>
  <div class="container">
    <p>Count</p>
    <div class="badge badge-count">+99</div>
  </div>
</div>

button row

.button-row

Button Button

.button-row .button-row-split

Button Button 
<div class="col">
  <div class="container">
    <p>.button-row</p>
    <div class="button-row">
      <a href="#" class="button button-size-md">Button</a>
      <a href="#" class="button button-size-md">Button</a>
    </div>
  </div>
  <div class="container">
    <p>.button-row .button-row-split</p>
    <div class="button-row button-row-split">
      <a href="#" class="button button-size-md button-subtle">Button</a>
      <a href="#" class="button button-size-md">Button</a>
    </div>
  </div>
</div>

card

.card

Card Header
Card Sub Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices est pretium ultricies eleifend. Fusce in dolor vitae sem eleifend sollicitudin et sed lorem. Vestibulum iaculis pharetra ligula, nec congue diam mattis ut.

Cras dictum ac orci non scelerisque. Etiam et commodo est, ac vehicula sem. Ut ullamcorper molestie porttitor.

.card .card-list

Card Header
Label
Value
Label
Value
Label
Value
Label
Value
<div class="col col-2">
  <div class="container">
    <p class="col-header">.card</p>
    <div class="card">
      <div class="card-header">
        Card Header
      </div>
      <div class="card-content">
        <div class="card-body">
          <div class="card-sub-header">
            Card Sub Header
          </div>
          <div class="card-main-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices est pretium ultricies eleifend.
              Fusce in dolor vitae sem eleifend sollicitudin et sed lorem. Vestibulum iaculis pharetra ligula, nec congue
              diam mattis ut.</p>
            <p>Cras dictum ac orci non scelerisque. Etiam et commodo est, ac vehicula sem. Ut ullamcorper molestie
              porttitor.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <p class="col-header">.card .card-list</p>
    <div class="card">
      <div class="card-header">
        Card Header
      </div>
      <div class="card-content">
        <div class="card-body">
          <div class="card-table">
            <div class="card-table-row">
              <div class="table-cell table-cell-head">Label</div>
              <div class="table-cell">Value</div>
            </div>
            <div class="card-table-row">
              <div class="table-cell table-cell-head">Label</div>
              <div class="table-cell">Value</div>
            </div>
            <div class="card-table-row">
              <div class="table-cell table-cell-head">Label</div>
              <div class="table-cell">Value</div>
            </div>
            <div class="card-table-row">
              <div class="table-cell table-cell-head">Label</div>
              <div class="table-cell">Value</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

filter

Single Select (Closed)

Single Select (Open)

  • List item 1
  • List item 3
  • List item 4
  • List item 5
  • List item 6

Multi-Select (Open)

  • Selected Item 1
  • Selected Item 2
  • Groups
  • Item
  • Item

Typeable Multi-Select

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Typeable Multi-Select (Value)

Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
<div class="col col-6">
  <div class="container">
    <p>Single Select <span class="sub-text ">(Closed)</span></p>
    <div class="filter">
      <div class="input-container">
        <input class="active-item single-select-closed" placeholder="Filter by..." type="text" value="List Item 2" disabled/>
       <span class="icon icon-size-16 icon-chevron-down"></span>
      </div>
    </div>
  </div>
  <div class="container">
    <p>Single Select <span class="sub-text">(Open)</span></p>
    <div class="filter">
      <div class="input-container">
        <input class="active-item single-select" placeholder="Filter by..." type="text" value="List Item 2"/>
        <span class="icon icon-size-16 icon-chevron-down"></span>
      </div>
      <ul class="filter-dropdown">
        <li>List item 1</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
        <li>List item 6</li>
      </ul>
    </div>
  </div>
  <div class="container">
    <p>Multi-Select <span class="sub-text">(Open)</span></p>
    <div class="filter">
      <input class="multi-input" value="2 Selected" type="text" disabled="" />
      <ul class="filter-dropdown radio-list">
        <li class="selected">
          <input type="checkbox" name="item1" checked>
          Selected Item 1
        </li>
        <li class="selected">
          <input type="checkbox" name="item1" checked>
          Selected Item 2
        </li>
        <li class="filter-title">Groups</li>
        <li>
          <input type="checkbox" name="item1">
          Item
        </li>
        <li>
          <input type="checkbox" name="item1">
          Item
        </li>
      </ul>
    </div>
  </div>
  <div class="container">
    <p>Typeable Multi-Select</p>
    <div class="filter">
      <div class="typeable-select">
        <div class="pill-container">
        </div>
        <input type="text" value="Ite"/>
      </div>
      <ul class="filter-dropdown typeable-select-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
  </div>
  <div class="container">
    <p>Typeable Multi-Select <span class="sub-text">(Value)</span></p>
    <div class="filter">
      <div class="typeable-select">
        <div class="pill-container">
          <div class="pill">
            <span class="pill-text">Item 1</span>
            <span class="icon icon-size-16 icon-cross"></span>
          </div>
        </div>
        <input type="text" disabled/>
      </div>
      <ul class="filter-dropdown typeable-select-list">
        <li class="active-item">Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
  </div>
</div>

input

<div class="input-components">
  <label class="input-label">Default</label>
  <input class="default-input" type="text" name="" placeholder="Value...">

  <label class="input-label">Disabled State</label>
  <input class="disabled-input" type="text" name="" placeholder="Disabled" disabled>

  <label class="input-label">Required *</label>
  <input class="required-input" type="text" name="" placeholder="Required" required>

  <label class="input-label" >Error State</label>
  <input class="error-input" type="text" name="" placeholder="Error text">

  <label class="input-label" >Success state</label>
  <input class="success-input" type="text" name="" value="Success text">
</div>

loading state

<svg class="loading-state-logo" viewBox="0 0 626 602" style="backface-visibility: hidden;-webkit-backface-visibility: hidden;">
  <g id="KT-Logo-Animation" fill="none" fill-rule="evenodd">
    <path style="stroke-width: 20;" stroke-linecap="round" d="M353.130236,589 L610,589 L610,354.697796 L610,15 L353.067665,15 C336.89618,15 323.462177,27.1564563 322.279585,42.8802701 C316.748305,116.389175 304.471867,326.073564 322.335899,561.122779 C323.531005,576.840495 336.961879,589 353.130236,589" id="right" stroke="#BEC8D1" stroke-width="33" transform="translate(461.500000, 302.000000) scale(-1, 1) translate(-461.500000, -302.000000) "></path>
    <polygon id="Fill-8" fill="#BEC8D1" points="379 146 523 146 523 188.162162 472.165767 188.162162 472.165767 458 428.480383 458 428.480383 188.162162 379 188.357052"></polygon>
    <path style="stroke-width: 20;" stroke-linecap="round" d="M56.1302361,589 L313,589 L313,354.697796 L313,15 L56.0676651,15 C39.8961797,15 26.4621773,27.1564563 25.2795846,42.8802701 C19.7483047,116.389175 7.47186652,326.073564 25.3358986,561.122779 C26.5310054,576.840495 39.9618793,589 56.1302361,589" id="left" stroke="#BEC8D1" stroke-width="13"></path>
    <polygon id="K" fill="#BEC8D1" points="155.176893 333.644576 141.911554 362.170991 141.911554 458 99 458 99 146 141.911554 146 141.911554 281.944079 198.088446 146 241 146 181.315385 285.060626 241 458 196.91816 458"></polygon>
  </g>
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript">

var pathEls = document.querySelectorAll('path');
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute('stroke-dashoffset', offset);
    
    anime({
      targets: pathEl,
      strokeDashoffset: [offset, 0],
      duration: 2000,
      delay: 500,
      loop: true,
      direction: 'alternate',
      easing: 'easeInOutSine',
      autoplay: true
    });
}
</script>

map

Map Card

Card Title

Map Driver screenshot

20x20 icons

24x24 icons

<p>Map Card</p>
<div class="card-map">
  <h3 class="card-title">Card Title</h3>
  <img class="card-map-driver" src="images/misc/map.png" alt="Map Driver screenshot">
</div>

<p>20x20 icons</p>
<div class="col col-16">
  <div class="container">
    <div class="icon icon-size-20 icon-map-event-acceleration-timeline" title="Map Event Acceleration Timeline"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-event-brake-timeline" title="Map Event Brake Timeline"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-event-collision-timeline" title="Map Event Collision Timeline"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-event-corner-timeline" title="Map Event Corner Timeline"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-event-recall-timeline" title="Map Event Recall Timeline"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-event-speeding-timeline" title="Map Event Speeding Timeline"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-vehicle-driving-mark" title="Map Vehicle Driving Mark"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-20 icon-map-vehicle-driving-mark-eld" title="Map Vehicle Driving Mark Eld"></div>
  </div>
</div>

<p>24x24 icons</p>
<div class="col col-16">
  
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-acceleration-active" title="Map Event Acceleration Active"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-acceleration-inactive" title="Map Event Acceleration Inactive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-brake-active" title="Map Event Brake Active"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-brake-inactive" title="Map Event Brake Inactive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-collision-active" title="Map Event Collision Active"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-collision-inactive" title="Map Event Collision Inactive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-corner-active" title="Map Event Corner Active"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-corner-inactive" title="Map Event Corner Inactive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-recall-active" title="Map Event Recall Active"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-recall-inactive" title="Map Event Recall Inactive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-speeding-active" title="Map Event Speeding Active"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-event-speeding-inactive" title="Map Event Speeding Inactive"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-vehicle-disabled" title="Map Vehicle Disabled"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-vehicle-driving" title="Map Vehicle Driving"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-vehicle-driving-direction" title="Map Vehicle Driving Direction"></div>
  </div>
  <div class="container">
    <div class="icon icon-size-24 icon-map-vehicle-stationary" title="Map Vehicle Stationary"></div>
  </div>
</div>

modal

Position:

Always horizontally and vertically centered in viewport

Overlay:

$grey-80, opacity: 0.8


Animation:

0.3s, ease

Primary Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh diam, venenatis id ultrices vitae.

Standard Modal

Title go here

Subtitle go here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh diam, venenatis id ultrices vitae.

Button Button 
<div class="col col-4">
  <div class="container">
    <p class="variant-sm"><strong>Position:</strong></p>
    <p class="variant-sm">Always horizontally and vertically centered in viewport</p>
  </div>
  <div class="container">
    <p class="variant-sm"><strong>Overlay:</strong></p>
    <p class="variant-sm">$grey-80, opacity: 0.8
</p>
  </div>
  <div class="container">
    <p class="variant-sm"><strong>Animation:</strong></p>
    <p class="variant-sm">0.3s, ease</p>
  </div>
</div>

<div class="col">
  <div class="container">
    <p>Primary Modal</p>
    <div class="bg-overlay">
      <div class="modal modal-primary">
        <a href="#"><span class="icon icon-size-20 icon-close-grey"></span></a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh diam, venenatis id ultrices vitae.</p>
      </div>
    </div>
  </div>
</div>

<div class="col">
  <div class="container">
    <p>Standard Modal</p>
    <div class="bg-overlay">
      <div class="modal modal-standard">
        <a href="#"><span class="icon icon-size-20 icon-close-grey"></span></a>
        <div class="modal-header">
          <p class="modal-title">Title go here</p>
          <p class="modal-subtitle">Subtitle go here</p>
        </div>
        <div class="modal-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh diam, venenatis id ultrices vitae.</p>
        </div>
        <div class="modal-footer">
          <div class="button-row button-row-split">
            <a href="#" class="button button-size-md button-subtle">Button</a>
            <a href="#" class="button button-size-md">Button</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

notification

Single

Info Message. Consequatur facere deleniti link. Cumque ducimus maiores nemo.
Success Message. Totam officiis dolorum voluptatibus link. Maxime molestiae iste.
Warning Message. Numquam quos fuga quam suscipit link. Sapiente perferendis magnam.
Error Message. Numquam quos fuga quam suscipit link. Sapiente perferendis magnam.

Multi

Notification Title

Body text to go here, perhaps include a link. Totam officiis dolorum voluptatibus maxime molestiae.

<p>Single</p>
<div class="notification notification-info">
  <a href="#"><span class="icon icon-size-16 icon-cross-blue"></span></a>
  <strong>Info Message.</strong> Consequatur facere deleniti <a href="#">link</a>. Cumque ducimus maiores nemo.
</div>

<div class="notification notification-success">
  <a href="#"><span class="icon icon-size-16 icon-cross-green"></span></a>
  <strong>Success Message.</strong> Totam officiis dolorum voluptatibus <a href="#">link</a>. Maxime molestiae iste.
</div>

<div class="notification notification-warning">
  <a href="#"><span class="icon icon-size-16 icon-cross-yellow"></span></a>
  <strong>Warning Message.</strong> Numquam quos fuga quam suscipit <a href="#">link</a>. Sapiente perferendis magnam.
</div>

<div class="notification notification-error">
  <a href="#"><span class="icon icon-size-16 icon-cross-red"></span></a>
  <strong>Error Message.</strong> Numquam quos fuga quam suscipit <a href="#">link</a>. Sapiente perferendis magnam.
</div>

<p>Multi</p>
<div class="notification notification-info notification-with-heading">
  <a href="#"><span class="icon icon-size-16 icon-cross-blue"></span></a>
  <strong>Notification Title</strong>
  <p>Body text to go here, perhaps include a <a href="#">link</a>. Totam officiis dolorum voluptatibus maxime molestiae.</p>
</div>

pagination

Header/Page title-bar item level:

Detail page, card-table normal:

<div class="col col-4">
    <div class="container">
        <p class="variant-sm">Header/Page title-bar item level:</p>
        <div class="pagination">
            <span class="pagination-label">Page 1 of 30</span>
            <a href="#" class="button button-left button-size-md  button-subtle"><span class="icon icon-left"></span></a>
            <a href="#" class="button button-right button-size-md button-subtle"><span class="icon icon-right"></span></a>
        </div>
    </div>
    <div class="container">
        <p class="variant-sm">Detail page, card-table normal:</p>
        <div class="pagination">
            <span class="pagination-label">Page 1 of 3</span>
            <a href="#" class="button button-size-md  button-round">
                <span class="icon icon-left"></span>
            </a>
            <a href="#" class="button button-size-md button-round">
                <span class="icon icon-right"></span>
            </a>
        </div>
    </div>
</div>

popover

Displayed on click, can contain paragraphs and buttons.

Multi Line + Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Multi Line + Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

Multi Line + Multi Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button Button

Multi Parapgrah + Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

For position/orientation see Tooltip Component. 

<p>Displayed on click, can contain paragraphs and buttons.</p>
<div class="col col-4">
  <div class="container">
    <p>Multi Line + Link</p>
    <div class="popover popover-top-left">
      <a href="#"><span class="icon icon-size-20 icon-close-grey"></span></a>
      <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <p>Multi Line + Button</p>
    <div class="popover popover-top-left">
      <a href="#sg-markup-component-popover-html">
        <span class="icon icon-size-20 icon-close-grey"></span>
      </a>
      <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="button-row">
          <a href="#" class="button button-size-sm">Button</a>
        </div>
    </div>
  </div>
  <div class="container">
    <p>Multi Line + Multi Button</p>
    <div class="popover popover-top-left">
      <a href="#sg-markup-component-popover-html"><span class="icon icon-size-20 icon-close-grey"></span></a>
      <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="button-row button-row-split">
        <a href="#" class="button button-size-sm button-subtle">Button</a>
        <a href="#" class="button button-size-sm">Button</a>
      </div>
    </div>
  </div>
  <div class="container">
    <p>Multi Parapgrah + Heading</p>
    <div class="popover popover-top-left">
      <a href="#"><span class="icon icon-size-20 icon-close-grey"></span></a>
      <div class="popover-content">
        <p class="popover-heading">Heading</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</div>

<p>For position/orientation see <a href="#sg-markup-component-tooltip-html">Tooltip Component</a>.
</p>

progress

100% A progress displaying 100%.

85% A progress displaying 85%.

50% A progress displaying 50%.

0% A progress displaying 0%.

<p><progress value="100" max="100">100%</progress> A progress displaying 100%.</p>
<p><progress value="85" max="100">85%</progress> A progress displaying 85%.</p>
<p><progress value="50" max="100">50%</progress> A progress displaying 50%.</p>
<p><progress value="0" max="100">0%</progress> A progress displaying 0%.</p>

radial gauges

25% Text here 50% Text here 75% Text here 100% Text here
BREAK08:00 DRIVE11:00 SHIFT14:00 CYCLE70:00 
<div class="radial-progress">
  <svg height="95" width="100">
    <g data-name="Layer 2" id="Layer_2">
        <path class="primary-fill" d="M35,0A35,35,0,1,1,0,35,35,35,0,0,1,35,0m0,5A30,30,0,1,0,65,35,30,30,0,0,0,35,5Z"></path>
        <path class="secondary-fill"  d="M65,35A30,30,0,0,0,35,5V0A35,35,0,0,1,70,35Z"></path>
    </g>
    <text text-anchor="middle" x="35" y="40">25%</text>
    <text dy=".35em" text-anchor="middle" transform="translate(35, 85)">Text here</text>
  </svg>
  <svg height="95" width="100">
    <g data-name="Layer 2" id="Layer_2">
      <g data-name="Layer 1" id="Layer_1-2">
        <path class="primary-fill" d="M35,0A35,35,0,1,1,0,35,35,35,0,0,1,35,0m0,5A30,30,0,1,0,65,35,30,30,0,0,0,35,5Z"></path>
        <path class="secondary-fill" d="M35,65A30,30,0,0,0,35,5V0a35,35,0,0,1,0,70Z"></path>
      </g>
    </g>
    <text text-anchor="middle" x="35" y="40">50%</text>
    <text dy=".35em" text-anchor="middle" transform="translate(35, 85)">Text here</text>
  </svg> 
  <svg height="95" width="100">
    <g data-name="Layer 2" id="Layer_2">
      <g data-name="Layer 1" id="Layer_1-2">
        <path class="primary-fill" d="M35,0A35,35,0,1,1,0,35,35,35,0,0,1,35,0m0,5A30,30,0,1,0,65,35,30,30,0,0,0,35,5Z"></path>
        <path class="secondary-fill" d="M5,35A30,30,0,1,0,35,5V0A35,35,0,1,1,0,35Z"></path>
      </g>
    </g>
    <text text-anchor="middle" x="35" y="40">75%</text>
    <text dy=".35em" text-anchor="middle" transform="translate(35, 85)">Text here</text>
  </svg>
  <svg height="95" width="100">
    <g data-name="Layer 2" id="Layer_2">
      <g data-name="Layer 1" id="Layer_1-2">
        <path class="primary-fill" d="M35,0A35,35,0,1,1,0,35,35,35,0,0,1,35,0m0,5A30,30,0,1,0,65,35,30,30,0,0,0,35,5Z"></path>
        <path class="secondary-fill" d="M35,0A35,35,0,1,1,0,35,35,35,0,0,1,35,0m0,5A30,30,0,1,0,65,35,30,30,0,0,0,35,5Z"></path>
      </g>
    </g>
    <text text-anchor="middle" x="35" y="40">100%</text>
    <text dy=".35em" text-anchor="middle" transform="translate(35, 85)">Text here</text>
  </svg> 
</div>

<div class="radial-gauges">
  <hos-clock ><svg class="radial-break" width="120" height="120"><g transform="translate(60, 60)"><path class="track" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path><path class="meter" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path></g><text style="font-weight:600;font-size:0.8571rem;" transform="translate(60, 60)" text-anchor="middle" dy="-1.2em">BREAK</text><text style="font-weight: 400;font-size: 1.714rem;" transform="translate(60, 60)" text-anchor="middle" dy="0.60em">08:00</text></svg></hos-clock>

  <hos-clock class="radial-drive" label="DRIVE" _nghost-c15=""><svg width="120" height="120"><g transform="translate(60, 60)"><path class="track" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path><path class="meter" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path></g><text style="font-weight: 600;font-size: 0.8571rem;" transform="translate(60, 60)" text-anchor="middle" dy="-1.2em">DRIVE</text><text style="font-weight: 400;font-size: 1.714rem;" transform="translate(60, 60)" text-anchor="middle" dy="0.60em">11:00</text></svg></hos-clock>

  <hos-clock class="radial-shift" label="SHIFT" ><svg width="120" height="120"><g transform="translate(60, 60)"><path class="track" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path><path class="meter" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path></g><text style="font-weight: 600;font-size: 0.8571rem;" transform="translate(60, 60)" text-anchor="middle" dy="-1.2em">SHIFT</text><text style="font-weight: 400;font-size: 1.714rem;" transform="translate(60, 60)" text-anchor="middle" dy="0.60em">14:00</text></svg></hos-clock>

  <hos-clock class="radial-cycle" data-e2e="cycle" label="CYCLE" _nghost-c15=""><svg width="120" height="120"><g transform="translate(60, 60)"><path class="track" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path><path class="meter" d="M3.67394039744206e-15,-60A60,60,0,1,1,-3.67394039744206e-15,60A60,60,0,1,1,3.67394039744206e-15,-60M-1.0654427152581972e-14,-58A58,58,0,1,0,1.0654427152581972e-14,58A58,58,0,1,0,-1.0654427152581972e-14,-58Z"></path></g><text style="font-weight: 600;font-size: 0.8571rem;" transform="translate(60, 60)" text-anchor="middle" dy="-1.2em">CYCLE</text><text style="font-weight: 400;font-size: 1.714rem;" transform="translate(60, 60)" text-anchor="middle" dy="0.60em">70:00</text></svg></hos-clock>
</div>

search

<div class="container container-search">
  <input class="input input-icon input-search" type="text" placeholder="Search...">
</div>

tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis in urna id iaculis. Suspendisse non dictum tellus.

Nunc interdum augue et ante laoreet, quis pulvinar lorem suscipit. Nunc efficitur vestibulum eros. Nulla ultrices orci sed risus accumsan pharetra a ut massa. Etiam eget nisl odio. Quisque ac felis at lorem condimentum posuere dignissim sed purus.

Duis viverra euismod enim, eget lobortis lacus iaculis id. Cras sit amet tellus odio.

<div class="col">
  <div class="container">
    <div class="tabs">
      <button class="tab-link active" onclick="openTab(event, 'item1')">Item 1</button>
      <button class="tab-link" onclick="openTab(event, 'item2')">Item 2</button>
      <button class="tab-link" onclick="openTab(event, 'item3')">Item 3</button>
    </div>
    <div id="item1" class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis in urna id iaculis. Suspendisse non dictum tellus.</p>
    </div>
    <div id="item2" class="tab-content">
      <p>Nunc interdum augue et ante laoreet, quis pulvinar lorem suscipit. Nunc efficitur vestibulum eros. Nulla ultrices orci sed risus accumsan pharetra a ut massa. Etiam eget nisl odio. Quisque ac felis at lorem condimentum posuere dignissim sed purus.</p>
    </div>
    <div id="item3" class="tab-content">
      <p>Duis viverra euismod enim, eget lobortis lacus iaculis id. Cras sit amet tellus odio.</p>
    </div>
  </div>
</div>

<script>
  function openTab(evt, itemNo) {

    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tab-link");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(itemNo).style.display = "block";
    evt.currentTarget.className += " active";

  }
</script>

table

Row heading table (4 columns)

Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell

Column headings table (6 columns)

Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
Heading E
Table Cell
Table Cell
Table Cell
Heading F
Table Cell
Table Cell
Table Cell

Collapsible (by column)

Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell

Collapsible (by row)

Table Header
Table Cell
Table Cell
Table Cell
Table Header
Table Cell
Table Cell
Table Cell
<p>Row heading table (4 columns)</p>

<div class="table table-col-4">

  <div class="table-cell table-cell-head">Table Header</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>

  <div class="table-cell table-cell-head">Table Header</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>

  <div class="table-cell table-cell-head">Table Header</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>

</div>

<p>Column headings table (6 columns)</p>

<div class="table table-col-6">

  <div style="order:1;" class="table-cell table-cell-head">
    Table Header
    <a><span class="icon icon-size-16 icon-chevron-up"></span></a>
  </div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell">Table Cell</div>
  <div style="order:4;" class="table-cell">Table Cell</div>

  <div style="order:1;" class="table-cell table-cell-head">
    Table Header
    <a><span class="icon icon-size-16 icon-chevron-down"></span></a>
  </div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell">Table Cell</div>
  <div style="order:4;" class="table-cell">Table Cell</div>

  <div style="order:1;" class="table-cell table-cell-head">Table Header</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell">Table Cell</div>
  <div style="order:4;" class="table-cell">Table Cell</div>

  <div style="order:1;" class="table-cell table-cell-head">Table Header</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell">Table Cell</div>
  <div style="order:4;" class="table-cell">Table Cell</div>

  <div style="order:1;" class="table-cell table-cell-head">Heading E</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell">Table Cell</div>
  <div style="order:4;" class="table-cell">Table Cell</div>

  <div style="order:1;" class="table-cell table-cell-head">Heading F</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell">Table Cell</div>
  <div style="order:4;" class="table-cell">Table Cell</div>

</div>


<p>Collapsible (by column)</p>
<div class="table table-col-4 table-collapse">

  <div style="order:0;" class="table-cell table-cell-head">Table Header</div>
  <div style="order:1;" class="table-cell">Table Cell</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell table-cell-foot">Table Cell</div>

  <div style="order:0;" class="table-cell table-cell-head">Table Header</div>
  <div style="order:1;" class="table-cell">Table Cell</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell table-cell-foot">Table Cell</div>

  <div style="order:0;" class="table-cell table-cell-head">Table Header</div>
  <div style="order:1;" class="table-cell">Table Cell</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell table-cell-foot">Table Cell</div>

  <div style="order:0;" class="table-cell table-cell-head">Table Header</div>
  <div style="order:1;" class="table-cell">Table Cell</div>
  <div style="order:2;" class="table-cell">Table Cell</div>
  <div style="order:3;" class="table-cell table-cell-foot">Table Cell</div>


</div>

<p>Collapsible (by row)</p>
<div class="table table-col-4 table-collapse">

  <div class="table-cell table-cell-head">Table Header</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell table-cell-foot">Table Cell</div>

  <div class="table-cell table-cell-head">Table Header</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell">Table Cell</div>
  <div class="table-cell table-cell-foot">Table Cell</div>

</div>

toggle

Toggle Single

On Off

Toggle Multi

On Off Off

Toggle with Icon

On Off

Toggle Icon Only

Toggle Multi Icon Only

Toggle Compact

<div class="col col-2">

  <div class="container">
    <p class="col-header">Toggle Single</p>
    <p>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-left toggle-button-size-md">On</a>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-right toggle-button-size-md toggle-button-subtle">Off</a>
    </p>
  </div>

  <div class="container">
    <p class="col-header">Toggle Multi</p>
    <p>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-left toggle-button-size-md">On</a>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-center toggle-button-size-md toggle-button-subtle">Off</a>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-right toggle-button-size-md toggle-button-subtle">Off</a>
    </p>
  </div>

  <div class="container">
    <p class="col-header">Toggle with Icon</p>
    <p>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-left toggle-button-size-md"><span class="icon"></span>On</a>
      <a href="#" class="toggle-button toggle-button-wide toggle-button-right toggle-button-size-md toggle-button-subtle"><span class="icon icon-grey"></span>Off</a>
    </p>
  </div>

  <div class="container">
  </div>

  <div class="container">
    <p class="col-header">Toggle Icon Only</p>
    <p>
      <a href="#" class="toggle-button toggle-button-left toggle-button-size-md"><span class="icon"></span></a>
      <a href="#" class="toggle-button toggle-button-right toggle-button-size-md toggle-button-subtle"><span class="icon icon-grey"></span></a>
    </p>
  </div>

  <div class="container">
    <p class="col-header">Toggle Multi Icon Only</p>
    <p>
      <a href="#" class="toggle-button toggle-button-left toggle-button-size-md"><span class="icon"></span></a>
      <a href="#" class="toggle-button toggle-button-center toggle-button-size-md toggle-button-subtle"><span class="icon icon-grey"></span></a>
      <a href="#" class="toggle-button toggle-button-right toggle-button-size-md toggle-button-subtle"><span class="icon icon-grey"></span></a>
    </p>
  </div>

  <div class="container">
    <p class="col-header">Toggle Compact</p>
    <label class="toggle-compact">
      <input type="checkbox">
      <div class="slider round">
        <span class="on">On</span>
        <span class="off">Off</span>
      </div>
    </label>
  </div>

</div>

tooltip

Displayed on hover, never more than one paragraph, never contains a button.

Single Line

Lorem ipsum dolor sit amet consectetur.

Multi Line

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Heading + Link

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Position/Orientation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.

Displayed on hover, never more than one paragraph, never contains a button.
<div class="col col-4">
  <div class="container">
    <p>Single Line</p>
    <div class="tooltip tooltip-top tooltip-top-left">
      <p>Lorem ipsum dolor sit amet consectetur.</p>
    </div>
  </div>
  <div class="container">
    <p>Multi Line</p>
    <div class="tooltip tooltip-top tooltip-top-left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <p>Heading + Link</p>
    <div class="tooltip tooltip-top tooltip-top-left">
      <p class="tooltip-heading">Heading</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit.</p>
    </div>
  </div>
</div>

<p>Position/Orientation</p>
<div class="col col-4">
  <div class="container">
    <div class="tooltip tooltip-top tooltip-top-left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-top tooltip-top-center">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-top tooltip-top-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-bottom tooltip-bottom-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-bottom tooltip-bottom-center">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-bottom tooltip-bottom-left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
  <div class="container">
    <div class="tooltip tooltip-left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur elit.</p>
    </div>
  </div>
</div>

video

Dashcam Video

Dashcam video screenshot 
<div class="video-container">
  <h3 class="dash-cam-title">Dashcam Video</h3>
  <img class="dashcam-video" src="images/misc/dashcam.png" alt="Dashcam video screenshot">
</div>

navigation

breadcrumb

<div class="col">
  <div class="container">
    <ul class="list-breadcrumb">
      <li class="list-item"><a href="#" >List Item</a></li>
      <li class="list-item"><a href="#" >List Item</a></li>
      <li class="list-item list-item-current">Current List Item</li>
    </ul>
  </div>
</div>