2 #Components Components

2.1 #Components.alert Alert

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

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

2.2 #Components.badge Badge

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
5
.sb-badge--xs
Extra small size badge
5
.sb-badge--s
Small size badge
5
.sb-badge--l
Large size badge
5
.sb-badge--xl
Extra large size badge
5
.sb-badge--rounded
Rounded badge
5
.sb-badge--xs.sb-badge--rounded
Extra small size badge with rounded corner
5
Markup 
 <span class="sb-badge [modifier class]">
   5
 </span>
Source: components/_badge.scss, line 1

2.3 #Components.button Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Button types.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-btn--primary
Primary button
.sb-btn--secondary
Secondary button
.sb-btn--subtle
Subtle button
.sb-btn--block
Block button (span the full width of a parent)
Markup 
<button class="sb-btn [modifier class]">Button</button>
<button class="sb-btn [modifier class]" aria-label="Star">
  <svg class="sb-icon" viewBox="0 0 16 16">
    <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>
</button>
<button class="sb-btn [modifier class]" 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>
 Delete
</button>
<button class="sb-btn [modifier class]" disabled>Disabled</button>
Source: components/_button.scss, line 1

2.3.1 #Components.button.background-colors Background colors

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Button background colors.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-btn--danger
Danger button
.sb-btn--warning
Warning button
.sb-btn--success
Success button
Markup 
<button class="sb-btn sb-btn--primary [modifier class]">Button</button>
<button class="sb-btn sb-btn--primary [modifier class]" disabled>Disabled</button>
Source: components/_button.scss, line 236

2.3.2 #Components.button.fakeDisabled Fake Disabled Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Buttons with the disabled styles but not really disabled. I know, you shouldn't use those unless you have a good reason for it.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Markup 
<button class="sb-btn sb-btn--primary sb-btn--disabled">Button</button>
<button class="sb-btn sb-btn--secondary sb-btn--disabled">Button</button>
<button class="sb-btn sb-btn--subtle sb-btn--disabled">Button</button>
Source: components/_button.scss, line 29

2.3.3 #Components.button.link Link

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Button Link.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-btn--subtle-link
Subtle link button
Markup 
<button class="sb-btn [modifier class]">Button</button>
Source: components/_button.scss, line 417

2.3.4 #Components.button.loader Loader

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Adding/removing loader markup inside button
  • Adding/removing loader class and disabled attribute

Obs: do not remove button text when applying the loader, so the button can keep the same size.

Browser support: IE10+, Safari6+, Firefox31+, Chrome30+

Default styling
.sb-btn--primary
Primary button
.sb-btn--secondary
Secondary button
.sb-btn--subtle
Subtle button
Markup 
<button class="sb-btn [modifier class] sb-btn--loader" disabled>
  <div class="sb-loader sb-loader--button" role="alert" aria-busy="true">
    <svg viewBox="0 0 50 50" class="sb-spinner">
      <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>
  </div>
  Button
</button>
Source: components/_button.scss, line 333

2.3.5 #Components.button.sizes Sizes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Button sizes.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-btn--l
Large button
.sb-btn--s
Small button
Markup 
<button class="sb-btn [modifier class]">Button</button>
<button class="sb-btn [modifier class] sb-btn--secondary">Secondary</button>
<button class="sb-btn [modifier class] sb-btn--primary">Primary</button>
<button class="sb-btn [modifier class] sb-btn--subtle">Subtle</button>
Source: components/_button.scss, line 308

2.3.6 #Components.button.text-colors Text colors

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Button text colors.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-btn--text-blue
Blue text button
Markup 
<button class="sb-btn sb-btn--subtle [modifier class]">Button</button>
<button class="sb-btn sb-btn--primary [modifier class]" disabled>Disabled</button>
Source: components/_button.scss, line 280

2.4 #Components.button-group Button Group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Group a series of buttons together on a single line. If you would like to apply validation styles and messages, check out the Form Control component.

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Markup 
<div class="sb-btn-group" role="radiogroup">
  <button class="sb-btn" role="radio" aria-checked="false">Button one</button>
  <button class="sb-btn" role="radio" aria-checked="false">Button two</button>
  <button class="sb-btn sb-btn--active" role="radio" aria-checked="true">Active</button>
  <button class="sb-btn" disabled role="radio" aria-checked="false">Disabled</button>
</div>
Source: components/_button-group.scss, line 1

2.5 #Components.card Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Card element is used for actionable and selection 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-col-xs3 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.5.1 #Components.card.compact Card - Compact

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE11+, Safari6.1+, Firefox30+, Chrome30+

Default styling

Label

Label

Label

Label

Label

Label

Coming soon

A long label over two lines

A long label over two lines

Coming soon

.sb-card--compact
compact card with the fixed width and height

Label

Label

Label

Label

Label

Label

Coming soon

A long label over two lines

A long label over two lines

Coming soon

Markup 
<div class="sb-thumbnail-container">
   <div class="sb-card-wrap sb-flex sb-flex-wrap">
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
         <p class="sb-thumbnail__description">Coming soon</p>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">A long label over two lines</h4>
       </div>
     </div>
     <div class="sb-card sb-margin-horizontal-s sb-margin-bottom-l [modifier class]">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">A long label over two lines</h4>
         <p class="sb-thumbnail__description">Coming soon</p>
       </div>
     </div>
   </div>
</div>
Source: components/_card.scss, line 87

2.5.2 #Components.card.radio Card - compact with radio button selection

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE11+, Safari6.1+, Firefox30+, Chrome30+

Markup 
<div class="sb-thumbnail-container">
   <div class="sb-card-wrap sb-flex sb-flex-wrap" role="radiogroup">
     <input type="radio" name="radio-chart-type" id="mood-chart" class="sb-thumbnail__input" value="mood" />
     <label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="mood-chart">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
       </div>
     </label>
     <input type="radio" name="radio-chart-type" id="nps-chart"  class="sb-thumbnail__input" value="nps" />
     <label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="nps-chart">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Label</h4>
         <p class="sb-thumbnail__description">Coming soon</p>
       </div>
     </label>
     <input type="radio" name="radio-chart-type" id="opentext-chart"  class="sb-thumbnail__input" value="opentext"  />
     <label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="opentext-chart">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">A long label over two lines</h4>
       </div>
     </label>
     <input type="radio" name="radio-chart-type" id="presentation-chart"  class="sb-thumbnail__input" value="presentation"/>
     <label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="presentation-chart">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">A long label over two lines</h4>
         <p class="sb-thumbnail__description">Coming soon</p>
       </div>
     </label>
     <input type="radio" name="radio-chart-type" id="presentation-chart"  class="sb-thumbnail__input" disabled/>
     <label class="sb-card sb-margin-horizontal-s sb-margin-bottom-l sb-card--compact " for="presentation-chart">
       <div class="sb-card__header">
         <span class="sb-thumbnail__image sb-thumbnail__image--lock" aria-role="presentation"></span>
       </div>
       <div class="sb-card__body">
         <h4 class="sb-thumbnail__title">Coming soon</h4>
         <p class="sb-thumbnail__description">Disabled card</p>
       </div>
     </label>
   </div>
</div>
Source: components/_card.scss, line 274

2.6 #Components.checkbox Checkbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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" checked>
    <label class="sb-checkbox__label" for="checkbox-1">
      <span class="sb-checkbox__faux">
       <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
         <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
       </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 11 11" focusable="false" aria-hidden="true" role="presentation">
         <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
       </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 11 11" focusable="false" aria-hidden="true" role="presentation">
         <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
       </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.fake Fake checkbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A checkbox without the input to be used when you want full control of the input outside of the component.

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Basic fake checkbox.
Basic fake checked checkbox.
Basic fake disabled checkbox.
Basic fake checked and disabled checkbox.
Markup 
<div>
  <div class="sb-checkbox">
    <span class="sb-checkbox__faux">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
    <span class="sb-checkbox__text">Basic fake checkbox. </span>
  </div>
  <div class="sb-checkbox sb-checkbox--checked">
    <span class="sb-checkbox__faux">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
    <span class="sb-checkbox__text">Basic fake checked checkbox. </span>
  </div>
  <div class="sb-checkbox sb-checkbox--disabled">
    <span class="sb-checkbox__faux">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
    <span class="sb-checkbox__text">Basic fake disabled checkbox. </span>
  </div>
  <div class="sb-checkbox sb-checkbox--checked sb-checkbox--disabled">
    <span class="sb-checkbox__faux">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
    <span class="sb-checkbox__text">Basic fake checked and disabled checkbox. </span>
  </div>
</div>
Source: components/_checkbox.scss, line 49

2.6.2 #Components.checkbox.group Group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 11 11" focusable="false" aria-hidden="true" role="presentation">
          <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
        </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 11 11" focusable="false" aria-hidden="true" role="presentation">
          <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
        </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 11 11" focusable="false" aria-hidden="true" role="presentation">
          <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </span>
      <span class="sb-checkbox__text">Basic checkbox</span>
    </label>
  </div>
</div>
Source: components/_checkbox.scss, line 172

2.6.3 #Components.checkbox.no-label No label

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A complete different checkbox component, more flexible (not dependent of a DOM label element)

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

Markup 
<div class="sb-checkbox-without-label sb-margin-xs">
  <input type="checkbox" id="checkbox-without-label-1" class="sb-checkbox-without-label__input">
  <div class="sb-checkbox-without-label__checkmark-container">
    <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
      <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>
<div class="sb-checkbox-without-label sb-margin-xs">
  <input type="checkbox" id="checkbox-without-label-2" class="sb-checkbox-without-label__input" checked>
  <div class="sb-checkbox-without-label__checkmark-container">
    <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
      <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>
<div class="sb-checkbox-without-label sb-margin-xs">
  <input type="checkbox" id="checkbox-without-label-3" class="sb-checkbox-without-label__input" disabled>
  <div class="sb-checkbox-without-label__checkmark-container">
    <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
      <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>
<div class="sb-checkbox-without-label sb-margin-xs">
  <input type="checkbox" id="checkbox-without-label-4" class="sb-checkbox-without-label__input" checked disabled>
  <div class="sb-checkbox-without-label__checkmark-container">
    <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
      <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>
Source: components/_checkbox.scss, line 240

2.7 #Components.chip Chip

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Chip is a reusbale component to build query-builder component

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
.sb-chip--placeholder
chip empty state
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
.sb-chip--active
chip active state when user editing chip
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
.sb-chip--error
chip error state
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
Markup 
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="This is a great tag">
  <div class="sb-chip__content">
   This is a great tag
  </div>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="Match any filters" role="button">
  <div class="sb-chip__content" >
   Match <strong>any</strong> filters
  </div>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!" role="button">
 <div class="sb-chip__content">
  This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
 </div>
</div>
Source: components/_chip.scss, line 1

2.7.1 #Components.chip.clear Chip with clear icon

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Chip componenent with clear icon to remove the tags

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
.sb-chip--placeholder
chip placeholder state
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
.sb-chip--active
chip active state when user editing Chips
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
.sb-chip--error
chip error state
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
Markup 
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="Select NPS Question" role="button">
   <div class="sb-chip__content">
     Select NPS Question
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" 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-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="How likely are you to recommend us to a friend How likely are you to recommend us to a friend" role="button">
   <div class="sb-chip__content">
     <div class="sb-flex sb-flex-row">
       <span class="sb-chip__text">How likely are you to recommend us to a friend How likely are you to recommend us to a friend</span>
       <span class="sb-chip__text">includes</span>
       <span class="sb-chip__text">1 - 5</span>
     </div>
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" 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-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" role="button" aria-label="Platform">
   <div class="sb-chip__content">
     <div class="sb-flex sb-flex-row">
       <span class="sb-chip__text">Platform</span>
       <span class="sb-chip__text">includes</span>
       <span class="sb-chip__text">Windows, Mac OSX, Android, iOS</span>
     </div>
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" 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-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="Platform" role="button">
   <div class="sb-chip__content">
     <div class="sb-flex sb-flex-row">
       <span class="sb-chip__text">Platform</span>
       <span class="sb-chip__text">includes</span>
       <span class="sb-chip__text">Windows, Mac OSX, Android, iOS, Firefox OS, Chromium</span>
     </div>
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" 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>
Source: components/_chip.scss, line 171

2.8 #Components.chipsContainer ChipsContainer

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

ChipsContainer is a component which holds Chips. The example here puts the end and start tags of the chips together since they use inline-flex display, otherwise there is too much spacing between them. This will never be a problem once implemented in React.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

This is a great tag
This is a great tag
This is a great tag
Markup 
<div class="sb-chips-container sb-padding-top-s sb-padding-left-xl sb-border-bottom-light-3">
  <div className="sb-container sb-flex sb-flex-wrap sb-align-items-start">
    <div class="sb-chip" tabindex="0" aria-label="This is a great tag">
      <div class="sb-chip__content">
       This is a great tag
      </div>
    </div><div class="sb-chip" tabindex="0" aria-label="This is a great tag">
      <div class="sb-chip__content">
       This is a great tag
      </div>
    </div><div class="sb-chip" tabindex="0" aria-label="This is a great tag">
      <div class="sb-chip__content">
       This is a great tag
      </div>
    </div>
  </div>
</div>
Source: components/_chips-container.scss, line 1

2.9 #Components.date-picker DatePicker

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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
September
2018
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.sb-date-picker__overlay-wrapper--open
Open date picker
To
September
2018
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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.9.1 #Components.date-picker.disabled Disabled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 757

2.9.2 #Components.date-picker.invalid Invalid

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

An invalid date picker.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

To
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 785

2.9.3 #Components.date-picker.suggestion-to-calendar Suggestion to calendar animation

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Special animation when switching from suggestions popover to calendar view. You just have to put the css class sb-date-picker__suggestion-was-open on the top container (sb-date-picker) then the new open/close animation will be applied.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

Default styling
To
September
2018
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.sb-date-picker__overlay-wrapper--open
Open date picker
To
September
2018
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Markup 
<div class="sb-date-picker sb-date-picker__suggestion-was-open">
  <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 817

2.10 #Components.dropdown Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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
  • Choice 1
  • Choice 2
  • Choice 3
.sb-dropdown--open
open dropdown
  • Choice 1
  • Choice 2
  • Choice 3
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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
         <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
       </svg>
     </div>
     <ul class="sb-dropdown__menu" role="listbox">
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 1</li>
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 2</li>
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 3</li>
     </ul>
   </div>
 </div>
Source: components/_dropdown.scss, line 1

2.10.1 #Components.dropdown.disabled Disabled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

  • Choice 1
  • Choice 2
  • Choice 3
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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
        <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </svg>
     </div>
     <ul class="sb-dropdown__menu" role="listbox">
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 1</li>
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 2</li>
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 3</li>
     </ul>
   </div>
 </div>
Source: components/_dropdown.scss, line 310

2.10.2 #Components.dropdown.multiselect Multiselect

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
         <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </svg>
    </div>
    <ul class="sb-dropdown__menu" role="listbox">
      <li class="sb-dropdown__menu-item sb-text--milo" 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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 1</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo sb-dropdown__menu-item sb-text--milo--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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 2</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo" 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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 3</span>
          </label>
        </div>
      </li>
    </ul>
  </div>
</div>
Source: components/_dropdown.scss, line 155

2.10.3 #Components.dropdown.no-search-results No search results

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

  • No results
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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
        <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </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 281

2.10.4 #Components.dropdown.search Search

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
        <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </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-text--milo sb-dropdown__menu-item sb-text--milo--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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 1</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo" 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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 2</span>
          </label>
        </div>
      </li>
    </ul>
  </div>
</div>
Source: components/_dropdown.scss, line 223

2.10.5 #Components.dropdown.search-with-create-item-action Search with create item action

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
        <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </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-text--milo sb-dropdown__menu-item sb-text--milo--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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Netherlands</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo" 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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Germany</span>
          </label>
        </div>
      </li>
      <li>
        <button class="sb-dropdown__menu-item sb-text--milo 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 336

2.10.6 #Components.dropdown.search-with-no-results-and-create-item-action Search with no results and create item action

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
         <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </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-text--milo 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 404

2.10.7 #Components.dropdown.subtext Dropdown with sub text in the items

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Filtering the menu items based on the search input
  • Highlighting items

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

  • Choice 1
    Exit Survey October 18
  • Choice 2
    Exit Survey October 18
  • Choice 3
    Exit Survey October 18
  • Choice 10
    Exit Survey October 18
  • Choice 20
    Exit Survey October 18
  • Choice 30
    Exit Survey October 18
Markup 
<div class="sb-form-control">
	<label class="sb-label" for="dropdown-create-items-function">Dropdown with sub text</label>
	<div class="sb-dropdown sb-dropdown--open">
		<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
			<button class="sb-input" id="dropdown-create-items-function" aria-haspopup="true" aria-invalid="false" aria-expanded="true">Please select...</button>
     <svg viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
       <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
     </svg>
		</div>
		<ul id="dropdown-create-items-function-menu" class="sb-dropdown__menu" role="listbox" tabindex="-1" aria-live="assertive" aria-controls="dropdown-create-items-function-menu-no-result-message">
			<li class="sb-dropdown__search" role="search"><input class="sb-input" id="dropdown-create-items-function-menu-search-input" placeholder="Search here..." value="" data-com.onepassword.iv=""></li>
			<li class="sb-dropdown__menu-item sb-text--milo" role="option" tabindex="-1" data-value="1" aria-posinset="1" aria-setsize="6" aria-selected="false">Choice 1
			<div class="sb-text--milo sb-text--s sb-color-light-1">
				Exit Survey October 18
			</div>
			</li>
			<li class="sb-dropdown__menu-item sb-text--milo" role="option" tabindex="-1" data-value="2" aria-posinset="2" aria-setsize="6" aria-selected="false">Choice 2
			<div class="sb-text--milo sb-text--s sb-color-light-1">
				Exit Survey October 18
			</div>
			</li>
			<li class="sb-dropdown__menu-item sb-text--milo" role="option" tabindex="-1" data-value="3" aria-posinset="3" aria-setsize="6" aria-selected="false">Choice 3
			<div class="sb-text--milo sb-text--s sb-color-light-1">
				Exit Survey October 18
			</div>
			</li>
			<li class="sb-dropdown__menu-item sb-text--milo" role="option" tabindex="-1" data-value="10" aria-posinset="4" aria-setsize="6" aria-selected="false">Choice 10
			<div class="sb-text--milo sb-text--s sb-color-light-1">
				Exit Survey October 18
			</div>
			</li>
			<li class="sb-dropdown__menu-item sb-text--milo" role="option" tabindex="-1" data-value="20" aria-posinset="5" aria-setsize="6" aria-selected="false">Choice 20
			<div class="sb-text--milo sb-text--s sb-color-light-1">
				Exit Survey October 18
			</div>
			</li>
			<li class="sb-dropdown__menu-item sb-text--milo" role="option" tabindex="-1" data-value="30" aria-posinset="6" aria-setsize="6" aria-selected="false">Choice 30
			<div class="sb-text--milo sb-text--s sb-color-light-1">
				Exit Survey October 18
			</div>
			</li>
		</ul>
	</div>
</div>
Source: components/_dropdown.scss, line 449

2.11 #Components.editable-text Editable Text

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support for caret-color: Safari11.1+, Firefox53+, Chrome57+

Browser support for contenteditable HTML attribute: IE6+, Safari3.1+, Firefox3.5+, Chrome4+

Unsupported browsers will show default caret color

An example for the "oneline" modifier is not available since it requires JavaScript to work

This is an editable label

This is not an editable label - disabled

This is a title and it can go over multiple lines. This is a title and it

This is a description and it can go over multiple lines. This is a description and it can go over multiple lines. This is a description and it can go over multiple lines.

Markup 
 <div class="sb-flex-row sb-justify-content-start">
   <div>
     <span contenteditable role="textbox" class="sb-editable-text sb-editable-text--inline" aria-multiline="true" aria-placeholder="Add a hint text to guide the user" data-placeholder="Add a hint text to guide the user"></span>
   </div>
   <div>
     <h4 contenteditable role="textbox" class="sb-editable-text sb-title--l sb-flex-inline" aria-multiline="true" aria-placeholder="A placeholder will take the place of a deleted content" data-placeholder="A placeholder will take the place of a deleted content">This is an editable label</h4>
   </div>
   <div>
     <h4 contenteditable="false" role="textbox" data-disabled="true" class="sb-editable-text sb-title--l sb-flex-inline" aria-multiline="true" aria-placeholder="A placeholder will take the place of a deleted content">This is not an editable label - disabled</h4>
   </div>
   <div>
     <h2 contenteditable role="textbox" class="sb-editable-text sb-display sb-flex-inline" aria-multiline="true" aria-placeholder="Add a title to your new chart" data-placeholder="Add a title to your new chart"></h2>
   </div>
   <div>
     <h3 contenteditable role="textbox" class="sb-editable-text sb-title--s sb-flex-inline" aria-multiline="true" aria-placeholder="Add a description to help you understand the purpose of this chart" data-placeholder="Add a description to help you understand the purpose of this chart"></h3>
   </div>
   <div class="sb-col-6">
     <div class="sb-margin-bottom-xs">
       <h2 contenteditable role="textbox" class="sb-editable-text sb-display" aria-multiline="true" aria-placeholder="This is a multiline title placeholder. This is a multiline title" data-placeholder="This is a multiline title placeholder. This is a multiline title">This is a title and it can go over multiple lines. This is a title and it</h2>
     </div>
     <div>
       <p contenteditable role="textbox" class="sb-editable-text sb-title--s" aria-multiline="true" aria-placeholder="This is a multiline description placeholder. This is a multiline description placeholder. This is a multiline description placeholder." data-placeholder="This is a multiline description placeholder. This is a multiline description placeholder. This is a multiline description placeholder.">This is a description and it can go over multiple lines. This is a description and it can go over multiple lines. This is a description and it can go over multiple lines.</p>
     </div>
   </div>
 </div>
Source: components/_editable-text.scss, line 1

2.11.1 #Components.editable-text.error Editable Text Error

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Error

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+


Markup 
 <div class="sb-flex-row sb-justify-content-start">
   <div>
     <span contenteditable role="textbox" class="sb-editable-text sb-editable-text--inline sb-editable-text--error" aria-multiline="true" aria-placeholder="Add a hint text to guide the user" data-placeholder="Add a hint text to guide the user"></span>
   </div>
   <br/>
   <div>
     <h2 contenteditable role="textbox" class="sb-editable-text sb-display sb-flex-inline sb-editable-text--error" aria-multiline="true" aria-placeholder="Add a title to your new chart" data-placeholder="Add a title to your new chart"></h2>
   </div>
 </div>
Source: components/_editable-text.scss, line 99

2.12 #Components.form Form Control

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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
.sb-form-control--invalid
invalid input
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.12.1 #Components.form.icon Form control with icon

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.13 #Components.header Header

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Header including title, optional back button, info text and action button.

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Header title

Markup 
<header class="sb-header sb-border-light-1">
  <div class="sb-header__start">
   <button class="sb-btn--subtle sb-btn--s" aria-label="Back">
     <svg class="sb-icon" viewBox="-4 -1.909 16 16">
       <path d="M6.7071 10.3838c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0l-5-5c-.3905-.3905-.3905-1.0237 0-1.4142l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L2.4142 6.091l4.293 4.2928z"/>
     </svg>
   </button>
  </div>
  <div class="sb-header__center">
   <h1 class="sb-header__title sb-title">Header title</h1>
  </div>
  <div class="sb-header__end">
   <button href="#" class="sb-btn sb-btn--primary">Action button</button>
  </div
</header>
Source: components/_header.scss, line 1

2.14 #Components.icons Icons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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="-4 -1.909 16 16">
   <path d="M6.7071 10.3838c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0l-5-5c-.3905-.3905-.3905-1.0237 0-1.4142l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L2.4142 6.091l4.293 4.2928z"/>
  </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>
  <!-- checkmark -->
  <svg class="sb-icon sb-icon--checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
    <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <!-- arrow-dropdown -->
  <svg viewBox="0 0 11 6" class="sb-icon sb-icon--arrow-dropdown">
     <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
  </svg>
  <!-- private -->
 <svg class="sb-icon" viewBox="0 0 16 16">
   <path fill="#9CACBA" d="M6 5h2v-.994V5h2v-.994A2.003 2.003 0 0 0 8 2c-1.105 0-2 .898-2 2.006V5zm6 0a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2v-.994A4.003 4.003 0 0 1 8 0c2.21 0 4 1.795 4 4.006V5z"/>
 </svg>
  <!-- public -->
 <svg class="sb-icon" viewBox="0 0 12 16">
   <path fill="#9CACBA" d="M8.00006145,6 L8.00006145,4.15699538 C8.00006145,3.47863005 7.40765076,2.71551668 6.53538826,2.32716039 C5.28635471,1.77105483 3.82300032,2.33278395 3.26689475,3.5818175 C3.04226031,4.08635472 2.45114988,4.31326076 1.94661265,4.08862631 C1.44207543,3.86399187 1.21516939,3.27288143 1.43980384,2.76834421 C2.44517829,0.51023621 5.09075354,-0.50530498 7.34886154,0.500069476 C8.8915819,1.18693283 10.0000615,2.6148199 10.0000615,4.15699538 L10.0000615,6 C11.1046027,6.00003321 12,6.89545099 12,8 L12,14 C12,15.1045695 11.1045695,16 10,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,8 C0,6.8954305 0.8954305,6 2,6 L8.00006145,6 Z M6,13.0742734 C7.1045695,13.0742734 8,12.1788429 8,11.0742734 C8,9.96970393 7.1045695,9.07427343 6,9.07427343 C4.8954305,9.07427343 4,9.96970393 4,11.0742734 C4,12.1788429 4.8954305,13.0742734 6,13.0742734 Z"/>
 </svg>
  <!-- view -->
 <svg class="sb-icon" viewBox="0 0 16 14">
   <path d="M8 2C6.0025 2 4.1242 3.256 2.3403 6 4.1242 8.744 6.0025 10 8 10s3.8758-1.256 5.6597-4C11.8758 3.256 9.9975 2 8 2zm0 10c-3.0476 0-5.7143-2-8-6 2.2857-4 4.9524-6 8-6s5.7143 2 8 6c-2.2857 4-4.9524 6-8 6zM5.0112 5.7389C5.3028 5.905 5.6403 6 6 6c1.1046 0 2-.8954 2-2 0-.3597-.095-.6972-.2611-.9888A3.0392 3.0392 0 0 1 8 3c1.6569 0 3 1.3431 3 3S9.6569 9 8 9 5 7.6569 5 6c0-.088.0038-.175.0112-.2611z"/>
 </svg>
  <!-- edit -->
 <svg class="sb-icon" viewBox="0 0 16 16">
   <path d="M10.707 6.121L5.64 11.19a1 1 0 0 1-.538.279l-2.404.412a.5.5 0 0 1-.577-.577L2.532 8.9a1 1 0 0 1 .279-.538l5.068-5.068 2.828 2.828zM9.293 1.88L10.879.293a1 1 0 0 1 1.414 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.586 1.586L9.293 1.88zM2 14h12a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2z"/>
 </svg>
  <!-- smartphone -->
  <svg viewBox="0 0 23 23" class="sb-icon sb-icon--platform">
     <path d="M6,2 C5.44771525,2 5,2.44771525 5,3 L5,20 C5,20.5522847 5.44771525,21 6,21 L17,21 C17.5522847,21 18,20.5522847 18,20 L18,3 C18,2.44771525 17.5522847,2 17,2 L6,2 Z M6,0 L17,0 C18.6568542,0 20,1.34314575 20,3 L20,20 C20,21.6568542 18.6568542,23 17,23 L6,23 C4.34314575,23 3,21.6568542 3,20 L3,3 C3,1.34314575 4.34314575,0 6,0 Z M11.5,16 C12.3284271,16 13,16.6715729 13,17.5 C13,18.3284271 12.3284271,19 11.5,19 C10.6715729,19 10,18.3284271 10,17.5 C10,16.6715729 10.6715729,16 11.5,16 Z" id="a"/>
  </svg>
  <!-- monitor -->
  <svg viewBox="0 0 23 23" class="sb-icon sb-icon--platform">
     <path d="M2,13 L21,13 L21,5 C21,4.44771525 20.5522847,4 20,4 L3,4 C2.44771525,4 2,4.44771525 2,5 L2,13 Z M2,15 L2,16 C2,16.5522847 2.44771525,17 3,17 L20,17 C20.5522847,17 21,16.5522847 21,16 L21,15 L2,15 Z M10,21 L10,19 L3,19 C1.34314575,19 2.02906125e-16,17.6568542 0,16 L0,5 C-2.02906125e-16,3.34314575 1.34314575,2 3,2 L20,2 C21.6568542,2 23,3.34314575 23,5 L23,16 C23,17.6568542 21.6568542,19 20,19 L13,19 L13,21 L17,21 C17.5522847,21 18,21.4477153 18,22 C18,22.5522847 17.5522847,23 17,23 L6,23 C5.44771525,23 5,22.5522847 5,22 C5,21.4477153 5.44771525,21 6,21 L10,21 Z" id="a"/>
  </svg>
  <!-- mail -->
  <svg viewBox="0 0 23 23" class="sb-icon sb-icon--platform">
     <path d="M2,16.4712192 L6.96018373,11.1803565 L2,6.36464418 L2,16.4712192 Z M3.30823201,18 L19.691768,18 L14.6046407,12.5737309 L12.5448713,14.573507 C11.9628766,15.1385504 11.0371234,15.1385504 10.4551287,14.573507 L8.39535931,12.5737309 L3.30823201,18 Z M21,16.4712192 L21,6.36464418 L16.0398163,11.1803565 L21,16.4712192 Z M19.5344165,5 L3.46558351,5 L11.5,12.8004044 L19.5344165,5 Z M2,3 L21,3 C22.1045695,3 23,3.8954305 23,5 L23,18 C23,19.1045695 22.1045695,20 21,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,5 C-1.3527075e-16,3.8954305 0.8954305,3 2,3 Z" id="a"/>
  </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.14.1 #Components.icons.modifiers Icons modifiers

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 183

2.15 #Components.input Input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.16 #Components.label Label

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.16.1 #Components.label.for-checkbox Label for checkbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The label component can be set next to the checkbox (without label) or further in the DOM tree.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

Markup 
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-1" class="sb-checkbox-without-label__input">
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-1">Checkbox.<label>
</div>
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-2" class="sb-checkbox-without-label__input" checked>
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-2">Checked checkbox.<label>
</div>
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-3" class="sb-checkbox-without-label__input" disabled>
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-3">Disabled checkbox.<label>
</div>
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-4" class="sb-checkbox-without-label__input" disabled checked>
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-4">Disabled checked checkbox.<label>
</div>
<div class="sb-grid sb-margin-top">
  <div class="sb-tile sb-col-2 sb-padding-s">
    <div class="sb-checkbox-without-label">
      <input type="checkbox" id="label-cb-5" class="sb-checkbox-without-label__input" checked>
      <div class="sb-checkbox-without-label__checkmark-container">
        <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
          <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="sb-tile sb-col-4 sb-padding-s">
    <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-5">Label in another container<label>
  </div>
</div>
Source: components/_label.scss, line 35

2.16.2 #Components.label.small-caps Label in small caps

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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+

This is a section with info about something
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.17 #Components.loader Loader

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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
.sb-loader--inline
Inline loader
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.18 #Components.modal Modal

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A modal component showing fullscreen.

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

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">&times;</span>
      </button>
      <h1 class="sb-title sb-padding-top-s" 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.19 #Components.mood-rating Mood Rating

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Adding sb-mood-rating--selected class after value is selected, so it is possible to set previous siblings styles.
  • When using sb-mood-rating--custom or sb-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.20 #Components.overflow-menu Overflow Menu

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-overflow-menu--open
Open overflow menu
Markup 
<ul class="sb-overflow-menu [modifier class]" tabindex="0" role="menu" data-kss-animation-cb="sb-overflow-menu--open">
  <li class="sb-overflow-menu__header">
    <span class="sb-overflow-menu__label">username@usabilla.com</span>
  </li>
  <li>
     <a href="#link" class="sb-overflow-menu__item" role="menuitem">
       <span class="sb-overflow-menu__label">Plain item</span>
     </a>
  </li>
  <li>
     <button class="sb-overflow-menu__item" role="menuitem">
       <svg class="sb-icon sb-margin-right-xs" 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>
       <span class="sb-overflow-menu__label">Download</span>
     </button>
  </li>
  <li>
     <button class="sb-overflow-menu__item" role="menuitem">
       <svg class="sb-icon sb-margin-right-xs sb-icon--link" 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>
       <span class="sb-overflow-menu__label">Forward to a friend</span>
     </button>
  </li>
  <li>
     <button class="sb-overflow-menu__item" role="menuitem">
       <svg class="sb-icon sb-margin-right-xs" viewBox="0 0 16 16">
         <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>
       <span class="sb-overflow-menu__label">Star</span>
     </button>
  </li>
  <li>
     <button class="sb-overflow-menu__item sb-overflow-menu__item--danger" role="menuitem">
       <svg class="sb-icon sb-margin-right-xs" 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>
       <span class="sb-overflow-menu__label">Delete</span>
     </button>
  </li>
</ul>
Source: components/_overflow-menu.scss, line 1

2.21 #Components.popover Popover

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Note: To implement correctly the animation for the popover, you should not forget to apply sb-popover__content--position-top if the popover is on top of the anchor element

Browser support: IE9+ (no transitions), Safari6+, Firefox30+, Chrome30+

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__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.21.1 #Components.popover.content-animated Popover - Animate content

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

You can define a block of content inside the popover that are going to be animated on open/close.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

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__dialog" role="document">
    <div class="sb-popover__content sb-flex sb-flex-column sb-margin-top-xs" role="presentation" tabIndex="-1">
      <div class="sb-padding sb-popover__fade">
        <input class="sb-input" id="input-id-1" placeholder="Placeholder Text">
      </div>
      <div class="sb-popover__animate-content sb-overflow-y-auto">
        <span class="sb-block sb-text--smallcaps sb-padding-bottom-s sb-padding-left sb-padding-right sb-border-bottom-light-3">Form origin</span>
        <ul role="menu" class="sb-table-list sb-table-list--borderless">
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 1 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 2 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 3 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 4 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 5 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 6 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 7 </li>
        </ul>
        <span class="sb-block sb-text--smallcaps sb-padding-top sb-padding-bottom-s sb-padding-left sb-padding-right sb-border-bottom-light-3">Form origin</span>
        <ul role="menu" class="sb-table-list sb-table-list--borderless">
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 1 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 2 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 3 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 4 </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Source: components/_popover.scss, line 62

2.22 #Components.preview Preview

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.23 #Components.radio Radio

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.23.1 #Components.radio.group Group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.24 #Components.rating Rating

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.24.1 #Components.rating.group Group

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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
Not at all
Very likely
.sb-rating-group--below
Show text below
Not at all
Very likely
.sb-rating-group--above
Show text above
Not at all
Very likely
.sb-rating-group--inline
Show text before and after
Not at all
Very likely
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.25 #Components.select Select

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.25.1 #Components.select.disabled Disabled Select

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.26 #Components.sidepanel Sidepanel

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.

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.27 #Components.slider Slider

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sliders allow users to make selections from a range of values

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as rating.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

The markup is generated from react-input-range, which is the library we use to implement the JS part of the slider. We update almost all classes that are generated by react-input-range so we can have full control of the styling and behavior. The reference implementation of the base styles scss can be found here.

JavaScript is required for:

  • The whole slider interaction - Changing and dragging slider.
  • Updating the slider values.
Default styling
0
0
10
0
3
10
.sb-input-range--disabled
disabled
0
0
10
0
3
10
.sb-input-range__label--hide
hide label values
0
0
10
0
3
10
Markup 
<div class="sb-input-range [modifier class]">
  <span class="sb-input-range__label sb-input-range__label--min">
    <span class="sb-input-range__label-container">0</span>
  </span>
  <div class="sb-input-range__track sb-input-range__track--background">
    <div class="sb-input-range__track sb-input-range__track--active" style="left: 0%; width: 0%;">
    </div>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 0%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">0</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="0" aria-valuenow="0" class="sb-input-range__slider" draggable="false" role="slider" tabindex="0"></div>
    </span>
  </div>
  <span class="sb-input-range__label sb-input-range__label--max">
    <span class="sb-input-range__label-container">10</span>
  </span>
</div>
<div class="sb-input-range [modifier class]">
  <span class="sb-input-range__label sb-input-range__label--min">
    <span class="sb-input-range__label-container">0</span>
  </span>
  <div class="sb-input-range__track sb-input-range__track--background">
    <div class="sb-input-range__track sb-input-range__track--active" style="left: 0%; width: 30%;"></div>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 30%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">3</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="0" aria-valuenow="3" class="sb-input-range__slider" draggable="false" role="slider" tabindex="0"></div>
    </span>
  </div>
  <span class="sb-input-range__label sb-input-range__label--max">
    <span class="sb-input-range__label-container">10</span>
  </span>
</div>
Source: components/_slider.scss, line 1

2.27.1 #Components.slider.range Range Slider

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sliders can have icons on both ends of the bar that reflect a range of values.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
0
2
10
10
.sb-input-range--disabled
disabled
0
2
10
10
.sb-input-range__label--hide
hide label values
0
2
10
10
Markup 
<div class="sb-input-range [modifier class]">
  <span class="sb-input-range__label sb-input-range__label--min">
    <span class="sb-input-range__label-container">0</span>
  </span>
  <div class="sb-input-range__track sb-input-range__track--background">
    <div class="sb-input-range__track sb-input-range__track--active" style="left: 20%; width: 80%;">
    </div>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 20%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">2</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="0" aria-valuenow="2" class="sb-input-range__slider" draggable="false" role="slider" tabindex="0">
      </div>
    </span>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 100%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">10</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="2" aria-valuenow="10" class="sb-input-range__slider" draggable="false" role="slider" tabindex="0">
      </div>
    </span>
  </div>
  <span class="sb-input-range__label sb-input-range__label--max">
    <span class="sb-input-range__label-container">10</span>
  </span>
</div>
Source: components/_slider.scss, line 201

2.28 #Components.table Table

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Adding/removing visible class on keyboard tab, if touchscreen or after any checkbox selection
  • :focus-visible will 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
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 sb-text--center" 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-without-label">
               <input type="checkbox" id="checkbox-table-1-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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 sb-text--center">
             <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-without-label">
               <input type="checkbox" id="checkbox-table-2-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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 sb-text--center">
             <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-without-label">
               <input type="checkbox" id="checkbox-table-3-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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 sb-text--center">
             <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.28.1 #Components.table.scrollable Table with scrollable content

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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__checkbox that 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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-1-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-2-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-3-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-4-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-5-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-6-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-7-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-8-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-9-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-10-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-11-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-12-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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-without-label">
               <input type="checkbox" id="checkbox-table-scollable-13-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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 407

2.29 #Components.table row Table row

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Default styling
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
.sb-table__tr--inactive
Disable hover highlight for table row.
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
.sb-table__tr--disabled
Disable table row entirely.
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
Markup 
<div class="sb-table">
  <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 [modifier class]">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-row-1-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </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>
     </tbody>
  </table>
</div>
Source: components/_table.scss, line 272

2.30 #Components.table-list Table List

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
  • Element 1
  • Element 2
  • Element 3
  • Element 4
.sb-table-list--borderless
Remove line divider between elements
  • Element 1
  • Element 2
  • Element 3
  • Element 4
Markup 
 <ul class="sb-table-list [modifier class]">
   <li class="sb-table-list__item"> Element 1 </li>
   <li class="sb-table-list__item"> Element 2 </li>
   <li class="sb-table-list__item sb-table-list__item--selected"> Element 3 </li>
   <li class="sb-table-list__item"> Element 4 </li>
 </ul>
Source: components/_table-list.scss, line 1

2.30.1 #Components.table-list.as-menu Table List as menu

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A list can be use as a menu, with the role "menu"/"menuitem". You can navigate with TAB inside the menu.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Markup 
 <ul role="menu" class="sb-table-list sb-table-list--borderless">
   <li role="menuitem" tabIndex="0" class="sb-table-list__item"> Element 1 </li>
   <li role="menuitem" tabIndex="0" class="sb-table-list__item"> Element 2 </li>
   <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-table-list__item--selected"> Element 3 </li>
   <li role="menuitem" tabIndex="0" class="sb-table-list__item"> Element 4 </li>
 </ul>
Source: components/_table-list.scss, line 49

2.30.2 #Components.table-list.single-line-checkbox Single line with checkbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

  • More info
  • More info
  • More info
  • 152k responses
  • 1 responses
  • 5879 responses
Markup 
 <ul class="sb-table-list sb-table-list--borderless sb-table-list--checkbox">
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-1" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label sb-text--milo" for="table-list-checkbox-1">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-text--milo sb-color-light-1">More info</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-2" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label sb-text--milo" for="table-list-checkbox-2">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-text--milo sb-color-light-1">More info</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-3" class="sb-checkbox-without-label__input" checked>
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label sb-text--milo" for="table-list-checkbox-3">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-text--milo sb-color-light-1">More info</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-4" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label sb-text--milo" for="table-list-checkbox-4">This is a single line item with a checkbox with a long long long long long long long long long long long long long long long long long long text</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-text--milo sb-color-light-1">152k responses</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-5" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label sb-text--milo" for="table-list-checkbox-5">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-text--milo sb-color-light-1">1 responses</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-6" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label sb-text--milo" for="table-list-checkbox-6">This is a single line item with a checkbox long text</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-text--milo sb-color-light-1">5879 responses</span>
     </div>
   </li>
 </ul>
Source: components/_table-list.scss, line 66

2.31 #Components.Tabs Tabs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Tabs is a simple tabs component which allows you to show one piece of content at a time

JavaScript is required to actually add/remove the classes/href for the active item. Additionally, when implementing this element, each tab's panel should have an role="tabpanel" to properly communicate that these elements are related.

Browser support: IE11+, Safari6.1+, Firefox22+, Chrome21+

Markup 
<nav class="sb-tabs sb-text--smallcaps sb-text--emphasis" role="tablist">
  <a href="#chart-type" class="sb-tabs__tab" role="tab" aria-selected="false">Chart type</a>
  <a href="#data" class="sb-tabs__tab sb-tabs__tab--active" role="tab" aria-selected="true">Data</a>
  <a class="sb-tabs__tab sb-tabs__tab--disabled" role="tab" aria-selected="false">Visualization</a>
</nav>
Source: components/_tabs.scss, line 1

2.32 #Components.tags Tags

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Tags component

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Markup 
<div class="sb-tags sb-tags--positive">
  <input class="sb-tags__input" type="checkbox" id="tag-positive-1">
  <label class="sb-tags__label" for="tag-positive-1">attractive</label>
  <input class="sb-tags__input" type="checkbox" id="tag-positive-2">
  <label class="sb-tags__label" for="tag-positive-2">usable</label>
  <input class="sb-tags__input" type="checkbox" id="tag-positive-3">
  <label class="sb-tags__label" for="tag-positive-3">interesting</label>
</div>
<div class="sb-tags sb-tags--negative">
  <input class="sb-tags__input" type="checkbox" id="tag-negative-1">
  <label class="sb-tags__label" for="tag-negative-1">unattractive</label>
  <input class="sb-tags__input" type="checkbox" id="tag-negative-2">
  <label class="sb-tags__label" for="tag-negative-2">complex</label>
  <input class="sb-tags__input" type="checkbox" id="tag-negative-3">
  <label class="sb-tags__label" for="tag-negative-3">boring</label>
</div>
Source: components/_tags.scss, line 3

2.33 #Components.tile Tile

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.34 #Components.toast Toast

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Toast messages that are animated using react-transition-group in react-stylabilla.

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">
   <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>
 <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.35 #Components.upload Upload

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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.35.1 #Components.upload.validation Upload with validation

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The file upload component with validation.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

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.36 #Components.wizard-dialog Wizard Dialog

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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+

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