Styleguide

Kit

The tool kit for ui components

6-1 Close

A simple close icon positioned in the top right of the relative parent

White icon `.close--light`

Gray icon `.close--gray`

<div style="position: relative; height: 40px;">
  <span class="close [modifier class]"></span>
</div>

6-3 Modal

A simple, responsive modal. Traditionally used while nested below an overlay. Note: the first button will not work by nature of how KSS is used to generate a selector. It's only a problem with this documentation

Activated modal `.modal--is_active`

small width Modal `.modal--small`

Large width Modal `.modal--large`

XLarge width Modal `.modal--xlarge`

<div class="overlay" id="js-modal-[modifier class]">
  <div class="modal [modifier class]">Modal is opened</div>
  <span class="close js-close-modal" data-id="js-modal-[modifier class]"></span>
</div>
<a href="javascript:;" class="btn js-show-modal" data-id="js-modal-[modifier class]">
Demo Modal
</a>

6-4-1 Popover Positions

Various positions for the popovers

Popover aligned above the relative parent `.popover--below`

Popover aligned to the left of the relative parent `.popover--left`

Popover aligned above the relative parent `.popover--above`

Popover aligned to the right of the relative parent `.popover--right`

Popover aligned to the right and bottom of the relative parent `.popover--right_below`

Popover aligned to the left and bottom of the relative parent `.popover--left_below`

Popover aligned to the top based on box, not on the tip `.popover--align_top`

Popover aligned to the right and bottom of the relative parent on mobile `.popover--right--mobile`

Popover aligned to the left and bottom of the relative parent on mobile `.popover--left--mobile`

Popover aligned to the center and bottom of the relative parent on mobile `.popover--center--mobile`

<div class="pulse js-click-popover" data-id="js-hover-popover-[modifier class]">
  <div class="popover [modifier class]" id="js-hover-popover-[modifier class]">
    The quick brown fox jumped over the lazy dog, so quickly.
  </div>
</div>

6-4-2 Popover styles

A popover, primarily used in onboarding flows

Popover display as a tooltip `.popover--highlight`

Popover display as a tooltip `.popover--tooltip`

Popover tip is gray, useful with icon_header `.popover--tip_gray`

<div class="pulse js-click-popover" data-id="js-hover-popover-[modifier class]">
  <div class="popover popover--below [modifier class]" id="js-hover-popover-[modifier class]">
    The quick brown fox jumped over the lazy dog, so quickly.
  </div>
</div>

6-4-3 Pop Menu

A popover, primarily used in onboarding flows

Popover Menu for portal `.pop-menu--portal`

<div class="js-click-popover pop-menu [modifier class]" data-id="js-pop-menu-kss[modifier class]">
  <div class="pop-menu__title">Verification Portal</div>
  <div class="popover popover--right_below pop-menu__popover" id="js-pop-menu-kss[modifier class]">
    <a class="pop-menu__item" href="javascript:;">
      Verification Portal
    </a>
    <a class="pop-menu__item" href="javascript:;">
      Background Checks Portal
    </a>
  </div>
</div>

6-5 Tabs

Simple tab navigation for showing/hiding content

Tab One

Tab Two

Tab One

Tab Two

<div class="tabs" id="js-group-1">
  <div class="tabs-toggle js-toggle-tab tabs-toggle--is_active" data-id="tab-one">
    Tab One
  </div>
  <div class="tabs-toggle js-toggle-tab" data-id="tab-two">
    Tab Two
  </div>
</div>
<div class="js-group-1">
  <div class="tabs-content js-tabs-content tabs-content--is_active" id="tab-one">
    Tab One
  </div>
  <div class="tabs-content js-tabs-content" id="tab-two">
    Tab Two
  </div>
</div>

6-5-1 Switch

Hide

Show

<div class="tabs tabs--switch bg-gray4">
  <div class="js-toggle-tab tabs-toggle tabs-toggle--is_active" data-id="false">Hide</div>
  <div class="js-toggle-tab tabs-toggle" data-id="true">Show</div>
</div>

6-5-2 Folder tabs

Usage

Edit

Test

usage content

edit content

test content

<div class="tabs tabs--folder tabs--folder_buttons" id="js-applications-tabs-id">
  <div class="js-toggle-tab tabs-toggle--folder_buttons container--small type--small u-display-inline-block u-box u-ta-center js-usage-tab" data-id="js-usage-id">
    <i class="fa fa-bar-chart"></i><span class="u-hidden--mobile">&nbsp;Usage</span>
  </div>
  <div class="js-toggle-tab tabs-toggle--folder_buttons container--small type--small u-display-inline-block u-box u-ta-center" data-id="js-edit-id">
    <i class="fa fa-pencil"></i><span class="u-hidden--mobile">&nbsp;Edit</span>
  </div>
  <div class="js-toggle-tab tabs-toggle--folder_buttons container--small type--small u-display-inline-block u-box u-ta-center" data-id="js-test-id">
    <i class="fa fa-tachometer"></i><span class="u-hidden--mobile">&nbsp;Test</span>
  </div>
</div>
<div class="js-applications-tabs-id u-hidden tabs-content--folder_buttons container bg-gray8 container--bordered">
  <div class="tabs-content js-tabs-content js-usage" id="js-usage-id" data-application_id="id">usage content</div>
  <div class="tabs-content js-tabs-content js-edit" id="js-edit-id">edit content</div>
  <div class="tabs-content js-tabs-content js-test" id="js-test-id">test content</div>
</div>

6-5-3 Folder tabs

Peer to Peer

Car & Ride Sharing

Tenant Screening

`Peer to Peer` content

`Car & Ride Sharing` content

`Tenant Screening` content

<div class="grid grid--gutter_small tabs tabs--folder" id="js-industry-tabs">
  <div class="column-4 column--bottom">
    <div class="tabs-toggle--folder text-overflow-elipsis js-toggle-tab tabs-toggle--is_active" data-id="js-p2p">
      Peer to Peer
    </div>
  </div>
  <div class="column-4 column--bottom">
    <div class="tabs-toggle--folder text-overflow-elipsis js-toggle-tab" data-id="js-on_demand">
      Car &amp; Ride Sharing
    </div>
  </div>
  <div class="column-4 column--bottom">
    <div class="tabs-toggle--folder text-overflow-elipsis js-toggle-tab" data-id="js-tenant">
      Tenant Screening
    </div>
  </div>
</div>
<div class="js-industry-tabs tabs-content--folder container container--large bg-white type--gray2 u-ta-left">
  <div class="tabs-content js-tabs-content tabs-content--is_active" id="js-p2p">
    `Peer to Peer` content
  </div>
  <div class="tabs-content js-tabs-content" id="js-on_demand">
    `Car &amp; Ride Sharing` content
  </div>
  <div class="tabs-content js-tabs-content" id="js-tenant">
    `Tenant Screening` content
  </div>
</div>

6-5-4 Simple Folder Tab

Simplified Folder navigation

Oauth Verifications

Active Class `.folder-tab--is-active`

Oauth Verifications

<div>
  <a href="javascript:;" class="folder-tab [modifier class]">Oauth Verifications</a>
</div>

6-6 Accordion

Simple accordion for toggling content

Toggle Accordion 1

Accordion active state `.accordion--is_active`

Toggle Accordion 1

Accordion last in the series `.accordion--is_last`

Toggle Accordion 1

Accordion with arrows `.accordion--with_arrow`

Toggle Accordion 1

Accordion with gray icon `.accordion--gray`

Toggle Accordion 1

Accordion with a pencil `.accordion--with_pencil`

Toggle Accordion 1

Accordion with a white border `.accordion--border-white`

Toggle Accordion 1

<div class="accordion [modifier class]">
  Toggle Accordion 1
</div>

6-7 Pagination Arrows

Back and Next arrows for pagination

<div style="position: relative; height: 100px;">
  <div class="pagination--back icon_box"></div>
  <div class="pagination--next icon_box"></div>
</div>

6-8 Pulse

Pulsating Dot

<div class="pulse"></div>

6-9 Menu

Applications
Users
Audit Trail
Billing

dash nav with links `.dash-nav--links`

Applications
Users
Audit Trail
Billing

<div class="dash-nav bg-white container--bordered_mobile u-ta-center--mobile">
  <ul>
    <li class="js-navigate-link type--teal u-box u-cursor-pointer u-visible u-ta-left--desktop u-ta-center--mobile applications active" data-nav="applications">
      <i class="sl-gear"></i>
      Applications
    </li>
    <li class="js-navigate-link type--teal u-box u-cursor-pointer u-visible u-ta-left--desktop u-ta-center--mobile roles" data-nav="roles">
      <i class="sl-one-person"></i>
      Users
    </li>
    <li class="js-navigate-link type--teal u-box u-cursor-pointer u-visible u-ta-left--desktop u-ta-center--mobile logs" data-nav="logs">
      <i class="sl-form"></i>
      Audit Trail
    </li>
    <li class="js-navigate-link type--teal u-box u-cursor-pointer u-visible u-ta-left--desktop u-ta-center--mobile billing" data-nav="billing">
      <i class="sl-hand-card"></i>
      Billing
    </li>
  </ul>
</div>

Kit

6-1 Close

White icon .close--light

Gray icon .close--gray

6-3 Modal

Activated modal .modal--is_active

small width Modal .modal--small

Large width Modal .modal--large

XLarge width Modal .modal--xlarge

6-4-1 Popover Positions

Popover aligned above the relative parent .popover--below

Popover aligned to the left of the relative parent .popover--left

Popover aligned above the relative parent .popover--above

Popover aligned to the right of the relative parent .popover--right

Popover aligned to the right and bottom of the relative parent .popover--right_below

Popover aligned to the left and bottom of the relative parent .popover--left_below

Popover aligned to the top based on box, not on the tip .popover--align_top

Popover aligned to the right and bottom of the relative parent on mobile .popover--right--mobile

Popover aligned to the left and bottom of the relative parent on mobile .popover--left--mobile

Popover aligned to the center and bottom of the relative parent on mobile .popover--center--mobile

6-4-2 Popover styles

Popover display as a tooltip .popover--highlight

Popover display as a tooltip .popover--tooltip

Popover tip is gray, useful with icon_header .popover--tip_gray

6-4-3 Pop Menu

Popover Menu for portal .pop-menu--portal

6-5 Tabs

6-5-1 Switch

6-5-2 Folder tabs

6-5-3 Folder tabs

6-5-4 Simple Folder Tab

Active Class .folder-tab--is-active

6-6 Accordion

Accordion active state .accordion--is_active

Accordion last in the series .accordion--is_last

Accordion with arrows .accordion--with_arrow

Accordion with gray icon .accordion--gray

Accordion with a pencil .accordion--with_pencil

Accordion with a white border .accordion--border-white

6-7 Pagination Arrows

6-8 Pulse

6-9 Menu

dash nav with links .dash-nav--links

White icon `.close--light`

Gray icon `.close--gray`

Activated modal `.modal--is_active`

small width Modal `.modal--small`

Large width Modal `.modal--large`

XLarge width Modal `.modal--xlarge`

Popover aligned above the relative parent `.popover--below`

Popover aligned to the left of the relative parent `.popover--left`

Popover aligned above the relative parent `.popover--above`

Popover aligned to the right of the relative parent `.popover--right`

Popover aligned to the right and bottom of the relative parent `.popover--right_below`

Popover aligned to the left and bottom of the relative parent `.popover--left_below`

Popover aligned to the top based on box, not on the tip `.popover--align_top`

Popover aligned to the right and bottom of the relative parent on mobile `.popover--right--mobile`

Popover aligned to the left and bottom of the relative parent on mobile `.popover--left--mobile`

Popover aligned to the center and bottom of the relative parent on mobile `.popover--center--mobile`

Popover display as a tooltip `.popover--highlight`

Popover display as a tooltip `.popover--tooltip`

Popover tip is gray, useful with icon_header `.popover--tip_gray`

Popover Menu for portal `.pop-menu--portal`

Active Class `.folder-tab--is-active`

Accordion active state `.accordion--is_active`

Accordion last in the series `.accordion--is_last`

Accordion with arrows `.accordion--with_arrow`

Accordion with gray icon `.accordion--gray`

Accordion with a pencil `.accordion--with_pencil`

Accordion with a white border `.accordion--border-white`

dash nav with links `.dash-nav--links`