Default styling
Alert message here.
.sb-alert--warning
Warning alert
Alert message here.
Markup
<div class="sb-alert [modifier class]" role="alertdialog">
Alert message here.
</div>
Source: components/_alert.scss, line 1
Default styling
-50
.sb-badge--s
Small size badge
-50
.sb-badge--l
Large size badge
-50
.sb-badge--xl
Extra large size badge
-50
.sb-badge--rounded
Rounded badge
-50
Markup
<span class="sb-badge [modifier class]">
-50
</span>
Source: components/_badge.scss, line 1
2.5 #Components.card Card
Card element is used for actionable tiles.
Browser support: IE11+, Safari6.1+, Firefox30+, Chrome30+
An anchor card
221 responses
3 data sources
A very long and boring card title that can span over and over
Markup
<div class="sb-flex">
<a class="sb-card sb-margin-right-s" href="#">
<div class="sb-card__header">
<h2 class="sb-title">An anchor card</h2>
</div>
<div class="sb-card__body">
<p class="sb-text sb-text--center sb-text--uppercase sb-text--emphasis">221 responses</p>
<p class="sb-text--s sb-text--center sb-text--subtle">3 data sources</p>
</div>
</a>
<div class="sb-card">
<div class="sb-card__header">
<h2 class="sb-title sb-text--center">A very long and boring card title that can span over and over</h2>
</div>
<div class="sb-card__body">
<button class="sb-btn sb-btn--primary">Click me</button>
</div>
</div>
</div>
Source: components/_card.scss, line 1
2.6 #Components.checkbox Checkbox
A basic checkbox component.
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Obs: please do not reuse extends on this file for other components (apart from radio)
Markup
<div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-1" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-1">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox.</span>
</label>
</div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-2" class="sb-checkbox__input" disabled>
<label class="sb-checkbox__label" for="checkbox-2">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Basic disabled checkbox.</span>
</label>
</div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-3" class="sb-checkbox__input" disabled checked>
<label class="sb-checkbox__label" for="checkbox-3">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Basic disabled and checked checkbox. </span>
</label>
</div>
</div>
Source: components/_checkbox.scss, line 1
2.6.1 #Components.checkbox.group Group
A basic checkbox group. Apply a .sb-checkbox-group class to the checkbox wrapper.
If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-checkbox-group--inline
checkbox group aligned horizontally
Markup
<div class="sb-checkbox-group [modifier class]" role="group">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-4-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-4-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox</span>
</label>
</div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-5-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-5-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox</span>
</label>
</div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-6-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-6-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox</span>
</label>
</div>
</div>
Source: components/_checkbox.scss, line 103
2.7 #Components.date-picker DatePicker
A DatePicker
Browser support: IE11+, Safari6+, Firefox30+, Chrome30+
:focus-within will not work in all browsers.
The markup is mostly generated from react-day-picker, which
is the library we use to implement the JS part of the date picker. We update almost all classes that
are generated by react-day-picker so we can have full control of the styling and behavior. The
reference implementation of the base styles can be found here.
JavaScript is required for:
- Opening and closing the date picker.
- The whole calendar interaction: selecting dates, navigating to months, interacting with the actions.
- Updating the dates on the button with the selected dates.
Default styling
To
.sb-date-picker__overlay-wrapper--open
Open date picker
Markup
<div class="sb-date-picker">
<div class="sb-date-picker__control">
<div class="sb-date-picker__inputs">
<div class="sb-date-picker__input-wrapper sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="13 Sep 2018">
</div>
<div class="sb-text--s sb-text--emphasis sb-margin-left-xs sb-margin-right-xs sb-date-picker__separator">To</div>
<div class="sb-date-picker__input-wrapper sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="21 Sep 2018">
</div>
</div>
<button class="sb-date-picker__button">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z"></path>
</svg>
</button>
</div>
<div class="sb-date-picker__overlay-wrapper [modifier class]" data-kss-animation-cb="sb-date-picker__overlay-wrapper--open">
<div class="sb-date-picker__overlay">
<div class="sb-date-picker__calendar" lang="en">
<div class="sb-date-picker__wrapper" tabindex="0">
<div class="sb-date-picker__navbar-wrapper">
<div class="sb-date-picker__navbar">
<button class="sb-btn sb-date-picker__navbar-button sb-date-picker__prev-month-button sb-btn--subtle" title="August" type="button">
<svg class="sb-icon" viewBox="0 0 9 16">
<path d="M8.026 16a.42.42 0 0 0 .298-.719L1.043 8 8.324.719a.421.421 0 1 0-.595-.596l-7.58 7.58a.421.421 0 0 0 0 .595l7.58 7.579a.42.42 0 0 0 .297.123z"></path>
</svg>
</button>
<button class="sb-btn sb-date-picker__navbar-button sb-date-picker__next-month-button sb-btn--subtle" title="October" type="button">
<svg class="sb-icon" viewBox="0 0 9 16">
<path d="M8.026 16a.42.42 0 0 0 .298-.719L1.043 8 8.324.719a.421.421 0 1 0-.595-.596l-7.58 7.58a.421.421 0 0 0 0 .595l7.58 7.579a.42.42 0 0 0 .297.123z"></path>
</svg>
</button>
</div>
</div>
<div class="sb-date-picker__months">
<div class="sb-date-picker__month" role="grid">
<form class="sb-date-picker__caption" role="heading">
<div class="sb-date-picker__caption-select-wrapper sb-margin-right-xs">
September
<select class="sb-date-picker__caption-select" name="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8" selected>September</option>
<option value="9">October</option>
</select>
</div>
<div class="sb-date-picker__caption-select-wrapper">
2018
<select class="sb-date-picker__caption-select" name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018" selected>2018</option>
</select>
</div>
</form>
<div class="sb-date-picker__weekdays" role="rowgroup">
<div class="sb-date-picker__weekdays-row" role="row">
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Sunday">Su</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Monday">Mo</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Tuesday">Tu</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Wednesday">We</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Thursday">Th</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Friday">Fr</abbr></div>
<div class="sb-date-picker__weekday" role="columnheader"><abbr title="Saturday">Sa</abbr></div>
</div>
</div>
<div class="sb-date-picker__body" role="rowgroup">
<div class="sb-date-picker__week" role="row">
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div class="sb-date-picker__day-wrapper " tabindex="0" role="gridcell" aria-label="Sat Sep 01 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">1</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 02 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">2</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Mon Sep 03 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">3</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Tue Sep 04 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">4</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Wed Sep 05 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">5</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Thu Sep 06 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">6</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Fri Sep 07 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">7</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sat Sep 08 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">8</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 09 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">9</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Mon Sep 10 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">10</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Tue Sep 11 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">11</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Wed Sep 12 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">12</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--edge sb-date-picker__day-wrapper--selected"
tabindex="-1" role="gridcell" aria-label="Thu Sep 13 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">13</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Fri Sep 14 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">14</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Sat Sep 15 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">15</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Sun Sep 16 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">16</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Mon Sep 17 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">17</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Tue Sep 18 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">18</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Wed Sep 19 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">19</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--selected" tabindex="-1" role="gridcell"
aria-label="Thu Sep 20 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">20</div>
</div>
<div class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--edge sb-date-picker__day-wrapper--selected"
tabindex="-1" role="gridcell" aria-label="Fri Sep 21 2018" aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">21</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sat Sep 22 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">22</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 23 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">23</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Mon Sep 24 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">24</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Tue Sep 25 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">25</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Wed Sep 26 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">26</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Thu Sep 27 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">27</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Fri Sep 28 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">28</div>
</div>
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sat Sep 29 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">29</div>
</div>
</div>
<div class="sb-date-picker__week" role="row">
<div class="sb-date-picker__day-wrapper " tabindex="-1" role="gridcell" aria-label="Sun Sep 30 2018"
aria-disabled="false" aria-selected="false">
<div class="sb-date-picker__day">30</div>
</div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--today sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--disabled sb-date-picker__day-wrapper--outside"></div>
<div aria-disabled="true" class="sb-date-picker__day-wrapper sb-date-picker__day-wrapper--disabled sb-date-picker__day-wrapper--outside"></div>
</div>
</div>
</div>
</div>
<div class="sb-date-picker__footer">
<button type="button" tabindex="0" class="sb-date-picker__today-button sb-btn sb-btn--subtle" aria-label="Today">Today</button>
</div>
</div>
</div>
<div class="sb-date-picker__actions-wrapper">
<div class="sb-date-picker__actions">
<button class="sb-btn sb-date-picker__action sb-date-picker__action--left sb-btn--subtle" type="button">clear</button>
<button class="sb-btn sb-date-picker__action sb-date-picker__action--right sb-btn--subtle" type="button">apply</button>
</div>
</div>
</div>
</div>
</div>
Source: components/_date-picker.scss, line 1
2.7.1 #Components.date-picker.disabled Disabled
A disabled date picker.
Browser support: IE11+, Safari6+, Firefox30+, Chrome30+
To
Markup
<div class="sb-date-picker">
<div class="sb-date-picker__control sb-date-picker__control--disabled">
<div class="sb-date-picker__inputs">
<div class="sb-date-picker__input-wrapper sb-date-picker__input-wrapper--disabled sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="13 Sep 2018" disabled>
</div>
<div class="sb-text--s sb-text--emphasis sb-margin-left-xs sb-margin-right-xs sb-date-picker__separator">To</div>
<div class="sb-date-picker__input-wrapper sb-date-picker__input-wrapper--disabled sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="21 Sep 2018" disabled>
</div>
</div>
<button class="sb-date-picker__button sb-date-picker__button--disabled">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z"></path>
</svg>
</button>
</div>
</div>
Source: components/_date-picker.scss, line 745
2.7.2 #Components.date-picker.invalid Invalid
An invalid date picker.
Browser support: IE11+, Safari6+, Firefox30+, Chrome30+
To
Date out of range
Markup
<div class="sb-form-control sb-form-control--invalid">
<label class="sb-label" for="creation-date-id">Creation Date</label>
<div class="sb-date-picker">
<div class="sb-date-picker__control">
<div class="sb-date-picker__inputs sb-date-picker__inputs--invalid">
<div class="sb-date-picker__input-wrapper sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="13 Sep 2018">
</div>
<div class="sb-text--s sb-text--emphasis sb-margin-left-xs sb-margin-right-xs sb-date-picker__separator">To</div>
<div class="sb-date-picker__input-wrapper sb-text--s">
<input class="sb-date-picker__input" placeholder="d mmm yyyy" value="21 Sep 2018">
</div>
</div>
<button class="sb-date-picker__button sb-date-picker__button--invalid">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z"></path>
</svg>
</button>
</div>
</div>
<p role="alert" class="sb-form-control__validation">Date out of range</p>
</div>
Source: components/_date-picker.scss, line 773
2.8 #Components.dropdown Dropdown
- Disabled Multiselect No search results Search Search with create item action Search with no results and create item action
Basic dropdown. If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-dropdown--open
open dropdown
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-[modifier class]">Choose an option</label>
<div class="sb-dropdown [modifier class]" id="dropdown-id-[modifier class]" data-kss-animation-cb="sb-dropdown--open">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="Choose an option" aria-expanded="false">
Choice 1
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 1</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 2</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 3</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 1
2.8.1 #Components.dropdown.disabled Disabled
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-disabled">Choose an option</label>
<div class="sb-dropdown " id="dropdown-id-disabled">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="Choose an option" disabled aria-expanded="false">
Choice 1
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 1</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 2</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 3</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 293
2.8.2 #Components.dropdown.multiselect Multiselect
JavaScript is required for:
- Checking/Unchecking the checkbox on row click
- Updating aria-expanded value
- Updating the button text with the number of selected items
- Highlighting items
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-multiselect">Select options</label>
<div class="sb-dropdown sb-dropdown--open" id="dropdown-id-multiselect">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="Select options" aria-expanded="true">
Select options
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__menu-item" tabindex="0" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-1" class="sb-checkbox__input" tabindex="-1">
<label class="sb-checkbox__label" for="checkbox-dropdown-1">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Choice 1</span>
</label>
</div>
</li>
<li class="sb-dropdown__menu-item sb-dropdown__menu-item--selected" tabindex="0" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-2" class="sb-checkbox__input" tabindex="-1" checked>
<label class="sb-checkbox__label" for="checkbox-dropdown-2">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Choice 2</span>
</label>
</div>
</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-3" class="sb-checkbox__input" tabindex="-1">
<label class="sb-checkbox__label" for="checkbox-dropdown-3">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Choice 3</span>
</label>
</div>
</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 144
2.8.3 #Components.dropdown.no-search-results No search results
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-search-no-results">Select options</label>
<div class="sb-dropdown sb-dropdown--open" id="dropdown-id-search-no-results">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="Select options">
Select options
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__search" role="search">
<input class="sb-input" id="input-id-2" placeholder="Search here ..." aria-label="Search">
</li>
<li class="sb-dropdown__message" tabindex="0" aria-label="No results">
No results
</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 266
2.8.4 #Components.dropdown.search Search
JavaScript is required for:
- Checking/Unchecking the checkbox on row click
- Filtering the menu items based on the search input
- Updating the button text with the number of selected items
- Highlighting items
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-search">Select options</label>
<div class="sb-dropdown sb-dropdown--open" id="dropdown-id-search">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="One item selected">
One item selected
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__search" role="search">
<input class="sb-input" id="input-id-1" placeholder="Search here ..." aria-label="Search">
</li>
<li class="sb-dropdown__menu-item sb-dropdown__menu-item--selected" tabindex="0" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-1" class="sb-checkbox__input" tabindex="-1" checked>
<label class="sb-checkbox__label" for="checkbox-dropdown-1">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Choice 1</span>
</label>
</div>
</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-2" class="sb-checkbox__input" tabindex="-1">
<label class="sb-checkbox__label" for="checkbox-dropdown-2">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Choice 2</span>
</label>
</div>
</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 210
2.8.5 #Components.dropdown.search-with-create-item-action Search with create item action
JavaScript is required for:
- Checking/Unchecking the checkbox on row click
- Filtering the menu items based on the search input
- Updating the button text with the number of selected items
- Highlighting items
- Executing the create item action
- Updating the create item text with the search input text
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-search">Select options or create new</label>
<div class="sb-dropdown sb-dropdown--open" id="dropdown-id-search">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="One option selected">
One option selected
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__search" role="search">
<input class="sb-input" id="input-id-1" placeholder="Search here ..." value="er" aria-label="Search">
</li>
<li class="sb-dropdown__menu-item sb-dropdown__menu-item--highlighted" tabindex="-1" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-1" class="sb-checkbox__input" tabindex="-1">
<label class="sb-checkbox__label" for="checkbox-dropdown-1">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Netherlands</span>
</label>
</div>
</li>
<li class="sb-dropdown__menu-item" tabindex="-1" role="option">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-dropdown-2" class="sb-checkbox__input" tabindex="-1" checked>
<label class="sb-checkbox__label" for="checkbox-dropdown-2">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
<span class="sb-checkbox__text">Germany</span>
</label>
</div>
</li>
<li>
<button class="sb-dropdown__menu-item sb-dropdown__create-item-action" tabindex="-1">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zM7 6V3H6v3H3v1h3v3h1V7h3V6H7z" />
</svg>
Create "er" as new option
</button>
</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 317
2.8.6 #Components.dropdown.search-with-no-results-and-create-item-action Search with no results and create item action
The create action button overrides the default "No results" message.
JavaScript is required for:
- Checking/Unchecking the checkbox on row click
- Filtering the menu items based on the search input
- Updating the button text with the number of selected items
- Highlighting items
- Executing the create item action
- Updating the create item text with the search input text
- Hiding the "No results" message
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-search">Select options or create new</label>
<div class="sb-dropdown sb-dropdown--open" id="dropdown-id-search">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="One option selected">
Select options
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__search" role="search">
<input class="sb-input" id="input-id-1" placeholder="Search here ..." value="er" aria-label="Search">
</li>
<li>
<button class="sb-dropdown__menu-item sb-dropdown__create-item-action" tabindex="-1">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zM7 6V3H6v3H3v1h3v3h1V7h3V6H7z" />
</svg>
Create "er" as new option
</button>
</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 383
2.9 #Components.form Form Control
The form control component. A container for form elements that helps position icons and validation messages.
JavaScript is required for adding/removing validation classes.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
Error message here.
.sb-form-control--invalid
invalid input
Error message here.
Markup
<div class="sb-form-control [modifier class]">
<label class="sb-label" for="text-form-input-id-[modifier class]">Input Label</label>
<div class="sb-form-control__input">
<input class="sb-input" type="text" id="text-form-input-id-[modifier class]" placeholder="Placeholder Text">
</div>
<p role="alert" class="sb-form-control__validation">Error message here.</p>
</div>
Source: components/_form-control.scss, line 1
2.9.1 #Components.form.icon Form control with icon
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-form-control__input--icon-left
form control with icon aligned left
.sb-form-control__input--icon-right
form control with icon aligned right
Markup
<div class="sb-form-control">
<label class="sb-label" for="text-form-input-id-[modifier class]">Input Label</label>
<div class="sb-form-control__input [modifier class]">
<input class="sb-input" type="text" id="text-form-input-id-[modifier class]" placeholder="Placeholder Text">
<svg class="sb-icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4.50044648,13.7056111 L8,11.5680972 L11.4995535,13.7056111 L10.5480786,9.71680978 L13.6623965,7.04906473 L9.57479916,6.7213638 L8,2.93509282 L6.42520085,6.7213638 L2.33760346,7.04906473 L5.45192146,9.71680977 L4.50044648,13.7056111 Z M8,12.6096808 L3.13994104,15.5781862 L4.4613166,10.0386768 L0.13625942,6.33380469 L5.81297339,5.878705 L8,0.620462738 L10.1870267,5.878705 L15.8637405,6.33380469 L11.5386834,10.0386768 L12.8600589,15.5781862 L8,12.6096808 Z"></path>
</svg>
</div>
</div>
Source: components/_form-control.scss, line 40
2.10 #Components.header Header
Header including title, optional back button, info text and action button.
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Header title
Info regarding this page.
Markup
<header class="sb-header">
<button class="sb-header__back" aria-label="Back">
<svg class="sb-icon" viewBox="0 0 9 16">
<path d="M8.02631579,16 C8.13407895,16 8.24181579,15.9588947 8.32402632,15.8766579 C8.48847368,15.7122368 8.48847368,15.4456316 8.32402632,15.2812105 L1.04281579,8 L8.32402632,0.718763158 C8.48847368,0.554342105 8.48847368,0.287736842 8.32402632,0.123315789 C8.15957895,-0.0411052632 7.893,-0.0411315789 7.72857895,0.123315789 L0.149631579,7.70226316 C-0.0148157895,7.86668421 -0.0148157895,8.13328947 0.149631579,8.29771053 L7.72857895,15.8766579 C7.81081579,15.9588947 7.91855263,16 8.02631579,16 L8.02631579,16 Z"></path>
</svg>
</button>
<div class="sb-header__content">
<div class="sb-header__text">
<h1 class="sb-header__title sb-title">Header title</h1>
<p class="sb-header__info sb-text">Info regarding this page.</p>
</div>
<button href="#" class="sb-header__btn sb-btn sb-btn--primary">Action button</button>
</div>
</header>
Source: components/_header.scss, line 1
2.11 #Components.icons Icons
The Stylabilla icon system is used by placing svg icons inline with the class sb-icon. Our approach is based on these articles.
If the icon is for decoration only, please add aria-hidden="true" to the icon. Otherwise please add a label - for instance aria-label="Delete".
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="kss-icons">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.074 13.8l-.567-9.298a.387.387 0 0 0-.4-.374.387.387 0 0 0-.37.403l.567 9.298a.386.386 0 0 0 .4.374.387.387 0 0 0 .37-.402zm6.163.708c-.052.376-.345.712-.77.712H4.533c-.425 0-.711-.333-.77-.712l-.77-11.599h10.014l-.77 11.599zM6.074 2.328V.775h3.852v1.551H6.074zm4.622-.146V.728c0-.402-.345-.728-.77-.728H6.074c-.426 0-.77.326-.77.728v1.454H.385A.375.375 0 0 0 0 2.546c0 .2.173.363.385.363h1.837l.77 11.636c.125.796.69 1.455 1.541 1.455h6.934c.85 0 1.396-.667 1.54-1.455l.77-11.636h1.838c.212 0 .385-.162.385-.363a.375.375 0 0 0-.385-.364h-4.919zm.001 11.647l.559-9.298a.387.387 0 0 0-.371-.403.386.386 0 0 0-.399.374l-.559 9.3a.386.386 0 0 0 .77.028zm-2.312-.015V4.505A.386.386 0 0 0 8 4.117a.386.386 0 0 0-.385.388v9.31c0 .214.172.387.385.387a.386.386 0 0 0 .385-.388z"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
<svg class="sb-icon" viewBox="0 0 9 16">
<path d="M8.026 16a.42.42 0 0 0 .298-.719L1.043 8 8.324.719a.421.421 0 1 0-.595-.596l-7.58 7.58a.421.421 0 0 0 0 .595l7.58 7.579a.42.42 0 0 0 .297.123z"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.176 7L3.5 9.676l.824.824L7 7.824 9.676 10.5l.824-.824L7.824 7 10.5 4.324 9.676 3.5 7 6.176 4.324 3.5l-.824.824L6.176 7zM7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0z"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0M5.579 10.5L2.625 6.827l1.309-1.304 1.645 1.996L10.733 3.5l.642.612L5.579 10.5"/>
</svg>
<svg class="sb-icon" viewBox="-5 -5 16 16">
<path d="M0 0l3.5 4L7 0H0">
</svg>
<svg class="sb-icon" viewBox="0 0 13 16">
<path d="M7.216 3.881V0L13 6l-5.784 6V8.034C.486 7.87.776 12.78 2.488 16-1.74 11.259-.842 3.663 7.216 3.881"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M9.806 11.622c-2.48 1.663-5.814 1.447-7.944-.683C-.568 8.51-.507 4.507 2 2c2.507-2.507 6.509-2.568 8.94-.138 2.129 2.13 2.345 5.465.682 7.944l3.58 3.581a1.283 1.283 0 1 1-1.815 1.815l-3.58-3.58zm.116-1.7c2.005-2.006 2.054-5.207.11-7.152C8.087.826 4.885.875 2.88 2.88s-2.054 5.207-.11 7.152c1.945 1.944 5.146 1.895 7.152-.11z"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<g><circle cx="8" cy="14" r="2"></circle><circle cx="8" cy="8" r="2"></circle><circle cx="8" cy="2" r="2"></circle></g>
</svg>
</svg>
<svg class="sb-icon" viewBox="0 0 40 40">
<path d="M20 38.182C9.958 38.182 1.818 30.042 1.818 20 1.818 9.958 9.958 1.818 20 1.818c10.042 0 18.182 8.14 18.182 18.182 0 10.042-8.14 18.182-18.182 18.182M20 0C8.955 0 0 8.955 0 20s8.955 20 20 20 20-8.955 20-20S31.045 0 20 0m1.99 9.993c-.706 0-1.312.228-1.816.685-.506.457-.759 1.007-.759 1.651 0 .644.253 1.191.759 1.644.504.452 1.11.679 1.815.679.706 0 1.31-.227 1.81-.68.5-.452.751-1 .751-1.643 0-.644-.25-1.194-.75-1.65-.502-.458-1.105-.686-1.81-.686m.68 18.206c-.555 0-.947-.089-1.174-.267-.226-.178-.339-.512-.339-1.003 0-.195.035-.483.106-.864.069-.38.148-.719.235-1.015l1.075-3.695c.104-.338.176-.71.215-1.116.04-.407.06-.69.06-.852 0-.778-.283-1.41-.844-1.898-.563-.486-1.363-.729-2.4-.729-.576 0-1.187.1-1.832.298-.646.198-1.321.438-2.027.717l-.288 1.143c.21-.076.46-.156.753-.242.293-.084.58-.126.858-.126.568 0 .952.094 1.153.28.2.185.302.515.302.99 0 .262-.033.552-.098.87-.066.315-.147.654-.243 1.008l-1.08 3.707c-.095.39-.165.74-.208 1.049-.043.307-.065.61-.065.907 0 .762.29 1.39.868 1.885.58.495 1.392.742 2.437.742.68 0 1.276-.086 1.79-.26a56.473 56.473 0 0 0 2.064-.755l.287-1.143a5.12 5.12 0 0 1-.717.235c-.33.09-.626.134-.887.134"/>
</svg>
<svg class="sb-icon" viewBox="0 0 40 40">
<path d="M17.5 28.182l-6.136-7.633 2.72-2.71 3.418 4.148 10.71-8.35 1.333 1.27-12.044 13.275m2.499 10C9.958 38.182 1.818 30.042 1.818 20 1.818 9.958 9.958 1.818 20 1.818c10.042 0 18.182 8.14 18.182 18.182 0 10.042-8.14 18.182-18.182 18.182M20 0C8.955 0 0 8.955 0 20s8.955 20 20 20 20-8.955 20-20S31.045 0 20 0"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M11.893 9.827l-3.636 3.484a.37.37 0 0 1-.257.102.37.37 0 0 1-.257-.102L4.107 9.827A.339.339 0 0 1 4 9.581c0-.193.163-.349.364-.349.1 0 .19.04.257.103l3.015 2.889V.348C7.636.156 7.8 0 8 0c.201 0 .364.156.364.348v11.876l3.015-2.89a.37.37 0 0 1 .257-.102c.201 0 .364.156.364.349a.34.34 0 0 1-.107.246zM16 15.665a.343.343 0 0 1-.35.335H.35a.343.343 0 0 1-.35-.335c0-.186.157-.336.35-.336h15.3c.193 0 .35.15.35.336z"/>
</svg>
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zM7 6V3H6v3H3v1h3v3h1V7h3V6H7z" />
</svg>
<!-- cross -->
<svg class="sb-icon" viewBox="0 0 17 17">
<path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
</svg>
<!-- back arrow -->
<svg class="sb-icon sb-icon--arrow" viewBox="0 0 10 10">
<g fill="none" stroke-linecap="round" stroke-width="2">
<path stroke-linejoin="round" d="M5 1L1 5l4 4"/>
<path d="M2 5h7"/>
</g>
</svg>
<!-- down arrow -->
<svg class="sb-icon" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
<!-- status dot -->
<svg class="sb-icon" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
<!-- calendar -->
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z" />
</svg>
<!-- angle-arrow-down -->
<svg class="sb-icon" viewBox="0 0 10 6">
<path d="M5 3.586L8.293.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4A1 1 0 0 1 1.707.293L5 3.586z" fill="#9CACBA" fill-rule="nonzero"/>
</svg>
<!-- angle-arrow-up -->
<svg class="sb-icon" version="1.1" viewBox="0 0 10 6">
<path d="M5 2.414l3.293 3.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L5 2.414z" fill="#9CACBA" fill-rule="nonzero"/>
</svg>
</div>
<div class="kss-icons">
<svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
<path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
<path fill="#434343" d="M52 18.8c-.4-.4-.8-.8-1.2-.4l-4 1.6-10 4.8c-.4 0-.8.4-.8.8s.4 1.2.8 1.2h.4c1.2 2 2.8 3.2 5.2 3.2 3.2 0 6-2.8 6-6.4 0-.8 0-1.2-.4-2l3.6-1.6c.4-.4.4-.8.4-1.2zM12 18.8c.4-.4.8-.8 1.2-.4l4 1.6 10.4 4.8s.4.4.4.8-.4 1.2-1.2 1.2h-.4c-.8 2-2.4 3.2-4.8 3.2-3.2 0-6-2.8-6-6.4 0-.8 0-1.2.4-2L12.4 20c-.4-.4-.4-.8-.4-1.2zM46 51.6c-1.2 0-2-.8-2-2 0-7.2-9.6-8.4-12-8.4-1.2 0-12 .4-12 8.4 0 1.2-.8 2-2 2s-2-.8-2-2c0-8.8 8-12.4 16-12.4 5.2 0 16 3.2 16 12.4 0 1.2-.8 2-2 2z" />
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
<path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
<path fill="#434343" d="M46 51.6c-1.2 0-2-.8-2-2 0-7.2-9.6-8.4-12-8.4-1.2 0-12 .4-12 8.4 0 1.2-.8 2-2 2s-2-.8-2-2c0-8.8 8-12.4 16-12.4 5.2 0 16 3.2 16 12.4 0 1.2-.8 2-2 2zM48.8 24c-.4-2-2-6.4-9.2-6.4 0 0 2.8.8 4.8 2H44c-2.8 0-5.2 2.4-5.2 4.8 0 2.8 2.4 4.8 5.2 4.8s4.8-2.4 4.8-4.8V24zM15.2 24c.4-2 2-6.4 9.2-6.4 0 0-2.8.8-4.8 2 0 .4.4.4.4.4 2.8 0 5.2 2.4 5.2 4.8C24.8 28 22.8 30 20 30s-4.8-2-4.8-4.8V24z" />
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
<path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
<path fill="#434343" d="M24.4 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8 2.15-4.8 4.8-4.8 4.8 2.15 4.8 4.8zM48.8 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8S41.35 20 44 20s4.8 2.15 4.8 4.8zM48 45.2H16c-1.2 0-2-.8-2-2v-.4c0-1.2.8-2 2-2h32c1.2 0 2 .8 2 2v.4c0 1.2-.8 2-2 2z" />
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
<path fill="#f4d055" d="M32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z" />
<path fill="#434343" d="M24.4 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8 2.15-4.8 4.8-4.8 4.8 2.15 4.8 4.8zM48.8 24.8c0 2.65-2.15 4.8-4.8 4.8s-4.8-2.15-4.8-4.8S41.35 20 44 20s4.8 2.15 4.8 4.8zM50 37.6c-.4-.4-.8-.8-1.6-.4-6 2.8-11.6 3.6-16.4 3.6s-10.8-.8-16.4-3.6c-.4-.4-1.2 0-1.6.4s0 .8 0 1.2c6.4 10.8 12.4 14.4 17.6 14.4s11.6-3.6 17.6-14.4c.8-.4.8-.8.8-1.2z" />
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 64 64">
<path fill="#fff" d="M54 30.8c0 12-10 22-22 22s-22-9.6-22-22c0-12 10-22 22-22 12 .4 22 10 22 22z" />
<path fill="#dc4541" d="M50.4 29.6c0 8.4-12 16.8-18.4 20.8C25.2 46 13.6 38 13.6 29.6c0 0-.8-11.2 10-11.2 4 0 6 1.6 8.4 4 2.4-2.8 4.4-4 8.4-4 10.8.4 10 11.2 10 11.2zM32 .4C14.4.4 0 14.4 0 32s14.4 31.6 32 31.6 32-14 32-31.6S49.6.4 32 .4z" />
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<g class="sb-icon--mood__lines" transform="translate(15 8.57)">
<circle cx="6" cy="5.43" r="2"/>
<path d="M.49 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 8.92 3l.56-.32c.52-.29.7-.95.42-1.48A1.07 1.07 0 0 0 8.44.76a288.24 288.24 0 0 0-4.68 2.69c-.64.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .5 4.4z"/>
</g>
<g class="sb-icon--mood__lines" transform="matrix(-1 0 0 1 15 8.57)">
<circle cx="6" cy="5.43" r="2"/>
<path d="M.88 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 9.3 3l.56-.32c.52-.29.7-.95.41-1.48A1.07 1.07 0 0 0 8.83.76a288.24 288.24 0 0 0-4.68 2.69c-.65.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .88 4.4z"/>
</g>
<path class="sb-icon--mood__lines" d="M20.75 21.35A7.41 7.41 0 0 0 15 19c-2.39 0-4.33.79-5.75 2.35a.96.96 0 0 0 .12 1.41 1.1 1.1 0 0 0 1.5-.11c1-1.1 2.34-1.65 4.13-1.65s3.14.55 4.14 1.65a1.1 1.1 0 0 0 1.49.11c.44-.36.5-.99.12-1.41z"/>
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M10.15 20.9c1.05-1.65 2.8-2.25 4.89-1.7 1.71.44 3.23 1.12 4.53 2.02.5.34.58.97.18 1.4-.4.44-1.13.5-1.62.16a11.67 11.67 0 0 0-3.76-1.67c-1.06-.27-1.68-.06-2.2.76-.32.48-1.02.66-1.58.39-.55-.27-.75-.88-.44-1.36z"/>
<circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
<circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
<path class="sb-icon--mood__lines" d="M9.53 9.78a2.56 2.56 0 0 0 1.26-3.24c-.55-1.16-1.16.48-2.27 1.06-1.16.48-2.8-.1-2.27 1.06a2.56 2.56 0 0 0 3.28 1.12zm12.88 1.76a2.56 2.56 0 0 0 3.04-1.67c.33-1.24-1.2-.37-2.41-.64-1.2-.38-2.09-1.89-2.42-.65-.3 1.13.46 2.6 1.8 2.96z"/>
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M11.67 22h6.66c1.22 0 1.67-.45 1.67-1s-.45-1-1.67-1h-6.66c-1.22 0-1.67.45-1.67 1s.45 1 1.67 1z"/>
<circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
<circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M9 12c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0C6 13.64 7.34 12 9 12zm12 0c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0 0-1.56 1.34-3.2 3-3.2z"/>
<path class="sb-icon--mood__lines" d="M9.25 21.65A7.41 7.41 0 0 0 15 24c2.39 0 4.33-.79 5.75-2.35a.96.96 0 0 0-.12-1.41 1.1 1.1 0 0 0-1.5.11A5.26 5.26 0 0 1 15 22a5.26 5.26 0 0 1-4.14-1.65 1.1 1.1 0 0 0-1.49-.11.96.96 0 0 0-.12 1.41z"/>
</svg>
<svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M15 25c4.3 0 6-2.8 6-4.6 0-1.9-12-1.9-12 0 0 1.8 1.7 4.6 6 4.6z"/>
<path class="sb-icon--mood__eyes" d="M19.3 16.9c1.9-.6 5.2-1.9 5.8-4 0 .1.8-2.5-2-3.3-.6-.2-1.2 0-2 .4-.4-.6-.7-1.1-1.4-1.3-2.8-.7-3.3 2-3.3 1.9-.6 2.1 1.7 4.9 3 6.3zm-8.9 0c1.3-1.4 3.6-4.2 3-6.3 0 0-.5-2.6-3.3-1.9-.7.2-1 .7-1.5 1.3-.7-.3-1.3-.6-2-.4-2.8.8-1.9 3.4-2 3.3.7 2.1 4 3.4 5.8 4z"/>
</svg>
</div>
Source: components/_icons.scss, line 1
2.11.1 #Components.icons.modifiers Icons modifiers
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-icon--success
Applies a successful color to your icon.
.sb-icon--warning
Applies a warning color to your icon.
.sb-icon--error
Applies an error color to your icon.
.sb-icon--link
Applies the link behavior to your icon.
.sb-icon--xs
Makes your icon unreadable.
.sb-icon--s
Makes your icon tiny.
.sb-icon--m
The normal icon size.
.sb-icon--l
Makes your icon larger.
.sb-icon--xl
Makes your icon extra large.
Markup
<svg class="sb-icon [modifier class]" viewBox="0 0 16 16">
<path d="M6.074 13.8l-.567-9.298a.387.387 0 0 0-.4-.374.387.387 0 0 0-.37.403l.567 9.298a.386.386 0 0 0 .4.374.387.387 0 0 0 .37-.402zm6.163.708c-.052.376-.345.712-.77.712H4.533c-.425 0-.711-.333-.77-.712l-.77-11.599h10.014l-.77 11.599zM6.074 2.328V.775h3.852v1.551H6.074zm4.622-.146V.728c0-.402-.345-.728-.77-.728H6.074c-.426 0-.77.326-.77.728v1.454H.385A.375.375 0 0 0 0 2.546c0 .2.173.363.385.363h1.837l.77 11.636c.125.796.69 1.455 1.541 1.455h6.934c.85 0 1.396-.667 1.54-1.455l.77-11.636h1.838c.212 0 .385-.162.385-.363a.375.375 0 0 0-.385-.364h-4.919zm.001 11.647l.559-9.298a.387.387 0 0 0-.371-.403.386.386 0 0 0-.399.374l-.559 9.3a.386.386 0 0 0 .77.028zm-2.312-.015V4.505A.386.386 0 0 0 8 4.117a.386.386 0 0 0-.385.388v9.31c0 .214.172.387.385.387a.386.386 0 0 0 .385-.388z"/>
</svg>
Source: components/_icons.scss, line 147
2.12 #Components.input Input
Basic input component that should be used for email, number, password, tel, text and url inputs. It is also used to apply standard form styling to other components such as textarea, upload and dropdown. If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<label class="sb-label" for="input-id-1">Input Label</label>
<input class="sb-input" id="input-id-1" placeholder="Placeholder Text">
<label class="sb-label" for="textarea-id-1">Textarea Label</label>
<textarea class="sb-input" id="textarea-id-1" placeholder="Placeholder Text"></textarea>
Source: components/_input.scss, line 1
2.13 #Components.label Label
Basic label that can be used in combination with the input component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<label class="sb-label" for="input-id-1">Input Label</label>
<input class="sb-input" id="input-id-1" placeholder="Placeholder Text">
Source: components/_label.scss, line 1
2.13.1 #Components.label.small-caps Label in small caps
Labels in all small caps can be used as small titles. Usually used when structure or difference is needed, such as in filter components, sorting list, or as small section titles. Note however browser support is non-existent in IE or Edge.
Browser support: Safari9.1+, Firefox34+, Chrome30+
Markup
<label class="sb-label sb-label--small-caps" for="input-id-1">Section Info</label>
<section>This is a section with info about something</section>
Source: components/_label.scss, line 18
2.14 #Components.loader Loader
Simple loader, witn inline option. For a loader inside a button, check the Button Loader component.
Browser support: IE10+, Safari6.2+, Firefox31+, Chrome30+
Default styling
Loading page, please wait
.sb-loader--inline
Inline loader
Loading page, please wait
Markup
<div class="sb-loader [modifier class]" role="alert" aria-busy="true">
<svg viewBox="0 0 50 50" class="sb-spinner" aria-hidden="true">
<defs>
<path id="path-loader-[modifier class]" d="M25 50C11.2 50 0 38.8 0 25S11.2 0 25 0s25 11.2 25 25-11.2 25-25 25zm0-6.5c10.2 0 18.5-8.3 18.5-18.5S35.2 6.5 25 6.5 6.5 14.8 6.5 25 14.8 43.5 25 43.5z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="mask-loader-[modifier class]" fill="#fff">
<use xlink:href="#path-loader-[modifier class]"/>
</mask>
<use class="sb-spinner__secondary" transform="matrix(-1 0 0 1 50 0)" xlink:href="#path-loader-[modifier class]"/>
<path class="sb-spinner__primary" d="M0 0h26v26H0z" mask="url(#mask-loader-[modifier class])"/>
<path class="sb-spinner__primary" d="M6.5 26c0 2-1.4 3.3-3.2 3.3C1.5 29.3 0 28 0 26h6.5z" mask="url(#mask-loader-[modifier class])" transform="matrix(-1 0 0 1 6.522 0)"/>
<path class="sb-spinner__primary" d="M29.3 0C27.5 0 26 1.5 26 3.3c0 1.8 1.5 3.2 3.3 3.2V0z" mask="url(#mask-loader-[modifier class])" transform="matrix(-1 0 0 1 55.435 0)"/>
</g>
</svg>
<span class="sb-loader__label">Loading page, please wait</span>
</div>
Source: components/_loader.scss, line 3
2.15 #Components.modal Modal
A modal component showing fullscreen.
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Modal header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Markup
<div class="sb-modal sb-modal--open" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDesc" data-kss-animation-switch="sb-modal--open,sb-modal--close" data-kss-animation-name="Dialog open/close">
<div class="sb-modal__backdrop" aria-hidden="true"></div>
<div class="sb-modal__dialog" role="document">
<div class="sb-modal__content">
<button class="sb-modal__close sb-btn sb-btn--subtle" aria-label="Close">
<span class="sb-icon sb-icon--close" aria-hidden="true">×</span>
</button>
<h1 class="sb-title" id="modalTitle">Modal header</h1>
<p class="sb-text sb-margin-bottom-l" id="modalDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="sb-text--right">
<button class="sb-btn sb-btn--subtle sb-margin-right">Cancel</button>
<button class="sb-btn sb-btn--primary">OK button</button>
</div>
</div>
</div>
</div>
Source: components/_modal.scss, line 1
2.16 #Components.mood-rating Mood Rating
JavaScript is required for:
- Adding
sb-mood-rating--selectedclass after value is selected, so it is possible to set previous siblings styles. - When using
sb-mood-rating--customorsb-mood-rating--progressive, SVG is hidden.
Note that we do not use flexbox because it doesn't meet our browser support requirements.
Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+
Default styling
.sb-mood-rating--default
Default SVG showing rating
.sb-mood-rating--custom
Shows background image instead of SVG
.sb-mood-rating--progressive
Progressive mood rating, does not show tooltips or SVG
.sb-mood-rating--default.sb-mood-rating--selected
Changes opacity of default element
.sb-mood-rating--custom.sb-mood-rating--selected
Changes opacity of default element
.sb-mood-rating--progressive.sb-mood-rating--selected
Changes background position of default element
Markup
<div class="sb-mood-rating [modifier class]" role="radiogroup">
<input type="radio" value="1" name="mood-rating-[modifier class]" id="mood-rating-hate-[modifier class]" class="sb-mood-rating__input">
<label class="sb-mood-rating__label sb-mood-rating__label--1" for="mood-rating-hate-[modifier class]">
<div class="sb-tooltip__container">
<svg class="sb-mood-rating__icon sb-icon sb-icon--m" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<g class="sb-icon--mood__lines" transform="translate(15 8.57)">
<circle cx="6" cy="5.43" r="2"/>
<path d="M.49 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 8.92 3l.56-.32c.52-.29.7-.95.42-1.48A1.07 1.07 0 0 0 8.44.76a288.24 288.24 0 0 0-4.68 2.69c-.64.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .5 4.4z"/>
</g>
<g class="sb-icon--mood__lines" transform="matrix(-1 0 0 1 15 8.57)">
<circle cx="6" cy="5.43" r="2"/>
<path d="M.88 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 9.3 3l.56-.32c.52-.29.7-.95.41-1.48A1.07 1.07 0 0 0 8.83.76a288.24 288.24 0 0 0-4.68 2.69c-.65.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .88 4.4z"/>
</g>
<path class="sb-icon--mood__lines" d="M20.75 21.35A7.41 7.41 0 0 0 15 19c-2.39 0-4.33.79-5.75 2.35a.96.96 0 0 0 .12 1.41 1.1 1.1 0 0 0 1.5-.11c1-1.1 2.34-1.65 4.13-1.65s3.14.55 4.14 1.65a1.1 1.1 0 0 0 1.49.11c.44-.36.5-.99.12-1.41z"/>
</svg>
<div class="sb-mood-rating__tooltip sb-tooltip sb-tooltip--s">
<p>Hate</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
</label>
<input type="radio" value="2" name="mood-rating-[modifier class]" id="mood-rating-dislike-[modifier class]" class="sb-mood-rating__input">
<label class="sb-mood-rating__label sb-mood-rating__label--2" for="mood-rating-dislike-[modifier class]">
<div class="sb-tooltip__container">
<svg class="sb-mood-rating__icon sb-icon sb-icon--m" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M10.15 20.9c1.05-1.65 2.8-2.25 4.89-1.7 1.71.44 3.23 1.12 4.53 2.02.5.34.58.97.18 1.4-.4.44-1.13.5-1.62.16a11.67 11.67 0 0 0-3.76-1.67c-1.06-.27-1.68-.06-2.2.76-.32.48-1.02.66-1.58.39-.55-.27-.75-.88-.44-1.36z"/>
<circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
<circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
<path class="sb-icon--mood__lines" d="M9.53 9.78a2.56 2.56 0 0 0 1.26-3.24c-.55-1.16-1.16.48-2.27 1.06-1.16.48-2.8-.1-2.27 1.06a2.56 2.56 0 0 0 3.28 1.12zm12.88 1.76a2.56 2.56 0 0 0 3.04-1.67c.33-1.24-1.2-.37-2.41-.64-1.2-.38-2.09-1.89-2.42-.65-.3 1.13.46 2.6 1.8 2.96z"/>
</svg>
<div class="sb-mood-rating__tooltip sb-tooltip sb-tooltip--s">
<p>Dislike</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
</label>
<input type="radio" value="3" name="mood-rating-[modifier class]" id="mood-rating-neutral-[modifier class]" class="sb-mood-rating__input">
<label class="sb-mood-rating__label sb-mood-rating__label--3" for="mood-rating-neutral-[modifier class]">
<div class="sb-tooltip__container">
<svg class="sb-mood-rating__icon sb-icon sb-icon--m" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M11.67 22h6.66c1.22 0 1.67-.45 1.67-1s-.45-1-1.67-1h-6.66c-1.22 0-1.67.45-1.67 1s.45 1 1.67 1z"/>
<circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
<circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
</svg>
<div class="sb-mood-rating__tooltip sb-tooltip sb-tooltip--s">
<p>Neutral</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
</label>
<input type="radio" value="4" name="mood-rating-[modifier class]" id="mood-rating-like-[modifier class]" class="sb-mood-rating__input">
<label class="sb-mood-rating__label sb-mood-rating__label--4" for="mood-rating-like-[modifier class]">
<div class="sb-tooltip__container">
<svg class="sb-mood-rating__icon sb-icon sb-icon--m" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M9 12c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0C6 13.64 7.34 12 9 12zm12 0c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0 0-1.56 1.34-3.2 3-3.2z"/>
<path class="sb-icon--mood__lines" d="M9.25 21.65A7.41 7.41 0 0 0 15 24c2.39 0 4.33-.79 5.75-2.35a.96.96 0 0 0-.12-1.41 1.1 1.1 0 0 0-1.5.11A5.26 5.26 0 0 1 15 22a5.26 5.26 0 0 1-4.14-1.65 1.1 1.1 0 0 0-1.49-.11.96.96 0 0 0-.12 1.41z"/>
</svg>
<div class="sb-mood-rating__tooltip sb-tooltip sb-tooltip--s">
<p>Like</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
</label>
<input type="radio" value="5" name="mood-rating-[modifier class]" id="mood-rating-love-[modifier class]" class="sb-mood-rating__input">
<label class="sb-mood-rating__label sb-mood-rating__label--5" for="mood-rating-love-[modifier class]">
<div class="sb-tooltip__container">
<svg class="sb-mood-rating__icon sb-icon sb-icon--m" viewBox="0 0 30 30">
<path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
<path class="sb-icon--mood__lines" d="M15 25c4.3 0 6-2.8 6-4.6 0-1.9-12-1.9-12 0 0 1.8 1.7 4.6 6 4.6z"/>
<path class="sb-icon--mood__eyes" d="M19.3 16.9c1.9-.6 5.2-1.9 5.8-4 0 .1.8-2.5-2-3.3-.6-.2-1.2 0-2 .4-.4-.6-.7-1.1-1.4-1.3-2.8-.7-3.3 2-3.3 1.9-.6 2.1 1.7 4.9 3 6.3zm-8.9 0c1.3-1.4 3.6-4.2 3-6.3 0 0-.5-2.6-3.3-1.9-.7.2-1 .7-1.5 1.3-.7-.3-1.3-.6-2-.4-2.8.8-1.9 3.4-2 3.3.7 2.1 4 3.4 5.8 4z"/>
</svg>
<div class="sb-mood-rating__tooltip sb-tooltip sb-tooltip--s">
<p>Love</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
</label>
</div>
Source: components/_mood-rating.scss, line 3
2.18 #Components.popover Popover
Browser support: IE9+ (no transitions), Safari6+, Firefox30+, Chrome30+
Popover content
Markup
<button class="sb-btn sb-btn--primary">Popover anchor (trigger)</button>
<div class="sb-modal sb-popover--open" role="dialog" aria-labelledby="popover-content" data-kss-animation-switch="sb-popover--open,sb-popover--close" data-kss-animation-name="Popover open/close">
<div class="sb-popover__backdrop" aria-hidden="true"></div>
<div class="sb-popover__dialog" role="document">
<div class="sb-popover__content sb-margin-top-xs" role="presentation" tabIndex="-1">
<div class="sb-padding">
<p id="popover-content">Popover content</p>
</div>
</div>
</div>
</div>
Source: components/_popover.scss, line 1
2.19 #Components.preview Preview
Preview area.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
Preview
.sb-preview--active
Active preview
Preview
Markup
<div class="sb-preview [modifier class]">
<div class="sb-preview__frame">
<p class="sb-preview__label">Preview</p>
</div>
</div>
Source: components/_preview.scss, line 1
2.20 #Components.radio Radio
A basic radio component.
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Obs: please do not reuse extends on this file for other components (apart from checkbox)
Markup
<div>
<div class="sb-radio">
<input type="radio" id="radio-1" class="sb-radio__input">
<label class="sb-radio__label" for="radio-1">
<span class="sb-radio__faux">
<div class="sb-radio__circle"></div>
</span>
<span class="sb-radio__text">Basic radio.</span>
</label>
</div>
<div class="sb-radio">
<input type="radio" id="radio-2" class="sb-radio__input" disabled>
<label class="sb-radio__label" for="radio-2">
<span class="sb-radio__faux">
<div class="sb-radio__circle"></div>
</span>
<span class="sb-radio__text">Basic disabled radio.</span>
</label>
</div>
<div class="sb-radio">
<input type="radio" id="radio-3" class="sb-radio__input" disabled checked>
<label class="sb-radio__label" for="radio-3">
<span class="sb-radio__faux">
<div class="sb-radio__circle"></div>
</span>
<span class="sb-radio__text">Basic disabled and checked radio.</span>
</label>
</div>
</div>
Source: components/_radio.scss, line 1
2.20.1 #Components.radio.group Group
A basic radio group. Apply a .sb-radio-group class to the radio wrapper.
If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-radio-group--inline
radio group aligned horizontally
Markup
<div class="sb-radio-group [modifier class]" role="radiogroup">
<div class="sb-radio">
<input type="radio" name="radio-1-[modifier class]" id="radio-4-[modifier class]" class="sb-radio__input">
<label class="sb-radio__label" for="radio-4-[modifier class]">
<span class="sb-radio__faux">
<div class="sb-radio__circle"></div>
</span>
<span class="sb-radio__text">Basic radio</span>
</label>
</div>
<div class="sb-radio">
<input type="radio" name="radio-1-[modifier class]" id="radio-5-[modifier class]" class="sb-radio__input">
<label class="sb-radio__label" for="radio-5-[modifier class]">
<span class="sb-radio__faux">
<div class="sb-radio__circle"></div>
</span>
<span class="sb-radio__text">Basic radio</span>
</label>
</div>
<div class="sb-radio">
<input type="radio" name="radio-1-[modifier class]" id="radio-6-[modifier class]" class="sb-radio__input">
<label class="sb-radio__label" for="radio-6-[modifier class]">
<span class="sb-radio__faux">
<div class="sb-radio__circle"></div>
</span>
<span class="sb-radio__text">Basic radio</span>
</label>
</div>
</div>
Source: components/_radio.scss, line 105
2.21 #Components.rating Rating
A basic rating component.
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Markup
<div>
<div class="sb-rating">
<input type="radio" name="rating-1" id="rating-1" class="sb-rating__input">
<label class="sb-rating__label" for="rating-1">1</label>
</div>
<div class="sb-rating">
<input type="radio" name="rating-1" id="rating-1b" class="sb-rating__input" checked>
<label class="sb-rating__label" for="rating-1b">1</label>
</div>
</div>
Source: components/_rating.scss, line 3
2.21.1 #Components.rating.group Group
A basic rating group. Apply a .sb-rating-group class to the rating wrapper.
If text is included a {modifier class} is required.
If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-rating-group--below
Show text below
.sb-rating-group--above
Show text above
.sb-rating-group--inline
Show text before and after
Markup
<div class="sb-rating-group [modifier class]" role="ratinggroup">
<div class="sb-rating-group__text sb-rating-group__text--low">Not at all</div>
<ul class="sb-rating-group__numbers">
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-0-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-0-[modifier class]">0</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-1-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-1-[modifier class]">1</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-2-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-2-[modifier class]">2</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-3-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-3-[modifier class]">3</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-4-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-4-[modifier class]">4</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-5-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-5-[modifier class]">5</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-6-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-6-[modifier class]">6</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-7-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-7-[modifier class]">7</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-8-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-8-[modifier class]">8</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-9-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-9-[modifier class]">9</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-10-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-10-[modifier class]">10</label>
</li>
</ul>
<div class="sb-rating-group__text sb-rating-group__text--high">Very likely</div>
</div>
Source: components/_rating.scss, line 80
2.22 #Components.select Select
Select element. If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox35+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="select-id-1">Choose an option</label>
<div class="sb-select sb-form-control__input sb-form-control__input--icon-right">
<select class="sb-input" id="select-id-1">
<option selected>Select</option>
<option>Choice 1</option>
<option>Choice 2</option>
<option>Choice 3</option>
</select>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
</div>
Source: components/_select.scss, line 1
2.22.1 #Components.select.disabled Disabled Select
Browser support: IE9+, Safari6+, Firefox35+, Chrome30+
Markup
<div class="sb-form-control">
<label class="sb-label" for="select-id-2">Choose an option</label>
<div class="sb-select sb-form-control__input sb-form-control__input--icon-right">
<select class="sb-input" id="select-id-2" disabled>
<option selected>Select</option>
<option>Choice 1</option>
<option>Choice 2</option>
<option>Choice 3</option>
</select>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
</div>
Source: components/_select.scss, line 44
2.23 #Components.sidepanel Sidepanel
This sidepanel is used throughout UBNext. Note that there is no wrapper because:
1) We cannot create a new stacking context because the content has to animate below the main navigation and the button above it
2) If we have a wrapper, we need to animate it the exact same way as the content so that click events in the app can still be captured and the design is
not cut off, which means using transform, which means creating a new stacking context. Fun!
This means that in order to collapse the sidepanel, you need to add sb-sidepanel--collapsed to the aside, and sb-sidepanel__handle--collapsed to the handle.
In order to also animate your application correctly, use sb-container---sidepanel and sb-container--sidepanel-collapsed.
:focus-visiblewill not work in all browsers
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Markup
<aside class="sb-sidepanel" role="menu" aria-expanded="true" data-kss-animation-switch="sb-sidepanel--collapsed" data-kss-animation-name="Aside">
<div class="sb-sidepanel__content">
<button class="sb-btn sb-btn--primary sb-btn--block">Button</button>
</div>
</aside>
<button class="sb-sidepanel__handle" data-kss-animation-switch="sb-sidepanel__handle--collapsed" data-kss-animation-name="Button">
<svg class="sb-icon sb-icon--s sb-icon--arrow" viewBox="0 0 10 10">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="2">
<path stroke-linejoin="round" d="M5 1L1 5l4 4"/>
<path d="M2 5h7"/>
</g>
</svg>
</button>
Source: components/_sidepanel.scss, line 3
2.24 #Components.table Table
JavaScript is required for:
- Adding/removing visible class on keyboard tab, if touchscreen or after any checkbox selection
:focus-visiblewill not work in all browsers
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table--checkbox-visible
Shows all elements on checkbox column.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table--compact.sb-table--checkbox-visible
Applies small padding to the cells of your table.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table--comfortable.sb-table--checkbox-visible
Applies big padding to the cells of your table.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table__tr.sb-table__tr--inactive
Disable hover highlight for table row.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active |
Markup
<div class="sb-table [modifier class]">
<table class="sb-table__table" role="grid">
<thead class="sb-table__thead sb-text--smallcaps">
<tr class="sb-table__tr">
<th class="sb-table__hh sb-table__action sb-text--center" scope="col">
<!-- empty cel for checkbox column, we don't have select all function yet -->
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Form Name<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Platform<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col" aria-sort="ascending">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="">
Created<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col" aria-sort="descending">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Performance<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Status<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
</tr>
</thead>
<tbody class="sb-text--s">
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-1-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-1-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<td class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-1-[modifier class]">NPS campaign CS Nordics</label>
</td>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">19 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-2-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-2-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-2-[modifier class]">Slide-out campaign: really big title slide out how did you find us?</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--error" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Disabled
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-3-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-3-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-3-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
</tbody>
</table>
</div>
Source: components/_table.scss, line 1
2.24.1 #Components.table.scrollable Table with scrollable content
Markup change compared to not scrollable content:
- your table needs to be in a parent ("viewport") with a fixed size
- your table needs to be wrapped in a
.table-container - each column (th and td elements) are going to have the same width. But you can specify a width in percent for each column to adapt the grid.
- compare to previous one, on the first th, don't forget to put
sb-table__checkboxthat define a specific size for the column checkbox - there is also a specific class for tbody
sb-table__tbody
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Default styling
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table--checkbox-visible
Shows all elements on checkbox column.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table--compact.sb-table--checkbox-visible
Applies small padding to the cells of your table.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table--comfortable.sb-table--checkbox-visible
Applies big padding to the cells of your table.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active |
.sb-table__tr.sb-table__tr--inactive
Disable hover highlight for table row.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Disabled | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active | ||
|
|
18 Sept 2018 | 221 Completed | Active |
Markup
<style>
#kssref-components-table-scrollable td,
#kssref-components-table-scrollable th {
width: 15%;
}
#kssref-components-table-scrollable td:nth-child(1),
#kssref-components-table-scrollable th:nth-child(1) {
width: 40px;
}
#kssref-components-table-scrollable td:nth-child(2),
#kssref-components-table-scrollable th:nth-child(2) {
width: 50%;
}
}
</style>
<div class="sb-table sb-table--scrollable-content [modifier class]">
<table class="sb-table__table" role="grid">
<thead class="sb-table__thead sb-text--smallcaps">
<tr class="sb-table__tr">
<th class="sb-table__hh sb-table__action sb-text--center sb-table__checkbox" scope="col">
<!-- empty cel for checkbox column, we don't have select all function yet -->
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Form Name<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Platform<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col" aria-sort="ascending">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="">
Created<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col" aria-sort="descending">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Performance<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Status<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
</tr>
</thead>
<tbody class="sb-table__tbody sb-text--s">
<tr class="sb-table__tr [modifier class]">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-1-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-1-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-1-[modifier class]">NPS campaign CS Nordics</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">19 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-2-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-2-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-2-[modifier class]">Slide-out campaign: really big title slide out how did you find us?</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--error" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Disabled
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-3-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-3-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-3-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-4-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-4-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-4-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-5-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-5-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-5-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-6-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-6-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-6-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-7-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-7-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-7-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-8-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-8-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-8-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-9-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-9-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-9-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-10-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-10-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-10-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-11-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-11-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-11-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr [modifier class]">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-12-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-12-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-12-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
<tr class="sb-table__tr">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-table-scollable-13-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-table-scollable-13-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
<path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
</svg>
</span>
</label>
</div>
</td>
<th class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-scollable-13-[modifier class]">Exit Survey (Product Page)</label>
</th>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
</tbody>
</table>
</div>
Source: components/_table.scss, line 291
- Element 1
- Element 2
- Element 3
- Element 4
Markup
<ul class="sb-table-list">
<li class="sb-table-list__item"> Element 1 </li>
<li class="sb-table-list__item"> Element 2 </li>
<li class="sb-table-list__item"> Element 3 </li>
<li class="sb-table-list__item"> Element 4 </li>
</ul>
Source: components/_table-list.scss, line 1
2.25.1 #Components.table-list.hover Hover
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Markup
<ul class="sb-table-list">
<li class="sb-table-list__item sb-flex sb-align-items-center sb-hide-child">
<div class="sb-padding">Element 1</div>
<svg class="sb-icon sb-child" viewBox="0 0 13 16">
<path d="M7.21582935 3.881V0L13 6l-5.78417065 6V8.0345C.4864288 7.8705.77515533 12.7805 2.48823387 16-1.73999488 11.259-.8424844 3.663 7.21582935 3.881"/>
</svg>
</li>
<li class="sb-table-list__item sb-flex sb-align-items-center sb-hide-child">
<div class="sb-padding">Element 2</div>
<svg class="sb-icon sb-child" viewBox="0 0 13 16">
<path d="M7.21582935 3.881V0L13 6l-5.78417065 6V8.0345C.4864288 7.8705.77515533 12.7805 2.48823387 16-1.73999488 11.259-.8424844 3.663 7.21582935 3.881"/>
</svg>
</li>
<li class="sb-table-list__item sb-flex sb-align-items-center sb-hide-child">
<div class="sb-padding">Element 3</div>
<svg class="sb-icon sb-child" viewBox="0 0 13 16">
<path d="M7.21582935 3.881V0L13 6l-5.78417065 6V8.0345C.4864288 7.8705.77515533 12.7805 2.48823387 16-1.73999488 11.259-.8424844 3.663 7.21582935 3.881"/>
</svg>
</li>
<li class="sb-table-list__item sb-flex sb-align-items-center sb-hide-child">
<div class="sb-padding">Element 4</div>
<svg class="sb-icon sb-child" viewBox="0 0 13 16">
<path d="M7.21582935 3.881V0L13 6l-5.78417065 6V8.0345C.4864288 7.8705.77515533 12.7805 2.48823387 16-1.73999488 11.259-.8424844 3.663 7.21582935 3.881"/>
</svg>
</li>
</ul>
Source: components/_table-list.scss, line 31
2.27 #Components.tile Tile
Tile element is used for example in a modal window.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Tile component
Markup
<div class="sb-tile">
<div class="sb-padding-xl">Tile component</div>
</div>
Source: components/_tile.scss, line 1
2.28 #Components.toast Toast
Basic toast. Apply and remove sb-toast--hidden to animate the toast in and out.
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Toast title
Toast message
Toast title
Toast message that is unfortunately very long and annoying because it breaks onto multiple lines like this
Markup
<div class="sb-toast" role="alertdialog" data-kss-animation-switch="sb-toast--hidden">
<div class="sb-toast__icon">
<svg class="sb-icon sb-icon--error" viewBox="0 0 16 16">
<path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
</svg>
</div>
<div class="sb-toast__message">
<p class="sb-title--s">Toast title</p>
<p class="sb-text--s">Toast message</p>
</div>
<button class="sb-toast__button">
Close
</button>
</div>
<br/>
<br/>
<div class="sb-toast" role="alertdialog">
<div class="sb-toast__icon">
<svg class="sb-icon sb-icon--error" viewBox="0 0 16 16">
<path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
</svg>
</div>
<div class="sb-toast__message">
<p class="sb-title--s">Toast title</p>
<p class="sb-text--s">Toast message that is unfortunately very long and annoying because it breaks onto multiple lines like this</p>
</div>
<button class="sb-toast__button">
Close
</button>
</div>
Source: components/_toast.scss, line 1
2.29 #Components.tooltip Tooltip
Tooltip element default (medium). Used for descriptions or explanation of an action on the interface. Slides up to the top of its container. Note that we do not currently support inline elements with tooltips.
Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+
Default styling
hover me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at.
Alea iacta est!
.sb-tooltip--bottom
Slides down to the bottom of its container.
hover me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at.
Alea iacta est!
Markup
<div class="sb-tile sb-padding-l sb-text--center">
<div class="sb-tooltip__container" aria-describedby="tooltip-1">
<a href="#">hover me</a>
<div role="tooltip" id="tooltip-1" class="sb-tooltip [modifier class]">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at.</p>
<p>Alea iacta est!</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
</div>
Source: components/_tooltip.scss, line 3
2.29.1 #Components.tooltip.large Tooltip large
Tooltip element large. Used for long text (not ideal). e.g: comments on feedback page or privacy policy.
Browser support: IE9+, Safari6.2+, Firefox30+, Chrome30+
hover me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at. Mauris quis tincidunt eros. Sed eu felis nulla. Aliquam ullamcorper magna risus, id placerat leo pulvinar at. Nunc tortor nunc, porttitor a finibus vel, tristique quis enim. Mauris eget mauris laoreet, vulputate libero finibus, dignissim nisi. In nec lectus vel est vehicula efficitur consequat vel ligula. Curabitur accumsan quam at mauris finibus, et egestas nulla ultricies. Pellentesque vel venenatis tellus, sed tempus ex. Nunc condimentum ligula eros, id scelerisque odio blandit quis. Morbi sit amet felis non ex dictum vulputate.
Markup
<div class="sb-tooltip__container sb-text--center" aria-describedby="tooltip-5">
<p>hover me</p>
<div role="tooltip" id="tooltip-5" class="sb-tooltip sb-tooltip--l">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at. Mauris quis tincidunt eros. Sed eu felis nulla. Aliquam ullamcorper magna risus, id placerat leo pulvinar at. Nunc tortor nunc, porttitor a finibus vel, tristique quis enim. Mauris eget mauris laoreet, vulputate libero finibus, dignissim nisi. In nec lectus vel est vehicula efficitur consequat vel ligula. Curabitur accumsan quam at mauris finibus, et egestas nulla ultricies. Pellentesque vel venenatis tellus, sed tempus ex. Nunc condimentum ligula eros, id scelerisque odio blandit quis. Morbi sit amet felis non ex dictum vulputate.</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
Source: components/_tooltip.scss, line 210
2.29.2 #Components.tooltip.left Tooltip left
Tooltip element positioned to the left of its parent. Used when there's not enough space on the left for the tooltip to overflow when centered.
Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+
hover me
Fancy tooltip content.
Markup
<div class="sb-tooltip__container" aria-describedby="tooltip-2">
<p>hover me</p>
<div role="tooltip" id="tooltip-2" class="sb-tooltip sb-tooltip--left">
<p>Fancy tooltip content.</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
Source: components/_tooltip.scss, line 154
2.29.3 #Components.tooltip.right Tooltip right
Tooltip element positioned to the right of its parent. Used when there's not enough space on the right for the tooltip to overflow when centered.
Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+
hover me
Fancy tooltip content.
Markup
<div class="sb-tooltip__container sb-text--right" aria-describedby="tooltip-3">
<p>hover me</p>
<div role="tooltip" id="tooltip-3" class="sb-tooltip sb-tooltip--right">
<p>Fancy tooltip content.</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
Source: components/_tooltip.scss, line 173
2.29.4 #Components.tooltip.small Tooltip small
Tooltip element small. Always displayed on one line! Used for small descriptions or names. eg: emotions in mood rating.
Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+
hover me
Fancy tooltip content.
Markup
<div class="sb-tooltip__container sb-text--center" aria-describedby="tooltip-4">
<p>hover me</p>
<div role="tooltip" id="tooltip-4" class="sb-tooltip sb-tooltip--s">
<p>Fancy tooltip content.</p>
<div class="sb-tooltip__arrow"></div>
</div>
</div>
Source: components/_tooltip.scss, line 192
2.30 #Components.upload Upload
The file upload component. Ensure you change or remove the html attributes as required.
Browser support: IE10+, Safari9+, Firefox30+, Chrome30+
JavaScript is required for:
- Activating the delete button
- Replacement of the filename text when a file is selected
- Switching between inactive (no file selected) and active (a file is selected) by toggling
sb-upload--inactive - Activating the upload click handler when enter or spacebar are pressed (for accessibility purposes)
Default styling
.sb-upload--inactive
Add and remove this class with js to switch between active and inactive states
Markup
<div class="sb-upload [modifier class]">
<button class="sb-upload__btn sb-btn sb-btn--secondary" id="upload-button-[modifier class]">Upload File</button>
<input class="sb-upload__input" type="file" id="upload-id-[modifier class]" name="upload-1" accept="image/*">
<label class="sb-upload__label" for="upload-id-[modifier class]">
<div class="sb-upload__faux sb-input" role="button" tabindex="0">
<input class="sb-upload__filename" aria-labelledby="upload-button-[modifier class]" readonly value="a-very-very-very-very-very-very-very-very-very-very-very-very-long-filename.jpg"/>
<span class="sb-upload__link" id="upload-link-[modifier class]">change</span>
</div>
</label>
<button class="sb-upload__delete" aria-label="Delete">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
</svg>
</button>
</div>
Source: components/_upload.scss, line 1
2.30.1 #Components.upload.validation Upload with validation
The file upload component with validation.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Error message here.
Markup
<div class="sb-form-control sb-form-control--invalid">
<div class="sb-upload">
<button class="sb-upload__btn sb-btn sb-btn--secondary" id="upload-button-">Upload File</button>
<input class="sb-upload__input" type="file" id="upload-id-validation" name="upload-1" accept="image/*">
<label class="sb-upload__label" for="upload-id-validation">
<div class="sb-upload__faux sb-input" role="button" tabindex="0">
<input class="sb-upload__filename" aria-labelledby="upload-button-" readonly value="a-very-very-very-very-very-very-very-very-very-very-very-very-long-filename.jpg"/>
<span class="sb-upload__link" id="upload-link-validation">change</span>
</div>
</label>
<button class="sb-upload__delete" aria-label="Delete">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
</svg>
</button>
</div>
<p role="alert" class="sb-form-control__validation">Error message here.</p>
</div>
Source: components/_upload.scss, line 122
2.31 #Components.wizard-dialog Wizard Dialog
A wizard dialog component. (by default not visible, you should add sb-wizard-dialog--open to open it)
A wizard contains multiple steps and only one step is active. The wizard appears in a fullscreen dialog.
Browser support: IE11+, Safari9+, Firefox30+, Chrome30+
Wizard title
Markup
<div id="wizardDialog" class="sb-wizard-dialog sb-wizard-dialog--open" role="dialog" aria-modal="true" aria-labelledby="wizardTitle" data-kss-animation-switch="sb-wizard-dialog--open" data-kss-animation-name="Dialog open/close">
<div class="sb-wizard-dialog__header">
<button class="sb-wizard-dialog__back sb-btn sb-btn--s sb-btn--subtle" aria-controls="wizard" aria-label="Back">
<svg class="sb-icon sb-icon--m sb-icon--arrow" viewBox="0 0 10 10">
<g fill="none" stroke-linecap="round" stroke-width="2">
<path stroke-linejoin="round" d="M5 1L1 5l4 4"/>
<path d="M2 5h7"/>
</g>
</svg>
</button>
<h1 class="sb-title--l" id="wizardTitle">Wizard title</h1>
<button class="sb-wizard-dialog__close sb-btn sb-btn--s sb-btn--subtle" aria-controls="wizard" aria-label="Close">
<svg class="sb-icon sb-icon--m" viewBox="0 0 17 17">
<path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
</svg>
</button>
</div>
<div class="sb-wizard-dialog__content">
<div class="sb-wizard-dialog__step sb-wizard-dialog__step--active" data-kss-animation-switch="sb-wizard-dialog__step--active" data-kss-animation-name="Step change">
<div class="sb-flex" style="justify-content: center; align-items:center; height:100%;">
<button class="sb-btn" >Centered button</button>
</div>
</div>
</div>
<div class="sb-wizard-dialog__footer">
<span class="sb-title--s sb-text--smallcaps">45 status</span>
<div class="sb-wizard-dialog__actions">
<button class="sb-btn sb-margin-right-s" aria-controls="wizard">Secondary</button>
<button class="sb-btn sb-btn--primary" aria-controls="wizard">Main</button>
</div>
</div>
</div>
Source: components/_wizard-dialog.scss, line 1