2.3 #Components.button Button

Background colors Fake Disabled Buttons Link Loader Sizes Text colors

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--subtle-lifted

Subtle lifted button

.sb-btn--block

Block button (span the full width of a parent)

Markup

<button class="sb-btn sb-margin-horizontal-xs [modifier class]">Button</button>
<button class="sb-btn sb-margin-horizontal-xs  [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  sb-margin-horizontal-xs [modifier class]" aria-label="Delete">
  <svg class="sb-icon sb-margin-right-s" 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 sb-margin-horizontal-xs  [modifier class]" disabled>Disabled</button>

Source: components/_button.scss, line 1

2.3.1 #Components.button.background-colors Background colors

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 237

2.3.2 #Components.button.fakeDisabled Fake Disabled Buttons

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 30

2.3.3 #Components.button.link Link

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 437

2.3.4 #Components.button.loader Loader

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

.sb-btn--danger

Danger 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 343

2.3.5 #Components.button.sizes Sizes

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 318

2.3.6 #Components.button.text-colors Text colors

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 290

2.4 #Components.button-group Button Group

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>
  <button class="sb-btn sb-btn--active" role="radio" aria-checked="true" disabled>Disabled - active</button>
</div>

Source: components/_button-group.scss, line 1

2.6 #Components.checkbox Checkbox

Fake checkbox Group No label

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)

Basic checkbox.

Basic disabled checkbox.

Basic disabled and checked checkbox.

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

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

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

Basic checkbox

.sb-checkbox-group--inline

checkbox group aligned horizontally

Basic checkbox

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 174

2.6.3 #Components.checkbox.no-label No label

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 242

2.8 #Components.chipsContainer ChipsContainer

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

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

Disabled Invalid Suggestion to calendar animation

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

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

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

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

An invalid date picker.

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

Creation Date

To

Date out of range

Markup

<div class="sb-form-control sb-form-control--invalid">
  <label class="sb-label" for="creation-date-id">Creation Date</label>
  <div class="sb-date-picker">
    <div class="sb-date-picker__control">
      <div class="sb-date-picker__inputs sb-date-picker__inputs--invalid">
        <div class="sb-date-picker__input-wrapper sb-text--s">
          <input class="sb-date-picker__input" placeholder="d mmm yyyy" value="13 Sep 2018">
        </div>
        <div class="sb-text--s sb-text--emphasis sb-margin-left-xs sb-margin-right-xs sb-date-picker__separator">To</div>
        <div class="sb-date-picker__input-wrapper sb-text--s">
          <input class="sb-date-picker__input" placeholder="d mmm yyyy" value="21 Sep 2018">
        </div>
      </div>
      <button class="sb-date-picker__button sb-date-picker__button--invalid">
        <svg class="sb-icon" viewBox="0 0 16 16">
          <path d="M4 11.273h1.455V9.818H4v1.455zm0 2.545h1.455v-1.454H4v1.454zm0-5.09h1.455V7.272H4v1.454zm-2.182 5.09h1.455v-1.454H1.818v1.454zm13.455-8.727H.727V2.909c0-.401.326-.727.728-.727h1.454v1.09a.363.363 0 1 0 .727 0v-1.09h8.728v1.09a.363.363 0 1 0 .727 0v-1.09h1.454c.402 0 .728.326.728.727v2.182zm0 9.454a.728.728 0 0 1-.728.728H1.455a.728.728 0 0 1-.728-.728V5.818h14.546v8.727zm-.728-13.09h-1.454V.364a.364.364 0 1 0-.727 0v1.09H3.636V.365a.364.364 0 1 0-.727 0v1.09H1.455C.65 1.455 0 2.107 0 2.91v11.636C0 15.35.651 16 1.455 16h13.09C15.35 16 16 15.349 16 14.545V2.91c0-.803-.651-1.454-1.455-1.454zM1.818 8.727h1.455V7.273H1.818v1.454zm0 2.546h1.455V9.818H1.818v1.455zm4.364 2.545h1.454v-1.454H6.182v1.454zm0-5.09h1.454V7.272H6.182v1.454zm0 2.545h1.454V9.818H6.182v1.455zm6.545 0h1.455V9.818h-1.455v1.455zm-2.182 0H12V9.818h-1.455v1.455zm2.182-2.546h1.455V7.273h-1.455v1.454zm-2.182 0H12V7.273h-1.455v1.454zm-2.181 5.091h1.454v-1.454H8.364v1.454zm0-5.09h1.454V7.272H8.364v1.454zm0 2.545h1.454V9.818H8.364v1.455z"></path>
        </svg>
      </button>
    </div>
  </div>
  <p role="alert" class="sb-form-control__validation">Date out of range</p>
</div>

Source: components/_date-picker.scss, line 785

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

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

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

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.draggable-card Draggable card

Draggable card compact

Draggable card element is a mini version of the card with draggable states

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

Default styling

Mood

2. How would you rate our service today?

.sb-draggable-card--active

The active state for a selected card

Mood

2. How would you rate our service today?

.sb-card--inanimate

An inanimate card that can't have neither focus nor hover states animations

Mood

2. How would you rate our service today?

.sb-draggable-card--dragging

The active state for a card being dragged

Mood

2. How would you rate our service today?

Markup

<div class="sb-flex sb-draggable-card--container">
  <div class="sb-card sb-card--interactive sb-draggable-card [modifier class]" tabindex="0">
    <div class="sb-draggable-card__handle"></div>
    <div class="sb-card__header sb-flex sb-justify-content-between">
      <p class="sb-text--s sb-margin-vertical-xs">Mood</p>
    </div>
    <div class="sb-card__body sb-flex sb-flex-column">
     <p class="sb-title--s"><span class="sb-title--l">2.</span> How would you rate our service today?</p>
       <div class="sb-margin-top sb-flex sb-justify-content-around">
         <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>
    </div>
  </div>
</div>

Source: components/_draggable-card.scss, line 3

2.10.1 #Components.draggable-card.compact Draggable card compact

Draggable card compact element is a mini version of the card with draggable states

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

Default styling

.sb-draggable-card--ghost

The ghost state that is behind an active draggable card

.sb-draggable-card--active

The active state for a card being dragged

Markup

<div class="sb-flex sb-draggable-card--container">
  <div class="sb-card sb-card--interactive sb-draggable-card sb-draggable-card-compact [modifier class]">
    <div class="sb-draggable-card__handle"></div>
    <div class="sb-card__body">
     <svg class="sb-icon-group" viewBox-box="0 0 98 23" xmlns="http://www.w3.org/2000/svg">
       <g fill="#fff" fillRule="evenodd">
         <path d="M49.501 0C43.15 0 38 5.15 38 11.499 38 17.849 43.149 23 49.501 23 55.851 23 61 17.85 61 11.499 61 5.15 55.851 0 49.501 0" fill="#FFD442" />
         <path d="M52.671 15.602a.845.845 0 011.145-.085c.34.276.38.76.089 1.081-1.086 1.199-2.576 1.802-4.405 1.802-1.83 0-3.32-.603-4.405-1.802a.738.738 0 01.09-1.08.845.845 0 011.144.084c.766.846 1.801 1.265 3.171 1.265 1.37 0 2.405-.42 3.171-1.265zM44.9 9.2c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453zm9.2 0c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453z" fill="#594504" />
         <path d="M4 11.499C4 17.849 9.149 23 15.501 23 21.851 23 27 17.85 27 11.499 27 5.15 21.851 0 15.501 0 9.15 0 4 5.15 4 11.499z" fill="#FFD442" />
         <path d="M18.056 15.333c.934 0 1.277.344 1.277.767 0 .423-.343.767-1.277.767h-5.112c-.934 0-1.277-.344-1.277-.767 0-.423.343-.767 1.277-.767zM10.9 9.2a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067zm9.2 0a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067z" fill="#594504" fillRule="nonzero" />
         <g>
           <path d="M72 11.499C72 17.849 77.149 23 83.501 23 89.851 23 95 17.85 95 11.499 95 5.15 89.851 0 83.501 0 77.15 0 72 5.15 72 11.499z" fill="#FFD442" />
           <path d="M83.5 19.167c3.304 0 4.6-2.147 4.6-3.549 0-1.402-9.2-1.402-9.2 0s1.296 3.549 4.6 3.549z" fill="#594504" fillRule="nonzero" />
           <path d="M86.832 12.95c1.408-.46 3.951-1.423 4.391-3.056-.024.08.661-1.94-1.47-2.51-.517-.14-.968.033-1.51.3-.335-.502-.638-.876-1.156-1.015-2.13-.57-2.549 1.521-2.529 1.44-.436 1.633 1.287 3.74 2.274 4.842zM79.987 12.95c.988-1.101 2.71-3.208 2.274-4.842.02.082-.397-2.01-2.529-1.439-.517.139-.821.513-1.157 1.016-.541-.268-.99-.44-1.509-.302-2.13.571-1.446 2.592-1.47 2.511.44 1.633 2.984 2.596 4.39 3.057z" fill="#F4606E" />
         </g>
       </g>
     </svg>
    </div>
    <div class="sb-card__footer">
      <p class="sb-text--s">Label</p>
    </div>
  </div>
 <div class="sb-card sb-draggable-card sb-draggable-card-compact sb-draggable-card--ghost sb-draggable-card--background">
   <div class="sb-draggable-card__handle"></div>
   <div class="sb-card__body">
     <svg class="sb-icon-group" viewBox-box="0 0 98 23" xmlns="http://www.w3.org/2000/svg">
       <g fill="#fff" fillRule="evenodd">
         <path d="M49.501 0C43.15 0 38 5.15 38 11.499 38 17.849 43.149 23 49.501 23 55.851 23 61 17.85 61 11.499 61 5.15 55.851 0 49.501 0" fill="#EEF3F7" />
         <path d="M52.671 15.602a.845.845 0 011.145-.085c.34.276.38.76.089 1.081-1.086 1.199-2.576 1.802-4.405 1.802-1.83 0-3.32-.603-4.405-1.802a.738.738 0 01.09-1.08.845.845 0 011.144.084c.766.846 1.801 1.265 3.171 1.265 1.37 0 2.405-.42 3.171-1.265zM44.9 9.2c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453zm9.2 0c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453z" fill="#9CACBA" />
         <path d="M4 11.499C4 17.849 9.149 23 15.501 23 21.851 23 27 17.85 27 11.499 27 5.15 21.851 0 15.501 0 9.15 0 4 5.15 4 11.499z" fill="#EEF3F7" />
         <path d="M18.056 15.333c.934 0 1.277.344 1.277.767 0 .423-.343.767-1.277.767h-5.112c-.934 0-1.277-.344-1.277-.767 0-.423.343-.767 1.277-.767zM10.9 9.2a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067zm9.2 0a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067z" fill="#9CACBA" fillRule="nonzero" />
         <g>
           <path d="M72 11.499C72 17.849 77.149 23 83.501 23 89.851 23 95 17.85 95 11.499 95 5.15 89.851 0 83.501 0 77.15 0 72 5.15 72 11.499z" fill="#EEF3F7" />
           <path d="M83.5 19.167c3.304 0 4.6-2.147 4.6-3.549 0-1.402-9.2-1.402-9.2 0s1.296 3.549 4.6 3.549z" fill="#9CACBA" fillRule="nonzero" />
           <path d="M86.832 12.95c1.408-.46 3.951-1.423 4.391-3.056-.024.08.661-1.94-1.47-2.51-.517-.14-.968.033-1.51.3-.335-.502-.638-.876-1.156-1.015-2.13-.57-2.549 1.521-2.529 1.44-.436 1.633 1.287 3.74 2.274 4.842zM79.987 12.95c.988-1.101 2.71-3.208 2.274-4.842.02.082-.397-2.01-2.529-1.439-.517.139-.821.513-1.157 1.016-.541-.268-.99-.44-1.509-.302-2.13.571-1.446 2.592-1.47 2.511.44 1.633 2.984 2.596 4.39 3.057z" fill="#9CACBA" />
         </g>
       </g>
     </svg>
   </div>
   <div class="sb-card__footer">
     <p class="sb-text--s">Label</p>
   </div>
 </div>
</div>

Source: components/_draggable-card.scss, line 164

2.11 #Components.drop-zone Drop zone

Drop zone for drag and drop area

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

Default styling

Hint

.sb-drop-zone--ready

The ready state for the drop zone (to show the drop zone)

Hint

.sb-drop-zone--active

The active state for the drop zone (to say that the element can be dropped)

Hint

Markup

<div class="sb-flex">
  <div class="sb-drop-zone [modifier class]">
     <p class="sb-text--s sb-drop-zone__hint">Hint</p>
  </div>
</div>

Source: components/_drop_zone.scss, line 1

2.12 #Components.dropdown Dropdown

Disabled Multiselect No search results Search Search with create item action Search with no results and create item action Dropdown with sub text in the items

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

Choose an option

.sb-dropdown--open

open dropdown

Markup

 <div class="sb-form-control">
   <label class="sb-label" for="dropdown-id-[modifier class]">Choose an option</label>
   <div class="sb-dropdown [modifier class]" id="dropdown-id-[modifier class]" data-kss-animation-cb="sb-dropdown--open">
     <div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
       <button class="sb-input" aria-label="Choose an option" aria-expanded="false">
         Choice 1
       </button>
       <svg 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.12.1 #Components.dropdown.disabled Disabled

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

Choose an option

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 321

2.12.2 #Components.dropdown.multiselect Multiselect

JavaScript is required for:

Checking/Unchecking the checkbox on row click
Updating aria-expanded value
Updating the button text with the number of selected items
Highlighting items

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

Select options

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 166

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

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

Select options

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 292

2.12.4 #Components.dropdown.search Search

JavaScript is required for:

Checking/Unchecking the checkbox on row click
Filtering the menu items based on the search input
Updating the button text with the number of selected items
Highlighting items

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

Select options

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 234

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

JavaScript is required for:

Checking/Unchecking the checkbox on row click
Filtering the menu items based on the search input
Updating the button text with the number of selected items
Highlighting items
Executing the create item action
Updating the create item text with the search input text

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

Select options or create new

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 347

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

The create action button overrides the default "No results" message.

JavaScript is required for:

Checking/Unchecking the checkbox on row click
Filtering the menu items based on the search input
Updating the button text with the number of selected items
Highlighting items
Executing the create item action
Updating the create item text with the search input text
Hiding the "No results" message

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

Select options or create new

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 415

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

JavaScript is required for:

Filtering the menu items based on the search input
Highlighting items

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

Dropdown with sub text

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 460

2.13 #Components.editable-text Editable Text

Editable Text Error

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.13.1 #Components.editable-text.error Editable Text Error

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.14 #Components.emptyResource Empty resource

This component is used to display a message about an empty resource/list for example, when there are no forms in the forms list page, or no workspaces in workspaces list page

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

That's an empty list

Looks like the resource you're looking at has nothing in it.

Markup

 <div class="sb-empty-resource">
   <div class="sb-empty-resource__container">
     <div>
       <div class="sb-margin-bottom-l">
         <h2 class="sb-title--l sb-margin-bottom-s">That's an empty list</h2>
         <p>Looks like the resource you're looking at has nothing in it.</p>
       </div>
       <button class="sb-btn sb-btn--primary">Call to action</button>
     </div>
     <div
      class="sb-col-6 sb-empty-resource__illustration"
     role="img"
     aria-label="Nothing in the list illustration"></div>
   </div>
 </div>

Source: components/_empty-resource.scss, line 1

2.15 #Components.form Form Control

Form control with icon

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

Input Label

Error message here.

.sb-form-control--invalid

invalid input

Input Label

Error message here.

Markup

<div class="sb-form-control [modifier class]">
  <label class="sb-label" for="text-form-input-id-[modifier class]">Input Label</label>
  <div class="sb-form-control__input">
    <input class="sb-input" type="text" id="text-form-input-id-[modifier class]" placeholder="Placeholder Text">
  </div>
  <p role="alert" class="sb-form-control__validation">Error message here.</p>
</div>

Source: components/_form-control.scss, line 1

2.15.1 #Components.form.icon Form control with icon

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

Default styling

Input Label

.sb-form-control__input--icon-left

form control with icon aligned left

Input Label

.sb-form-control__input--icon-right

form control with icon aligned right

Input Label

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

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.17 #Components.icons Icons

Icons modifiers

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>
  <!-- settings -->
 <svg class="sb-icon" viewBox="0 0 16 16">
   <g>
     <path d="M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10zm0-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
     <path d="M5.89 0h2.22a.5.5 0 0 1 .485.379l.75 3A.5.5 0 0 1 8.86 4H5.14a.5.5 0 0 1-.485-.621l.75-3A.5.5 0 0 1 5.89 0zM5.89 14h2.22a.5.5 0 0 0 .485-.379l.75-3A.5.5 0 0 0 8.86 10H5.14a.5.5 0 0 0-.485.621l.75 3A.5.5 0 0 0 5.89 14z" />
     <path d="M.383 4.461l1.11-1.922a.5.5 0 0 1 .57-.23l2.973.85a.5.5 0 0 1 .296.73L3.472 7.11a.5.5 0 0 1-.78.11L.468 5.07a.5.5 0 0 1-.085-.609zM12.507 11.461l1.11-1.922a.5.5 0 0 0-.085-.61L11.308 6.78a.5.5 0 0 0-.78.11l-1.86 3.22a.5.5 0 0 0 .296.731l2.973.85a.5.5 0 0 0 .57-.23z" />
     <g>
       <path d="M12.507 2.539l1.11 1.922a.5.5 0 0 1-.085.61L11.308 7.22a.5.5 0 0 1-.78-.11l-1.86-3.22a.5.5 0 0 1 .296-.731l2.973-.85a.5.5 0 0 1 .57.23zM.383 9.539l1.11 1.922a.5.5 0 0 0 .57.23l2.973-.85a.5.5 0 0 0 .296-.73L3.472 6.89a.5.5 0 0 0-.78-.11L.468 8.93a.5.5 0 0 0-.085.609z" />
     </g>
   </g>
 </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>
 <!-- reset -->
<svg viewBox="0 0 16 16" width="16" height="16">
  <defs>
    <path d="M9.5.5A6.5 6.5 0 0 1 16 7l-.005.21.001.022c-.122 3.48-2.964 6.267-6.456 6.267h-.02-.02l-.03-.002-.24-.005a6.41 6.41 0 0 1-1.513-.255 1 1 0 1 1 .567-1.918c.4.118.815.18 1.24.18H9.5a4.5 4.5 0 0 0 4.495-4.288L14 7v-.012l-.005-.2a4.5 4.5 0 0 0-8.99 0L5 7h3l-4 4-4-4h3A6.5 6.5 0 0 1 9.5.5z" id="A"/>
  </defs>
  <g transform="translate(0 1)" fill-rule="evenodd">
    <mask id="B" fill="#fff">
      <use xlink:href="#A"/>
    </mask>
    <g fill="#9cacba">
      <use fill-rule="nonzero" xlink:href="#A"/>
      <g mask="url(#B)">
        <path d="M0-1h16v16H0z"/>
      </g>
    </g>
  </g>
</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.17.1 #Components.icons.modifiers Icons modifiers

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

Default styling

.sb-icon--success

Applies a successful color to your icon.

.sb-icon--warning

Applies a warning color to your icon.

.sb-icon--error

Applies an error color to your icon.

.sb-icon--link

Applies the link behavior to your icon.

.sb-icon--xs

Makes your icon unreadable.

.sb-icon--s

Makes your icon tiny.

.sb-icon--m

The normal icon size.

.sb-icon--l

Makes your icon larger.

.sb-icon--xl

Makes your icon extra large.

Markup

<svg class="sb-icon [modifier class]" viewBox="0 0 16 16">
  <path d="M6.074 13.8l-.567-9.298a.387.387 0 0 0-.4-.374.387.387 0 0 0-.37.403l.567 9.298a.386.386 0 0 0 .4.374.387.387 0 0 0 .37-.402zm6.163.708c-.052.376-.345.712-.77.712H4.533c-.425 0-.711-.333-.77-.712l-.77-11.599h10.014l-.77 11.599zM6.074 2.328V.775h3.852v1.551H6.074zm4.622-.146V.728c0-.402-.345-.728-.77-.728H6.074c-.426 0-.77.326-.77.728v1.454H.385A.375.375 0 0 0 0 2.546c0 .2.173.363.385.363h1.837l.77 11.636c.125.796.69 1.455 1.541 1.455h6.934c.85 0 1.396-.667 1.54-1.455l.77-11.636h1.838c.212 0 .385-.162.385-.363a.375.375 0 0 0-.385-.364h-4.919zm.001 11.647l.559-9.298a.387.387 0 0 0-.371-.403.386.386 0 0 0-.399.374l-.559 9.3a.386.386 0 0 0 .77.028zm-2.312-.015V4.505A.386.386 0 0 0 8 4.117a.386.386 0 0 0-.385.388v9.31c0 .214.172.387.385.387a.386.386 0 0 0 .385-.388z"/>
</svg>

Source: components/_icons.scss, line 224

2.18 #Components.images Images

Some usefull images to use

Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+

Markup

<div class="kss-icons">
  <div class="sb-avatar"/>
</div>

Source: components/_images.scss, line 1

2.19 #Components.input Input

Basic input component that should be used for email, number, password, tel, text and url inputs. It is also used to apply standard form styling to other components such as textarea, upload and dropdown. If you would like to apply validation styles and messages, check out the Form Control component.

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

Input Label Disabled input Label Textarea Label

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="input-id-1">Disabled input Label</label>
<input class="sb-input" id="input-id-1" placeholder="Placeholder Text" disabled>
<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.20 #Components.input-textarea Input Textarea

Textarea component that should be used for auto-grow based on the content

Javascript is required for auto-grow height of the textarea

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

Default initial-state

Multiline autogrow textarea

It contains text 
multiline
auto grow

Markup

 <div class="sb-padding-top">
 Default initial-state
 </div>
 <div class="sb-form-control">
   <div class="sb-form-control__input sb-form-control__input-textarea">
     <pre><span></span><br></pre>
     <textarea class="sb-input" id="input-1" placeholder="This is a placeholder"></textarea>
   </div>
 </div>
 <div class="sb-padding-top">
 Multiline autogrow textarea
 </div>
 <div class="sb-form-control">
   <div class="sb-form-control__input sb-form-control__input-textarea">
     <pre><span>It contains text <br/>multiline<br/>auto grow </span><br></pre>
     <textarea class="sb-input" id="input-1" placeholder="This is a placeholder">It contains text
multiline
auto grow
     </textarea>
   </div>
 </div>

Source: components/_input-textarea.scss, line 1

2.21 #Components.label Label

Label for checkbox Label in small caps

Basic label that can be used in combination with the input component.

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

Input Label

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

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

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

Checkbox.

Checked checkbox.

Disabled checkbox.

Disabled checked checkbox.

Label in another container

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.21.2 #Components.label.small-caps Label in small caps

Labels in all small caps can be used as small titles. Usually used when structure or difference is needed, such as in filter components, sorting list, or as small section titles. Note however browser support is non-existent in IE or Edge.

Browser support: Safari9.1+, Firefox34+, Chrome30+

Section Info

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.22 #Components.loader Loader

Simple loader, witn inline option. For a loader inside a button, check the Button Loader component.

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

Default styling

Loading page, please wait

.sb-loader--inline

Inline loader

Loading page, please wait

Markup

<div class="sb-loader [modifier class]" role="alert" aria-busy="true">
  <svg viewBox="0 0 50 50" class="sb-spinner" aria-hidden="true">
    <defs>
      <path id="path-loader-[modifier class]" d="M25 50C11.2 50 0 38.8 0 25S11.2 0 25 0s25 11.2 25 25-11.2 25-25 25zm0-6.5c10.2 0 18.5-8.3 18.5-18.5S35.2 6.5 25 6.5 6.5 14.8 6.5 25 14.8 43.5 25 43.5z"/>
    </defs>
    <g fill="none" fill-rule="evenodd">
      <mask id="mask-loader-[modifier class]" fill="#fff">
        <use xlink:href="#path-loader-[modifier class]"/>
      </mask>
      <use class="sb-spinner__secondary" transform="matrix(-1 0 0 1 50 0)" xlink:href="#path-loader-[modifier class]"/>
      <path class="sb-spinner__primary" d="M0 0h26v26H0z" mask="url(#mask-loader-[modifier class])"/>
      <path class="sb-spinner__primary" d="M6.5 26c0 2-1.4 3.3-3.2 3.3C1.5 29.3 0 28 0 26h6.5z" mask="url(#mask-loader-[modifier class])" transform="matrix(-1 0 0 1 6.522 0)"/>
      <path class="sb-spinner__primary" d="M29.3 0C27.5 0 26 1.5 26 3.3c0 1.8 1.5 3.2 3.3 3.2V0z" mask="url(#mask-loader-[modifier class])" transform="matrix(-1 0 0 1 55.435 0)"/>
    </g>
  </svg>
  <span class="sb-loader__label">Loading page, please wait</span>
</div>

Source: components/_loader.scss, line 3

2.23 #Components.modal Modal

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">
        <svg class="sb-icon sb-color-light-1 sb-icon--s" viewBox="0 0 17 17" aria-hidden="false"><path d="M2.70710678,1.29289322 L8,6.585 L13.2928932,1.29289322 C13.6533772,0.932409257 14.2206082,0.904679722 14.6128994,1.20970461 L14.7071068,1.29289322 C15.0976311,1.68341751 15.0976311,2.31658249 14.7071068,2.70710678 L14.7071068,2.70710678 L9.415,8 L14.7071068,13.2928932 C15.0976311,13.6834175 15.0976311,14.3165825 14.7071068,14.7071068 C14.3165825,15.0976311 13.6834175,15.0976311 13.2928932,14.7071068 L8,9.415 L2.70710678,14.7071068 C2.34662282,15.0675907 1.77939176,15.0953203 1.38710056,14.7902954 L1.29289322,14.7071068 C0.902368927,14.3165825 0.902368927,13.6834175 1.29289322,13.2928932 L1.29289322,13.2928932 L6.585,8 L1.29289322,2.70710678 C0.902368927,2.31658249 0.902368927,1.68341751 1.29289322,1.29289322 C1.68341751,0.902368927 2.31658249,0.902368927 2.70710678,1.29289322 Z"></path></svg>
      </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.24 #Components.mood-rating Mood Rating

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+

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" 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" 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" 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" 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" 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.25 #Components.moodBadge Mood Badge

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

Default styling

.sb-mood-badge.sb-icon--xxs

Extra extra small size mood badge

.sb-mood-badge.sb-icon--xs

Extra small size mood badge

.sb-mood-badge.sb-icon--s

Small size mood badge

.sb-mood-badge.sb-icon--m

Medium size mood badge

.sb-mood-badge.sb-icon--l

Large size mood badge

.sb-mood-badge.sb-icon--xl

Extra large size mood badge

Markup

<svg class="sb-icon sb-icon--mood [modifier class]" 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>

Source: components/_badge.scss, line 109

2.26 #Components.overflow-menu Overflow Menu

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.27 #Components.popover Popover

Popover - Animate content

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

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 61

2.28 #Components.preview Preview

Preview area.

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

Default styling

Preview

.sb-preview--active

Active preview

Preview

Markup

<div class="sb-preview [modifier class]">
  <div class="sb-preview__frame">
    <p class="sb-preview__label">Preview</p>
  </div>
</div>

Source: components/_preview.scss, line 1

2.29 #Components.radio Radio

Group

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)

Basic radio.

Basic disabled radio.

Basic disabled and checked radio.

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

A basic radio group. Apply a .sb-radio-group class to the radio wrapper. If you would like to apply validation styles and messages, check out the Form Control component.

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

Default styling

Basic radio

.sb-radio-group--inline

radio group aligned horizontally

Basic radio

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 107

2.30 #Components.rating Rating

Group

A basic rating component.

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

1

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

A basic rating group. Apply a .sb-rating-group class to the rating wrapper. If text is included a {modifier class} is required. If you would like to apply validation styles and messages, check out the Form Control component.

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

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.31 #Components.select Select

Disabled Select

Select element. If you would like to apply validation styles and messages, check out the Form Control component.

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

Choose an option

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

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

Choose an option

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

This sidepanel is used throughout UBNext. Note that there is no wrapper because:

We cannot create a new stacking context because the content has to animate below the main navigation and the button above it
If we have a wrapper, we need to animate it the exact same way as the content so that click events in the app can still be captured and the design is not cut off, which means using transform, which means creating a new stacking context. Fun!

This means that in order to collapse the sidepanel, you need to add sb-sidepanel--collapsed to the aside, and sb-sidepanel__handle--collapsed to the handle. In order to also animate your application correctly, use sb-container--sidepanel and sb-container--sidepanel-collapsed.

:focus-visible will not work in all browsers In order to disable animations use sb-sidepanel--inanimate (on the panel), sb-container--sidepanel-inanimate (on the main content) and sb-sidepanel__handle--inanimate (on the toggle button)

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

Content

Markup

<div class="kss-modifier__example--sidepanel">
   <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" 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>
   <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--secondary sb-btn--block">Button</button>
     </div>
   </aside>
   <main class="sb-container--sidepanel sb-padding" data-kss-animation-switch="sb-container--sidepanel-collapsed" data-kss-animation-name="Main">
      Content
   </main>
</div>

Source: components/_sidepanel.scss, line 3

2.33 #Components.slider Slider

Range Slider

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

10

0

3

10

.sb-input-range--disabled

disabled

0

10

0

3

10

.sb-input-range__label--hide

hide label values

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.33.1 #Components.slider.range Range Slider

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

.sb-input-range--disabled

disabled

0

2

10

.sb-input-range__label--hide

hide label values

0

2

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.34 #Components.switch Switches

Switches toggle the state of a single setting on or off.

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

Default styling

Default state

Disabled state

Disabled - On state

.sb-switch--s

Small toggle switch

Default state

Disabled state

Disabled - On state

Markup

<div class="switch-example-wrapper sb-margin-bottom-l sb-flex sb-align-items-center">
 <span id="defaultState" class="sb-margin-right-s">Default state</span>
 <div class="sb-switch [modifier class]">
   <input type="checkbox" class="sb-switch__input" id="switch-1-[modifier class]" aria-labelledby="defaultState" />
   <label for="switch-1-[modifier class]" class="sb-switch__track">
     <span class="sb-switch__icon-on"></span>
     <span class="sb-switch__icon-off"></span>
     <span class="sb-switch__handle"></span>
   </label>
 </div>
</div>
<div class="switch-example-wrapper sb-margin-bottom-l sb-flex sb-align-items-center">
 <span id="disbaledState" class="sb-margin-right-s">Disabled state</span>
 <div class="sb-switch [modifier class]">
   <input type="checkbox" class="sb-switch__input" id="switch-disabled-[modifier class]" aria-labelledby="disabledState" disabled />
   <label for="switch-disabled-[modifier class]" class="sb-switch__track">
     <span class="sb-switch__icon-on"></span>
     <span class="sb-switch__icon-off"></span>
     <span class="sb-switch__handle"></span>
   </label>
 </div>
</div>
<div class="switch-example-wrapper sb-flex sb-align-items-center">
 <span id="disabledOnState" class="sb-margin-right-s">Disabled - On state</span>
 <div class="sb-switch [modifier class]">
   <input type="checkbox" class="sb-switch__input" aria-checked="true" id="switch-disabled-on-[modifier class]" checked disabled aria-labelledby="disabledOnState" />
   <label for="switch-disabled-on-[modifier class]" class="sb-switch__track">
     <span class="sb-switch__icon-on"></span>
     <span class="sb-switch__icon-off"></span>
     <span class="sb-switch__handle"></span>
   </label>
 </div>
</div>

Source: components/_switch.scss, line 1

2.35 #Components.table Table

Table with scrollable content

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	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--checkbox-visible

Shows all elements on checkbox column.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--compact.sb-table--checkbox-visible

Applies small padding to the cells of your table.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--comfortable.sb-table--checkbox-visible

Applies big padding to the cells of your table.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	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">
        <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-table__tbody 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.35.1 #Components.table.scrollable Table with scrollable content

Markup change compared to not scrollable content:

your table needs to be in a parent ("viewport") with a fixed size
your table needs to be wrapped in a .table-container
each column (th and td elements) are going to have the same width. But you can specify a width in percent for each column to adapt the grid.
compare to previous one, on the first th, don't forget to put sb-table__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	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--checkbox-visible

Shows all elements on checkbox column.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--compact.sb-table--checkbox-visible

Applies small padding to the cells of your table.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--comfortable.sb-table--checkbox-visible

Applies big padding to the cells of your table.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table__tr.sb-table__tr--inactive

Disable hover highlight for table row.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	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">
        <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 425

2.36 #Components.table row Table row

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

Default styling

	Form Name	Platform	Created	Performance	Status
	NPS campaign CS Nordics		19 Sept 2018	221 Completed	Active

.sb-table__tr--inactive

Disable hover highlight for table row.

	Form Name	Platform	Created	Performance	Status
	NPS campaign CS Nordics		19 Sept 2018	221 Completed	Active

.sb-table__tr--disabled

Disable table row entirely.

	Form Name	Platform	Created	Performance	Status
	NPS campaign CS Nordics		19 Sept 2018	221 Completed	Active

Markup

<div class="sb-table">
  <table class="sb-table__table" role="grid">
     <thead class="sb-table__thead">
        <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-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-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 288

2.37 #Components.table-list Table List

Table List as menu Single line with checkbox

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.37.1 #Components.table-list.as-menu Table List as menu

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 52

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

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

This is a single line item with a checkbox More info
This is a single line item with a checkbox More info
This is a single line item with a checkbox More info
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 152k responses
This is a single line item with a checkbox 1 responses
This is a single line item with a checkbox long text 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" 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-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" 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-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" 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-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" 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-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" 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-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" 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-color-light-1">5879 responses</span>
     </div>
   </li>
 </ul>

Source: components/_table-list.scss, line 69

2.38 #Components.Tabs Tabs

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" role="tablist">
  <span class="sb-tabs__tab" role="tab" aria-selected="false">Chart type</span>
  <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.39 #Components.tags Tags

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.40 #Components.tile Tile

Tile element is used for example in a modal window.

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

Tile component

Markup

<div class="sb-tile">
  <div class="sb-padding-xl">Tile component</div>
</div>

Source: components/_tile.scss, line 1

2.41 #Components.toast Toast

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

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

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-toast__title">Toast title</p>
     <p class="sb-toast__sub-title">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-toast__title">Toast title</p>
     <p class="sb-toast__sub-title">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>
 <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-toast__title">Toast title</p>
     <p class="sb-toast__sub-title">Toast message that is unfortunately very long and annoying because it breaks onto multiple lines like this</p>
   </div>
   <div class="sb-flex sb-justify-content-center">
     <div class="sb-flex sb-flex-column ">
       <button class="sb-toast__button sb-toast__button--stretch sb-border-bottom-light-3">
         Got it
       </button>
       <button class="sb-toast__button sb-toast__button--stretch">
         Undo
       </button>
     </div>
   </div>
 </div>

Source: components/_toast.scss, line 1

2.42 #Components.tooltip Tooltip

Tooltip large Tooltip left Tooltip right Tooltip small

Tooltip element default (medium). Used for descriptions or explanation of an action on the interface. Slides up to the top of its container. Note that we do not currently support inline elements with tooltips.

Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+

Default styling

.sb-tooltip--bottom

Slides down to the bottom of its container.

.sb-tooltip--open

Always open tooltip.

Markup

<div class="sb-tile sb-padding-l sb-text--center">
  <div class="sb-tooltip__container" aria-describedby="tooltip-1">
    <a href="#">hover me</a>
    <div role="tooltip" id="tooltip-1" class="sb-tooltip [modifier class]">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at.</p>
      <p>Alea iacta est!</p>
      <div class="sb-tooltip__arrow"></div>
    </div>
  </div>
</div>

Source: components/_tooltip.scss, line 3

2.42.1 #Components.tooltip.large Tooltip large

Tooltip element large. Used for long text (not ideal). e.g: comments on feedback page or privacy policy.

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

Markup

<div class="sb-tooltip__container sb-text--center" aria-describedby="tooltip-5">
  <p>hover me</p>
  <div role="tooltip" id="tooltip-5" class="sb-tooltip sb-tooltip--l">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at. Mauris quis tincidunt eros. Sed eu felis nulla. Aliquam ullamcorper magna risus, id placerat leo pulvinar at. Nunc tortor nunc, porttitor a finibus vel, tristique quis enim. Mauris eget mauris laoreet, vulputate libero finibus, dignissim nisi. In nec lectus vel est vehicula efficitur consequat vel ligula. Curabitur accumsan quam at mauris finibus, et egestas nulla ultricies. Pellentesque vel venenatis tellus, sed tempus ex. Nunc condimentum ligula eros, id scelerisque odio blandit quis. Morbi sit amet felis non ex dictum vulputate.</p>
    <div class="sb-tooltip__arrow"></div>
  </div>
</div>

Source: components/_tooltip.scss, line 221

2.42.2 #Components.tooltip.left Tooltip left

Tooltip element positioned to the left of its parent. Used when there's not enough space on the left for the tooltip to overflow when centered.

Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+

Markup

<div class="sb-tooltip__container" aria-describedby="tooltip-2">
  <p>hover me</p>
  <div role="tooltip" id="tooltip-2" class="sb-tooltip sb-tooltip--left">
    <p>Fancy tooltip content.</p>
    <div class="sb-tooltip__arrow"></div>
  </div>
</div>

Source: components/_tooltip.scss, line 165

2.42.3 #Components.tooltip.right Tooltip right

Tooltip element positioned to the right of its parent. Used when there's not enough space on the right for the tooltip to overflow when centered.

Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+

Markup

<div class="sb-tooltip__container sb-text--right" aria-describedby="tooltip-3">
  <p>hover me</p>
  <div role="tooltip" id="tooltip-3" class="sb-tooltip sb-tooltip--right">
    <p>Fancy tooltip content.</p>
    <div class="sb-tooltip__arrow"></div>
  </div>
</div>

Source: components/_tooltip.scss, line 184

2.42.4 #Components.tooltip.small Tooltip small

Tooltip element small. Always displayed on one line! Used for small descriptions or names. eg: emotions in mood rating.

Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+

Markup

<div class="sb-tooltip__container sb-text--center" aria-describedby="tooltip-4">
  <p>hover me</p>
  <div role="tooltip" id="tooltip-4" class="sb-tooltip sb-tooltip--s">
    <p>Fancy tooltip content.</p>
    <div class="sb-tooltip__arrow"></div>
  </div>
</div>

Source: components/_tooltip.scss, line 203

2.43 #Components.upload Upload

Upload with validation

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

change

.sb-upload--inactive

Add and remove this class with js to switch between active and inactive states

change

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

The file upload component with validation.

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

change

Error message here.

Markup

<div class="sb-form-control sb-form-control--invalid">
  <div class="sb-upload">
    <button class="sb-upload__btn sb-btn sb-btn--secondary" id="upload-button-">Upload File</button>
    <input class="sb-upload__input" type="file" id="upload-id-validation" name="upload-1" accept="image/*">
    <label class="sb-upload__label" for="upload-id-validation">
      <div class="sb-upload__faux sb-input" role="button" tabindex="0">
        <input class="sb-upload__filename" aria-labelledby="upload-button-" readonly value="a-very-very-very-very-very-very-very-very-very-very-very-very-long-filename.jpg"/>
        <span class="sb-upload__link" id="upload-link-validation">change</span>
      </div>
    </label>
    <button class="sb-upload__delete" aria-label="Delete">
      <svg class="sb-icon" viewBox="0 0 16 16">
        <path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
      </svg>
    </button>
  </div>
  <p role="alert" class="sb-form-control__validation">Error message here.</p>
</div>

Source: components/_upload.scss, line 122

2.44 #Components.wizard-dialog Wizard Dialog

A wizard dialog component. (by default not visible, you should add sb-wizard-dialog--open to open it)

A wizard contains multiple steps and only one step is active. The wizard appears in a fullscreen dialog.

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

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

An anchor card

A very long and boring card title that can span over and over

Label

Label

Label

Label

Label

Label

A long label over two lines

A long label over two lines

Label

Label

Label

Label

Label

Label

A long label over two lines

A long label over two lines

Label

Label

A long label over two lines

A long label over two lines

Coming soon

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

That's an empty list