Klarna UI CSS components

Getting started

Welcome to the ui-css-components guide. The goals of this document are:

To explain the usage of all components;
To clarify the reasoning behind their implementation;
To give you a clearer understanding of use cases for each component, so we achieve a better user experience;

Enjoy!

Instructions

Press G on any screen in this showroom to trigger the grid. Everything should be aligned with the grid.

Requirements

The ui-css-components depends on Open Sans font. You'll probably want to include it directly in your HTML, so you'll benefit from Google's CDN.

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'
      rel='stylesheet'
      type='text/css'>

In the case you prefer to add it to your css, include it like this:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

Please note that if you're using SASS the default behaviour will be to download and append the font to your package, so you will not benefit from caching.

Standards

The ui-css-components follow a loose version of BEM. It breaks it in it's usage of some modifiers (e.g. 'big').

What is not there

The ui-css-components do not dictate how to build your layout. So things like widths, margins between elements (although all texts follow a grid) and responsiveness must be dealt in your project.

License

See the License attached.

Baseline

The baseline is a root component that serves as the grid system for the Toolkit. A cui__baseline class is provided for typography and grid reset, to be used in the <html> tag. It will set the proper font rendering style for webkit and set the rem grid (font-size) to 5px. All the sizes in the Toolkit are written assuming that 5px grid.

The grid system of the Toolkit aims at having all borders and text baselines matching the grid. Some exceptions are made, for example for the floating labels in the Fields, but these are taken as corner cases.

Baseline visual grid

To help with the positioning of elements in the vertical grid (especially alignment of text to the baseline) a class cui__baseline__grid is supported that adds the 5 pixel grid as a background of the element. While developing, it can be helpful to keep that class in the <body> tag to ensure that items do not get out of the grid.

Content wrapper

Horizontal grids are not covered by the Toolkit, but a convenient responsive wrapper cui__baseline__content--main is provided that will add some paddings on mobile layouts and will stop growing and keep itself centered in resolutions above 700px.

Spacer

If you need to create vertical spacers following the grid, you can use the .cui__baseline__spacer and its modifiers .x2 .x3 .x4 .x5 .x6.

Alert

Alerts are blocks which contain information like errors.

Error

An error alert box heading

Some text inside helps to get an idea of how the alert would look like. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Correlation ID: a4c531de-e35d-4901-93ae-44e32639b4b1

<div class="cui__alert--error">
  <h1 class="cui__alert__title">
    An error alert box heading
  </h1>
  <p class="cui__alert__paragraph">
    Some text inside helps to get an idea of how the alert would look like. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p class="cui__alert__paragraph">
    Correlation ID: <em>a4c531de-e35d-4901-93ae-44e32639b4b1</em>
  </p>
</div>

Block

Blocks are the layout blocks available to place content.

Simple
- Blue
Installments

Simple

The default block has a white background

Some text inside helps to get an idea of how the block would look like.

<div class="cui__block">
  <h1 class="cui__title--primary">
    The default block has a white background
  </h1>
  <p class="cui__paragraph--primary">
    Some text inside helps to get an idea of how the block would look like.
  </p>
</div>

Blue

When background is dark text color needs to be inverted manually

And some lorem ipsum dolor sit amet et consequetur niman sulan anima lontana.

<div class="cui__block blue">
  <h1 class="cui__title--primary white">
    When background is dark text color needs to be inverted manually
  </h1>

  <p class="cui__paragraph--primary white">
    And some lorem ipsum dolor sit amet et consequetur niman sulan anima lontana.
  </p>
</div>

Installments

Your Installments

Estimated total

€100

APR

9.99%†

<div class="cui__block--installments">
  <h3 class="cui__block--installments__title">
    Your Installments
  </h3>

  <div class="cui__block--installments__values">
    <div class="cui__block--installments__value">
      <h4 class="cui__block--installments__value__title">Estimated total</h4>
      <p class="cui__block--installments__value__content">
          €100
      </p>
    </div>

    <div class="cui__block--installments__value">
      <h4 class="cui__block--installments__value__title">APR</h4>
      <p class="cui__block--installments__value__content">
          9.99%<span class="cui__block--installments__value__content__clarification">†</span>
      </p>
    </div>  
  </div>
</div>

Button

Buttons use the cui__button block, and only button tags should be used.

Overview
Usage
- Importance
- Size
Primary
Secondary

Overview

Here's a showcase of all buttons. Pass your mouse over and click the elements to see the hover and active states.

Importance

Buttons are divided by importance, therefore we have primary and secondary buttons.

You should always use the primary button for your main actions, actions that will make the user move forward in your flow, like "buy", "save", "continue" or "confirm".

Secondary buttons should be used for auxiliary or negative actions, like "cancel" or "skip".

When you have both actions, the secondary button should be on the left of the primary button.

Size

Buttons have 3 different sizes. Big buttons should be used for calls to action, specially when they are the main action on a page. Small buttons are more appropriate for non-final actions, when you have many steps, or when you need more page space.

Primary

This should be used for your main actions.

<button class="cui__button--primary">
  Primary
</button>

Loading

Every time a user submits a form, you should change the current submit button to be loading.

<button class="cui__button--primary is-loading">
    <svg
    width="20"
    height="20"
    class="cui__illustration__loader"
    viewBox="-1 -1 22 22">
    <defs>
      <linearGradient id="gradient-white-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 0)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.2)"></stop>
      </linearGradient>
      <linearGradient
        id="gradient-white-1"
        gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.2)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.4)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.4)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.6)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.6)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.8)"></stop></linearGradient>
      <linearGradient id="gradient-white-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.8)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 1)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 1)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 1.2)"></stop>
      </linearGradient>
    </defs>

    <g fill="none" stroke-width="2" transform="translate(10,10)">
      <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-white-0)"></path>
      <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-white-1)"></path>
      <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-white-2)"></path>
      <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-white-3)"></path>
      <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-white-4)"></path>
      <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-white-5)" stroke-linecap="round"></path>
    </g>
  </svg>
</button>

Disabled

<button class="cui__button--primary is-disabled">
  Primary disabled
</button>

Small

<button class="cui__button--primary small">
  Primary small
</button>

Small & disabled

<button class="cui__button--primary small is-disabled">
  Primary small disabled
</button>

Big

<button class="cui__button--primary big">
  Primary big
</button>

Big & loading

<button class="cui__button--primary big is-loading">
    <svg
    width="20"
    height="20"
    class="cui__illustration__loader"
    viewBox="-1 -1 22 22">
    <defs>
      <linearGradient id="gradient-white-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 0)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.2)"></stop>
      </linearGradient>
      <linearGradient
        id="gradient-white-1"
        gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.2)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.4)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.4)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.6)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.6)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.8)"></stop></linearGradient>
      <linearGradient id="gradient-white-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.8)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 1)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 1)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 1.2)"></stop>
      </linearGradient>
    </defs>

    <g fill="none" stroke-width="2" transform="translate(10,10)">
      <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-white-0)"></path>
      <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-white-1)"></path>
      <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-white-2)"></path>
      <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-white-3)"></path>
      <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-white-4)"></path>
      <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-white-5)" stroke-linecap="round"></path>
    </g>
  </svg>
</button>

Big & disabled

<button class="cui__button--primary big is-disabled">
  Primary big disabled
</button>

With price

<button class="cui__button--primary has-price">
  Pay now
  <span class="cui__button__price">
    $1.20
  </span>
</button>

With price big

<button class="cui__button--primary big has-price">
  Pay now
  <span class="cui__button__price">
    $1.20
  </span>
</button>

Dynamic styling

Dynamic styling is the feature of allowing for override of the background and foreground colors. Not all styles overrides are supported: for Buttons, it's only background/border color and text color.

In primary buttons, the dynamic-styling class creates a darkened layer on top of the button for displaying on the hover and focus/active states, so that any color can have those states (as long as is not too dark). Given that the darkening is done with a layer on top, the text itself needs to live in a different layer above the darkened overlay. That's why it needs to be a wrapped in a class with a different style.

<button
    class="cui__button--primary dynamic-styling"
    style="color: #F9FF3C; background-color: #3500C8; border-color: #3500C8;">
    <span class="cui__button__label">
      Pay now
    </span>
</button>

<button
    class="cui__button--primary dynamic-styling is-disabled"
    style="color: #F9FF3C; background-color: #3500C8; border-color: #3500C8;">
    <span class="cui__button__label">
      Pay now
    </span>
</button>

<button
    class="cui__button--primary dynamic-styling is-loading"
    style="background-color: #3500C8; border-color: #3500C8;">
    <svg
        width="20"
        height="20"
        class="cui__illustration__loader"
        viewBox="-1 -1 22 22">
        <defs>
            <linearGradient id="gradient-primary-dynamic-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="rgba(249,255,60, 0)"></stop>
                <stop offset="100%" stop-color="rgba(249,255,60, 0.2)"></stop>
            </linearGradient>
            <linearGradient
                id="gradient-primary-dynamic-1"
                gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="rgba(249,255,60, 0.2)"></stop>
                <stop offset="100%" stop-color="rgba(249,255,60, 0.4)"></stop>
            </linearGradient>
            <linearGradient id="gradient-primary-dynamic-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="rgba(249,255,60, 0.4)"></stop>
                <stop offset="100%" stop-color="rgba(249,255,60, 0.6)"></stop>
            </linearGradient>
            <linearGradient id="gradient-primary-dynamic-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="rgba(249,255,60, 0.6)"></stop>
                <stop offset="100%" stop-color="rgba(249,255,60, 0.8)"></stop></linearGradient>
            <linearGradient id="gradient-primary-dynamic-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                <stop offset="0%" stop-color="rgba(249,255,60, 0.8)"></stop>
                <stop offset="100%" stop-color="rgba(249,255,60, 1)"></stop>
            </linearGradient>
            <linearGradient id="gradient-primary-dynamic-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(249,255,60, 1)"></stop>
                <stop offset="100%" stop-color="rgba(249,255,60, 1.2)"></stop>
            </linearGradient>
        </defs>

        <g fill="none" stroke-width="2" transform="translate(10,10)">
            <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-primary-dynamic-0)"></path>
            <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-primary-dynamic-1)"></path>
            <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-primary-dynamic-2)"></path>
            <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-primary-dynamic-3)"></path>
            <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-primary-dynamic-4)"></path>
            <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-primary-dynamic-5)" stroke-linecap="round"></path>
        </g>
    </svg>
</button>

Secondary

This should be used for your secondary actions.

<button class="cui__button--secondary">
  Secondary
</button>

Loading

<button class="cui__button--secondary is-loading">
    <svg
      width="20"
      height="20"
      class="cui__illustration__loader"
      viewBox="-1 -1 22 22">
      <defs>
        <linearGradient id="gradient-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(0,116,200, 0)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.2)"></stop>
        </linearGradient>
        <linearGradient
          id="gradient-1"
          gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.2)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.4)"></stop>
        </linearGradient>
        <linearGradient id="gradient-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.4)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.6)"></stop>
        </linearGradient>
        <linearGradient id="gradient-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.8)"></stop></linearGradient>
        <linearGradient id="gradient-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.8)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 1)"></stop>
        </linearGradient>
        <linearGradient id="gradient-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="rgba(0,116,200, 1)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 1.2)"></stop>
        </linearGradient>
      </defs>

      <g fill="none" stroke-width="2" transform="translate(10,10)">
        <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-0)"></path>
        <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-1)"></path>
        <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-2)"></path>
        <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-3)"></path>
        <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-4)"></path>
        <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-5)" stroke-linecap="round"></path>
      </g>
    </svg>
</button>

Disabled

<button class="cui__button--secondary is-disabled">
  Secondary disabled
</button>

Small

<button class="cui__button--secondary small">
  Secondary small
</button>

Small & disabled

<button class="cui__button--secondary small is-disabled">
  Secondary small disabled
</button>

Big

<button class="cui__button--secondary big">
  Secondary big
</button>

Big & loading

<button class="cui__button--secondary big is-loading">
    <svg
      width="20"
      height="20"
      class="cui__illustration__loader"
      viewBox="-1 -1 22 22">
      <defs>
        <linearGradient id="gradient-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(0,116,200, 0)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.2)"></stop>
        </linearGradient>
        <linearGradient
          id="gradient-1"
          gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.2)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.4)"></stop>
        </linearGradient>
        <linearGradient id="gradient-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.4)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.6)"></stop>
        </linearGradient>
        <linearGradient id="gradient-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 0.8)"></stop></linearGradient>
        <linearGradient id="gradient-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stop-color="rgba(0,116,200, 0.8)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 1)"></stop>
        </linearGradient>
        <linearGradient id="gradient-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="rgba(0,116,200, 1)"></stop>
          <stop offset="100%" stop-color="rgba(0,116,200, 1.2)"></stop>
        </linearGradient>
      </defs>

      <g fill="none" stroke-width="2" transform="translate(10,10)">
        <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-0)"></path>
        <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-1)"></path>
        <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-2)"></path>
        <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-3)"></path>
        <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-4)"></path>
        <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-5)" stroke-linecap="round"></path>
      </g>
    </svg>
</button>

Big & disabled

<button class="cui__button--secondary big is-disabled">
  Secondary big disabled
</button>

With price

<button class="cui__button--secondary has-price">
  Pay now
  <span class="cui__button__price">
    $1.20
  </span>
</button>

With price big

<button class="cui__button--secondary big has-price">
  Pay now
  <span class="cui__button__price">
    $1.20
  </span>
</button>

Dynamic styling

Dynamic styling is the feature of allowing for override of the background and foreground colors. Not all styles overrides are supported: for Buttons, it's only background/border color and text color.

In secondary buttons, the dynamic-styling class creates a white layer on top of the button for masking the background color and then showing it on the hover and focus/active states, so that any color can have those states (as long as is not too dark). Like in the primary button dynamic styling, the label needs to be on a separate element, but since the color of the label will change from the same as the background to the foreground color when getting hover and focus/active, there is the need for two versions of the label: one that has the background color and it's displayed by default, and another one that has the foreground color and it's invisible until the button is hovered/focus/activated.

<button
    class="cui__button--secondary dynamic-styling"
    style="color: #3500C8; background-color: #3500C8; border-color: #3500C8;">
    <div class="cui__button__label">            
      Pay now
        <span
            class="cui__button__label--alt"
            title="Pay now"
            style="color: #F9FF3C;">
        </span>
    </div>

</button>

<button
    class="cui__button--secondary dynamic-styling is-disabled"
    style="color: #3500C8; background-color: #3500C8; border-color: #3500C8;">
    <span class="cui__button__label">
      Pay now
    </span>
</button>

<button
    class="cui__button--secondary dynamic-styling is-loading"
    style="color: #3500C8; border-color: #3500C8;">
    <svg
        width="20"
        height="20"
        class="cui__illustration__loader"
        viewBox="-1 -1 22 22">
        <defs>
            <linearGradient id="gradient-secondary-dynamic-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="rgba(53,0,200, 0)"></stop>
                <stop offset="100%" stop-color="rgba(53,0,200, 0.2)"></stop>
            </linearGradient>
            <linearGradient
                id="gradient-secondary-dynamic-1"
                gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="rgba(53,0,200, 0.2)"></stop>
                <stop offset="100%" stop-color="rgba(53,0,200, 0.4)"></stop>
            </linearGradient>
            <linearGradient id="gradient-secondary-dynamic-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="rgba(53,0,200, 0.4)"></stop>
                <stop offset="100%" stop-color="rgba(53,0,200, 0.6)"></stop>
            </linearGradient>
            <linearGradient id="gradient-secondary-dynamic-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="rgba(53,0,200, 0.6)"></stop>
                <stop offset="100%" stop-color="rgba(53,0,200, 0.8)"></stop></linearGradient>
            <linearGradient id="gradient-secondary-dynamic-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                <stop offset="0%" stop-color="rgba(53,0,200, 0.8)"></stop>
                <stop offset="100%" stop-color="rgba(53,0,200, 1)"></stop>
            </linearGradient>
            <linearGradient id="gradient-secondary-dynamic-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(53,0,200, 1)"></stop>
                <stop offset="100%" stop-color="rgba(53,0,200, 1.2)"></stop>
            </linearGradient>
        </defs>

        <g fill="none" stroke-width="2" transform="translate(10,10)">
            <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-secondary-dynamic-0)"></path>
            <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-secondary-dynamic-1)"></path>
            <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-secondary-dynamic-2)"></path>
            <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-secondary-dynamic-3)"></path>
            <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-secondary-dynamic-4)"></path>
            <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-secondary-dynamic-5)" stroke-linecap="round"></path>
        </g>
    </svg>
</button>

Checklist

A list of items, useful for short explanations.

Regular
Chromeless

Regular

Just one click and you're done
Very little hassle
Just do it! It can be done today, so why wait for tomorrow?

<ul class="cui__checklist">
  <li class="cui__checklist__item">
    <svg
      class="cui__checklist__checkmark"
      viewBox="0 0 25 25"
      version="1.1"
      aria-labelledby="Checkmark"
      class="cui__selector--direct__icon">
      <path d="M5 13.69l4.49 4.23L19.37 8"></path>
    </svg>Just one click and you're done
  </li>

  <li class="cui__checklist__item">
    <svg
      class="cui__checklist__checkmark"
      viewBox="0 0 25 25"
      version="1.1"
      aria-labelledby="Checkmark">
      <path d="M5 13.69l4.49 4.23L19.37 8"></path>
    </svg>Very little hassle
  </li>

  <li class="cui__checklist__item">
    <svg
      class="cui__checklist__checkmark"
      viewBox="0 0 25 25"
      version="1.1"
      aria-labelledby="Checkmark">
      <path d="M5 13.69l4.49 4.23L19.37 8"></path>
    </svg>Just do it! It can be done today, so why wait for tomorrow?
  </li>
</ul>

Chromeless

Just one click and you're done
Very little hassle
Just do it! It can be done today, so why wait for tomorrow?

<ul class="cui__checklist chromeless">
  <li class="cui__checklist__item">
    <svg
      class="cui__checklist__checkmark"
      viewBox="0 0 25 25"
      version="1.1"
      aria-labelledby="Checkmark"
      class="cui__selector--direct__icon">
      <path d="M5 13.69l4.49 4.23L19.37 8"></path>
    </svg>Just one click and you're done
  </li>

  <li class="cui__checklist__item">
    <svg
      class="cui__checklist__checkmark"
      viewBox="0 0 25 25"
      version="1.1"
      aria-labelledby="Checkmark">
      <path d="M5 13.69l4.49 4.23L19.37 8"></path>
    </svg>Very little hassle
  </li>

  <li class="cui__checklist__item">
    <svg
      class="cui__checklist__checkmark"
      viewBox="0 0 25 25"
      version="1.1"
      aria-labelledby="Checkmark">
      <path d="M5 13.69l4.49 4.23L19.37 8"></path>
    </svg>Just do it! It can be done today, so why wait for tomorrow?
  </li>
</ul>

Dialog

Dialogs are screens meant to be blocking and require an interaction for the user to proceed. There are several formats of them, but they more or less follow the same rules:

On mobile, dialogs take up the full screen, and are designed to look like native applications and mimic the native interactions.
On desktop, dialogs are formatted with more or less the same structure as in mobile, but the are positioned in the center of the screen with a black or white semi transparent overlay covering the rest of the screen so it's not possible to interact with whatever is in the background.

There are two components in this feature. One is the dialog itself which provides the layout for the inside of the dialog. The other one is the smoke overlay

Given their fullscreen nature, dialogs cannot be shown inline in the showroom.

Dropdown

Dropdowns are family of components that present the user with multiple options. The basic version is just a styling over the HTML <select> element, but more advanced versions include a combination of select with radio buttons, a radio button selector and a checkbox group.

Examples
Native
Radio

Examples

Native

Dropdown

The native dropdown component is just a set of styles over the native HTML dropdown. It can be combined with Fields into stacked fieldsets. The actual list of options is provided by the native behavior.

Stacking Dropdowns is done in the same way that Fields. Please go to the "Field" section for more details about stacking.

This is a dropdown

<div class="cui__dropdown--native">
  <label class="cui__dropdown--native__label">
    This is a dropdown
  </label>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

Focused

This is a focused dropdown

<div class="cui__dropdown--native is-focused">
  <label class="cui__dropdown--native__label">
    This is a focused dropdown
  </label>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

Loading

This is a dropdown that is loading

<div class="cui__dropdown--native is-loading">
  <label class="cui__dropdown--native__label">
    This is a dropdown that is loading
  </label>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

Selected

The Dropdown

And this is an option

<div class="cui__dropdown--native is-selected">
  <label class="cui__dropdown--native__label">
    The Dropdown
  </label>

  <div class="cui__dropdown--native__current-option">
    And this is an option
  </div>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

Disabled

This is a dropdown that is disabled

<div class="cui__dropdown--native is-disabled">
  <label class="cui__dropdown--native__label">
    This is a dropdown that is disabled
  </label>
</div>

Disabled and selected

This is a dropdown that is disabled

And this is the selected option

<div class="cui__dropdown--native is-disabled is-selected">
  <label class="cui__dropdown--native__label">
    This is a dropdown that is disabled
  </label>

  <div class="cui__dropdown--native__current-option">
    And this is the selected option
  </div>
</div>

Disabled and loading

This is a dropdown that is disabled

<div class="cui__dropdown--native is-disabled is-loading">
  <label class="cui__dropdown--native__label">
    This is a dropdown that is disabled
  </label>
</div>

Error

You need to select some of the options

A dropdown

Sorry, the option you selected is not available

Non-available option

<div class="cui__dropdown--native is-error half left">
  <div class="cui__dropdown--native__floating-label">
    You need to select some of the options
  </div>

  <label class="cui__dropdown--native__label">
    A dropdown
  </label>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

<div class="cui__dropdown--native is-error half right">
  <div class="cui__dropdown--native__floating-label">
    Sorry, the option you selected is not available
  </div>

  <label class="cui__dropdown--native__current-option">
    Non-available option
  </label>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

Warning

It is important that you select an option

A dropdown

The option you selected is not recommended

A non-ideal option

<div class="cui__dropdown--native is-warning half left">
  <div class="cui__dropdown--native__floating-label">
    It is important that you select an option
  </div>

  <label class="cui__dropdown--native__label">
    A dropdown
  </label>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

<div class="cui__dropdown--native is-warning half right">
  <div class="cui__dropdown--native__floating-label">
    The option you selected is not recommended
  </div>

  <div class="cui__dropdown--native__current-option">
    A non-ideal option
  </div>

  <select class="cui__dropdown--native__select">
    <option>And this is an option</option>
    <option>A second alternative</option>
  </select>
</div>

Radio

This is a radio selector

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__dropdown--radio">
  <div class="cui__dropdown--radio__option is-selected">
    <div class="cui__dropdown--radio__option__heading">
      This is a radio selector
    </div>

    <div class="cui__dropdown--radio__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Second item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Third item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Dynamic styling

This is a radio selector

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__dropdown--radio dynamic-styling">
  <div class="cui__dropdown--radio__option is-selected">
    <div
      class="cui__dropdown--radio__option__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__dropdown--radio__option__bullet__checkmark"
      style="background-color: #F9FF3C;"></div>

    <div class="cui__dropdown--radio__option__heading">
      This is a radio selector
    </div>

    <div class="cui__dropdown--radio__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div
        class="cui__promo-label"
        style="color: #F9FF3C; background-color: #3500C8;">
        promo
      </div>
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div
      class="cui__dropdown--radio__option__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__dropdown--radio__option__bullet__checkmark"
      style="background-color: #F9FF3C;"></div>

    <div class="cui__dropdown--radio__option__heading">
      Second item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div
      class="cui__dropdown--radio__option__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__dropdown--radio__option__bullet__checkmark"
      style="background-color: #F9FF3C;"></div>

    <div class="cui__dropdown--radio__option__heading">
      Third item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Borderless

This is a radio selector

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__dropdown--radio borderless">
  <div class="cui__dropdown--radio__option is-selected">
    <div class="cui__dropdown--radio__option__heading">
      This is a radio selector
    </div>

    <div class="cui__dropdown--radio__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Second item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Third item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Disabled

This is a radio selector

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__dropdown--radio is-disabled">
  <div class="cui__dropdown--radio__option is-selected">
    <div class="cui__dropdown--radio__option__heading">
      This is a radio selector
    </div>

    <div class="cui__dropdown--radio__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Second item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Third item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Borderless disabled

This is a radio selector

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__dropdown--radio is-disabled">
  <div class="cui__dropdown--radio__option is-selected">
    <div class="cui__dropdown--radio__option__heading">
      This is a radio selector
    </div>

    <div class="cui__dropdown--radio__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Second item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__dropdown--radio__option">
    <div class="cui__dropdown--radio__option__heading">
      Third item
    </div>

    <div class="cui__dropdown--radio__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Field

The Fields are deprecated. New projects will be designed using Input instead.

The field is a molecular element. It consists of a wrapper with the cui__field block, which should be added to a div tag, containing a cui__field__label added to a label tag and cui__field__input added to an input tag.

The reasons to use a label as a placeholder are 1) makes it easier to transition from the placeholder to the floarint label, because it's the same element 2) there's an issue that some browsers don't respect input padding 3) that's the standard way many libraries that have floating label components implement it, like material-ui and polymer and 4) it eliminates the need for fake placeholders on older browsers.

The trade-off is that we can't rely on focus and active pseudo-selectors for the input, so we need to programatically add classes to the wrapper.

Floating label

When fields are blank, their labels will behave as placeholders. When the field is being filled, the label should move to the top.

Stackable

When fields are stacked together, they should be wrapped in a cui__fieldset component, which provides the proper spacings before and after and solves the issues related to floats. cui__fields can be stacked together with cui__dropdown--native.

Examples
Regular
- focused
- filled
- error
- error focused
- warning
- warning focused
- disabled
Big
- focused
- filled
- error
- error focused
- warning
- warning focused
- disabled
Stacked
Icon
- big
- focused
- filled
- error
- warning
Centered
- filled
- error
- icon
- big
- loading
Loading
- big
- big centered

Examples

Checkout form

Regular

Please write your email address

<div class="cui__field">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" />
</div>

Focused

Please write your email address

<div class="cui__field is-focused">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" />
</div>

Filling

Please write your email address

<div class="cui__field is-filled is-focused">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" value="email@example.com" />
</div>

Filled

Please write your email address

<div class="cui__field is-filled">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" value="email@example.com" />
</div>

Error

Should be used when there's a problem with the filled value that blocks the user to continue.

Invalid email

<div class="cui__field is-error">
    <label class="cui__field__label">
        Invalid email
    </label>
    <input class="cui__field__input" value="invalid@" />
</div>

Error focused

Invalid email

<div class="cui__field is-error is-focused">
    <label class="cui__field__label">
        Invalid email
    </label>
    <input class="cui__field__input" value="invalid@" />
</div>

Warning

Should be used when there's something that requires user's attention to the filled value, but doesn't block her to continue.

Are you sure the domain is exanple?

<div class="cui__field is-warning">
    <label class="cui__field__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__field__input" value="email@exanple.com" />
</div>

Warning focused

Are you sure the domain is exanple?

<div class="cui__field is-warning is-focused">
    <label class="cui__field__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__field__input" value="email@exanple.com" />
</div>

Disabled

Should be used when it's important to show the field to the user but she should not be able to edit it.

Enter your email address

<div class="cui__field is-disabled left half">
    <label class="cui__field__label">
        Enter your email address
    </label>
    <input disabled class="cui__field__input" value="email@exanple.com" />
</div>

<div class="cui__field is-disabled right half">
    <label class="cui__field__label">
        Enter your email address
    </label>
    <input disabled class="cui__field__input" />
</div>

Big

Please write your email address

<div class="cui__field big">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" />
</div>

Focused

Please write your email address

<div class="cui__field big is-focused">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" />
</div>

Filling

Please write your email address

<div class="cui__field big is-filled is-focused">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" value="email@example.com" />
</div>

Filled

Please write your email address

<div class="cui__field big is-filled">
    <label class="cui__field__label">
        Please write your email address
    </label>
    <input class="cui__field__input" value="email@example.com" />
</div>

Error

Should be used when there's a problem with the filled value that blocks the user to continue.

Invalid email

<div class="cui__field big is-error">
    <label class="cui__field__label">
        Invalid email
    </label>
    <input class="cui__field__input" value="invalid@" />
</div>

Error focused

Invalid email

<div class="cui__field big is-error is-focused">
    <label class="cui__field__label">
        Invalid email
    </label>
    <input class="cui__field__input" value="invalid@" />
</div>

Warning

Should be used when there's something that requires user's attention to the filled value, but doesn't block her to continue.

Are you sure the domain is exanple?

<div class="cui__field big is-warning">
    <label class="cui__field__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__field__input" value="email@exanple.com" />
</div>

Warning focused

Are you sure the domain is exanple?

<div class="cui__field big is-warning is-focused">
    <label class="cui__field__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__field__input" value="email@exanple.com" />
</div>

Disabled

Should be used when it's important to show the field to the user but she should not be able to edit it.

Enter your email address

<div class="cui__field big is-disabled left half">
    <label class="cui__field__label">
        Enter your email address
    </label>
    <input disabled class="cui__field__input" value="email@exanple.com" />
</div>

<div class="cui__field big is-disabled right half">
    <label class="cui__field__label">
        Enter your email address
    </label>
    <input disabled class="cui__field__input" />
</div>

Stacked fields

Fields can be stacked together to form a single organic visual component.

By default, side by side fields will be responsive, meaning that they will turn full width on thin screens. If you want fields to keep appearing side by side on thin viewports, add the -non-responsive class to the field. You can see an example of this in the Billing Address demo.

Name

Lastname

Address line 1

Address line 2

City

State

Zip

Phone number

Email

Side by side

Name

Lastname

<div class="cui__fieldset">
    <div class="cui__field left half">
        <label class="cui__field__label">
            Name
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field right half">
        <label class="cui__field__label">
            Lastname
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Top part

Name

Lastname

<div class="cui__fieldset">
    <div class="cui__field top-left half">
        <label class="cui__field__label">
            Name
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field top-right half">
        <label class="cui__field__label">
            Lastname
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Top only

Email address

<div class="cui__fieldset">
    <div class="cui__field top">
        <label class="cui__field__label">
            Email address
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Bottom part

City

Country

<div class="cui__fieldset">
    <div class="cui__field bottom-left half">
        <label class="cui__field__label">
            City
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field bottom-right half">
        <label class="cui__field__label">
            Country
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Bottom only

Password

<div class="cui__fieldset">
    <div class="cui__field bottom">
        <label class="cui__field__label">
            Password
        </label>
        <input type="password" class="cui__field__input" />
    </div>
</div>

Square

City

Country

<div class="cui__fieldset">
    <div class="cui__field top-left half">
        <label class="cui__field__label">
            City
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field top-right half">
        <label class="cui__field__label">
            Country
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field square">
        <label class="cui__field__label">
            Country
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Half and Quarter sizes

City

Zip

Country

<div class="cui__fieldset">
    <div class="cui__field top-left half">
        <label class="cui__field__label">
            City
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field center quarter">
        <label class="cui__field__label">
            Zip
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field top-right quarter">
        <label class="cui__field__label">
            Country
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Three quarters

City

Zip

<div class="cui__fieldset">
    <div class="cui__field left quarter">
        <label class="cui__field__label">
            City
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field right three-quarters">
        <label class="cui__field__label">
            Zip
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Twenty - Forty

Title

Name

Lastname

<div class="cui__fieldset">
    <div class="cui__field top-left twenty">
        <label class="cui__field__label">
            Title
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field center forty">
        <label class="cui__field__label">
            Name
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field top-right forty">
        <label class="cui__field__label">
            Lastname
        </label>
        <input class="cui__field__input" />
    </div>
</div>

Twenty - Eighty

Title

Name

<div class="cui__fieldset">
    <div class="cui__field left twenty">
        <label class="cui__field__label">
            Title
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field right eighty">
        <label class="cui__field__label">
            Name
        </label>
        <input class="cui__field__input" />
    </div>
</div>

One third - Two thirds

Title

Name

<div class="cui__fieldset">
    <div class="cui__field left third">
        <label class="cui__field__label">
            Title
        </label>
        <input class="cui__field__input" />
    </div>
    <div class="cui__field right two-thirds">
        <label class="cui__field__label">
            Name
        </label>
        <input class="cui__field__input" />
    </div>
</div>

With Icon

Enter your postal code

<div class="cui__field--icon">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label">
        Enter your postal code
    </label>
    <input class="cui__field--icon__input" />
</div>

Icon with stroke style

Enter your postal code

<div class="cui__field--icon">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g transform="translate(2, 2)" class="cui__field--icon__icon__stroke">
      <circle cx="8" cy="8" r="7.5"></circle>
      <path d="M6.5,11 L4.5,9" stroke-linecap="round"></path>
      <path d="M11.5,11 L6.5,6" stroke-linecap="round" transform="translate(9, 8.500000) scale(1, -1) translate(-9, -8.500000) "></path>
    </g>
    </svg>

    <label class="cui__field--icon__label">
        Enter your postal code
    </label>
    <input class="cui__field--icon__input" />
</div>

Big

Enter your password

<div class="cui__field--icon big">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label">
        Enter your password
    </label>
    <input class="cui__field--icon__input" />
</div>

Focused

Enter your password

<div class="cui__field--icon is-focused">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label is-focused">
        Enter your password
    </label>
    <input class="cui__field--icon__input" />
</div>

Filling

Please write your email address

<div class="cui__field--icon is-filled is-focused">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label">
        Please write your email address
    </label>
    <input class="cui__field--icon__input" value="email@example.com" />
</div>

Error

Are you sure the domain is example?

<div class="cui__field--icon is-error">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label is-focused">
        Are you sure the domain is example?
    </label>
    <input class="cui__field--icon__input" value="email@exanple.com" />
</div>

Warning

Are you sure the domain is example?

<div class="cui__field--icon is-warning">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label is-focused">
        Are you sure the domain is example?
    </label>
    <input class="cui__field--icon__input" value="email@exanple.com" />
</div>

Disabled

Are you sure the domain is example?

<div class="cui__field--icon is-disabled">
    <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
        <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
        <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
    </g>
    </svg>

    <label class="cui__field--icon__label">
        Are you sure the domain is example?
    </label>
    <input disabled class="cui__field--icon__input" value="email@exanple.com" />
</div>

Centered

This is aligned to the center

<div class="cui__field is-centered">
    <label class="cui__field__label">
        This is aligned to the center
    </label>
    <input class="cui__field__input" />
</div>

Filled

This centered field is filled

<div class="cui__field is-centered is-filled">
    <label class="cui__field__label">
        This centered field is filled
    </label>
    <input class="cui__field__input" value="email@example.com" />
</div>

Error

Something went wrong!

<div class="cui__field is-centered is-error">
    <label class="cui__field__label">
        Something went wrong!
    </label>
    <input class="cui__field__input" value="invalid input" />
</div>

Icon

ZIP Code

<div class="cui__field--icon is-centered is-filled is-focused">
        <svg class="cui__field--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__field--icon__icon__fill" transform="translate(2.000000, 4.000000)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
        </svg>
    <label class="cui__field__label">
      ZIP Code
    </label>
    <input class="cui__field__input" value="94027" />
</div>

Big

ZIP Code

<div class="cui__field big is-centered is-filled is-focused">
    <label class="cui__field__label">
        ZIP Code
    </label>
    <input class="cui__field__input" value="94027" />
</div>

Loading

ZIP Code

<div class="cui__field is-loading is-centered is-filled is-focused">
    <label class="cui__field__label">
        ZIP Code
    </label>
    <input class="cui__field__input" value="94027" />
</div>

Loading

ZIP Code

<div class="cui__field is-loading">
    <label class="cui__field__label">
        ZIP Code
    </label>
    <input class="cui__field__input" value="94027" />
</div>

Big

ZIP Code

<div class="cui__field big is-loading">
    <label class="cui__field__label">
        ZIP Code
    </label>
    <input class="cui__field__input" value="94027" />
</div>

Big centered

ZIP Code

<div class="cui__field big is-centered is-loading">
    <label class="cui__field__label">
      ZIP Code
    </label>
    <input class="cui__field__input" value="94027" />
</div>

Illustration

Illustration refers to any embedded SVG illustration. They can be found in the ui-illustrations repo, but the styling of them is done directly in CSS.

Big
Tiny
Button
- default
- gray
- inverse
Loader

Big

<svg
    class="cui__illustration big"
    viewBox="0 0 100 100">
  <g
        class="cui__illustration__fill"
        transform="translate(24.000000, 20.000000)">
    <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
    <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
  </g>
</svg>

<svg
    class="cui__illustration big gray"
    viewBox="0 0 100 100">
  <g
        class="cui__illustration__fill"
        transform="translate(24.000000, 20.000000)">
    <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
    <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
  </g>
</svg>

<svg
    class="cui__illustration big error"
    viewBox="0 0 100 100">
  <g
        class="cui__illustration__fill"
        transform="translate(24.000000, 20.000000)">
    <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
    <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
  </g>
</svg>

<svg
    class="cui__illustration big success"
    viewBox="0 0 100 100">
  <g
        class="cui__illustration__fill"
        transform="translate(24.000000, 20.000000)">
    <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
    <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
  </g>
</svg>

<svg
    class="cui__illustration big warning"
    viewBox="0 0 100 100">
  <g
        class="cui__illustration__fill"
        transform="translate(24.000000, 20.000000)">
    <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
    <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
  </g>
</svg>

<svg
    class="cui__illustration big black"
    viewBox="0 0 100 100">
  <g
        class="cui__illustration__fill"
        transform="translate(24.000000, 20.000000)">
    <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
    <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
  </g>
</svg>

<div class="cui__block blue">
    <svg
        class="cui__illustration big inverse"
        width="100px"
        height="100px"
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg">
      <g
            class="cui__illustration__fill"
            transform="translate(24.000000, 20.000000)">
        <path d="M37.8369,27.6611 L20.3199,45.3481 L13.2359,38.6241 C12.8359,38.2441 12.2039,38.2621 11.8219,38.6611 C11.4419,39.0611 11.4589,39.6941 11.8589,40.0751 L20.3629,48.1471 L39.2589,29.0691 C39.6479,28.6771 39.6439,28.0431 39.2519,27.6541 C38.8579,27.2661 38.2269,27.2691 37.8369,27.6611"></path>
        <path d="M50,53 C50,55.757 47.757,58 45,58 L7,58 C4.243,58 2,55.757 2,53 L2,15 C2,12.243 4.243,10 7,10 L13,10 L13,20 L39,20 L39,10 L45,10 C47.757,10 50,12.243 50,15 L50,53 Z M17,10 L18,10 L34,10 L35,10 L37,10 L37,18 L15,18 L15,10 L17,10 Z M26,2 C29.521,2 32.442,4.612 32.929,8 L19.071,8 C19.558,4.612 22.479,2 26,2 L26,2 Z M45,8 L39,8 L34.941,8 C34.442,3.507 30.625,0 26,0 C21.375,0 17.558,3.507 17.059,8 L13,8 L7,8 C3.141,8 0,11.141 0,15 L0,53 C0,56.859 3.141,60 7,60 L45,60 C48.859,60 52,56.859 52,53 L52,15 C52,11.141 48.859,8 45,8 L45,8 Z"></path>
      </g>
    </svg>
</div>

Tiny

<svg
  class='cui__illustration tiny'
  viewBox='0 0 21 21'>
  <path
    class='cui__illustration__stroke'
    d='M6.5,9.3l4,4l4,-4'
    strokeLinecap='round' />
</svg>

<svg
  class='cui__illustration tiny gray'
  viewBox='0 0 21 21'>
  <path
    class='cui__illustration__stroke'
    d='M6.5,9.3l4,4l4,-4'
    strokeLinecap='round' />
</svg>

<svg
  class='cui__illustration tiny error'
  viewBox='0 0 21 21'>
  <path
    class='cui__illustration__stroke'
    d='M6.5,9.3l4,4l4,-4'
    strokeLinecap='round' />
</svg>

<svg
  class='cui__illustration tiny success'
  viewBox='0 0 21 21'>
  <path
    class='cui__illustration__stroke'
    d='M6.5,9.3l4,4l4,-4'
    strokeLinecap='round' />
</svg>

<svg
  class='cui__illustration tiny warning'
  viewBox='0 0 21 21'>
  <path
    class='cui__illustration__stroke'
    d='M6.5,9.3l4,4l4,-4'
    strokeLinecap='round' />
</svg>

<svg
  class='cui__illustration tiny black'
  viewBox='0 0 21 21'>
  <path
    class='cui__illustration__stroke'
    d='M6.5,9.3l4,4l4,-4'
    strokeLinecap='round' />
</svg>

<div class='cui__block blue'>
  <svg
    class='cui__illustration tiny inverse'
    viewBox='0 0 21 21'>
    <path
      class='cui__illustration__stroke'
      d='M6.5,9.3l4,4l4,-4'
      strokeLinecap='round' />
  </svg>
</div>

Button

Default (blue)

<svg
    class="cui__illustration button"
    viewBox="0 0 20 20">
    <path class="cui__illustration__fill" d="M4.70710678,16.7071068 L16.7071068,4.70710678 C17.0976311,4.31658249 17.0976311,3.68341751 16.7071068,3.29289322 C16.3165825,2.90236893 15.6834175,2.90236893 15.2928932,3.29289322 L3.29289322,15.2928932 C2.90236893,15.6834175 2.90236893,16.3165825 3.29289322,16.7071068 C3.68341751,17.0976311 4.31658249,17.0976311 4.70710678,16.7071068 L4.70710678,16.7071068 Z" id="line"></path>
    <path class="cui__illustration__fill" d="M16.7071068,15.2928932 L4.70710678,3.29289322 C4.31658249,2.90236893 3.68341751,2.90236893 3.29289322,3.29289322 C2.90236893,3.68341751 2.90236893,4.31658249 3.29289322,4.70710678 L15.2928932,16.7071068 C15.6834175,17.0976311 16.3165825,17.0976311 16.7071068,16.7071068 C17.0976311,16.3165825 17.0976311,15.6834175 16.7071068,15.2928932 L16.7071068,15.2928932 Z" id="line"></path>
</svg>

Gray

<svg
    class="cui__illustration button gray"
    viewBox="0 0 20 20">
    <path class="cui__illustration__fill" d="M4.70710678,16.7071068 L16.7071068,4.70710678 C17.0976311,4.31658249 17.0976311,3.68341751 16.7071068,3.29289322 C16.3165825,2.90236893 15.6834175,2.90236893 15.2928932,3.29289322 L3.29289322,15.2928932 C2.90236893,15.6834175 2.90236893,16.3165825 3.29289322,16.7071068 C3.68341751,17.0976311 4.31658249,17.0976311 4.70710678,16.7071068 L4.70710678,16.7071068 Z" id="line"></path>
    <path class="cui__illustration__fill" d="M16.7071068,15.2928932 L4.70710678,3.29289322 C4.31658249,2.90236893 3.68341751,2.90236893 3.29289322,3.29289322 C2.90236893,3.68341751 2.90236893,4.31658249 3.29289322,4.70710678 L15.2928932,16.7071068 C15.6834175,17.0976311 16.3165825,17.0976311 16.7071068,16.7071068 C17.0976311,16.3165825 17.0976311,15.6834175 16.7071068,15.2928932 L16.7071068,15.2928932 Z" id="line"></path>
</svg>

Inverse

<div class="cui__block blue">
    <p class="cui__paragraph--primary" style="padding: 20px;">
    <svg
        class="cui__illustration button inverse"
        viewBox="0 0 20 20">
        <path class="cui__illustration__fill" d="M4.70710678,16.7071068 L16.7071068,4.70710678 C17.0976311,4.31658249 17.0976311,3.68341751 16.7071068,3.29289322 C16.3165825,2.90236893 15.6834175,2.90236893 15.2928932,3.29289322 L3.29289322,15.2928932 C2.90236893,15.6834175 2.90236893,16.3165825 3.29289322,16.7071068 C3.68341751,17.0976311 4.31658249,17.0976311 4.70710678,16.7071068 L4.70710678,16.7071068 Z" id="line"></path>
        <path class="cui__illustration__fill" d="M16.7071068,15.2928932 L4.70710678,3.29289322 C4.31658249,2.90236893 3.68341751,2.90236893 3.29289322,3.29289322 C2.90236893,3.68341751 2.90236893,4.31658249 3.29289322,4.70710678 L15.2928932,16.7071068 C15.6834175,17.0976311 16.3165825,17.0976311 16.7071068,16.7071068 C17.0976311,16.3165825 17.0976311,15.6834175 16.7071068,15.2928932 L16.7071068,15.2928932 Z" id="line"></path>
    </svg>
    </p>
</div>

Loader

Important note: if you have more than one loader, by mindful that the id of the linearGradient needs to be unique in whole HTML document, since the linearGradients with the same id inside different svg tags will override each other. In the following example, if the ids were the same, the loader will have the same color.

<svg
  width="20"
  height="20"
  class="cui__illustration__loader"
  viewBox="-1 -1 22 22">
  <defs>
    <linearGradient id="gradient-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="rgba(0,116,200, 0)"></stop>
      <stop offset="100%" stop-color="rgba(0,116,200, 0.2)"></stop>
    </linearGradient>
    <linearGradient
      id="gradient-1"
      gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="rgba(0,116,200, 0.2)"></stop>
      <stop offset="100%" stop-color="rgba(0,116,200, 0.4)"></stop>
    </linearGradient>
    <linearGradient id="gradient-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
      <stop offset="0%" stop-color="rgba(0,116,200, 0.4)"></stop>
      <stop offset="100%" stop-color="rgba(0,116,200, 0.6)"></stop>
    </linearGradient>
    <linearGradient id="gradient-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
      <stop offset="0%" stop-color="rgba(0,116,200, 0.6)"></stop>
      <stop offset="100%" stop-color="rgba(0,116,200, 0.8)"></stop></linearGradient>
    <linearGradient id="gradient-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
      <stop offset="0%" stop-color="rgba(0,116,200, 0.8)"></stop>
      <stop offset="100%" stop-color="rgba(0,116,200, 1)"></stop>
    </linearGradient>
    <linearGradient id="gradient-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="rgba(0,116,200, 1)"></stop>
      <stop offset="100%" stop-color="rgba(0,116,200, 1.2)"></stop>
    </linearGradient>
  </defs>

  <g fill="none" stroke-width="2" transform="translate(10,10)">
    <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-0)"></path>
    <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-1)"></path>
    <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-2)"></path>
    <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-3)"></path>
    <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-4)"></path>
    <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-5)" stroke-linecap="round"></path>
  </g>
</svg>

<div class="cui__block blue">
  <svg
    width="20"
    height="20"
    class="cui__illustration__loader"
    viewBox="-1 -1 22 22">
    <defs>
      <linearGradient id="gradient-white-0" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 0)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.2)"></stop>
      </linearGradient>
      <linearGradient
        id="gradient-white-1"
        gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.2)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.4)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-2" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.4)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.6)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-3" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.6)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 0.8)"></stop></linearGradient>
      <linearGradient id="gradient-white-4" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
        <stop offset="0%" stop-color="rgba(255,255,255, 0.8)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 1)"></stop>
      </linearGradient>
      <linearGradient id="gradient-white-5" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255, 1)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255, 1.2)"></stop>
      </linearGradient>
    </defs>

    <g fill="none" stroke-width="2" transform="translate(10,10)">
      <path d="M 8.66,-5 A 10,10 0 0,1 8.66,5" stroke="url(#gradient-white-0)"></path>
      <path d="M 8.66,5 A 10,10 0 0,1 0,10" stroke="url(#gradient-white-1)"></path>
      <path d="M 0,10 A 10,10 0 0,1 -8.66,5" stroke="url(#gradient-white-2)"></path>
      <path d="M -8.66,5 A 10,10 0 0,1 -8.66,-5" stroke="url(#gradient-white-3)"></path>
      <path d="M -8.66,-5 A 10,10 0 0,1 0,-10" stroke="url(#gradient-white-4)"></path>
      <path d="M 0,-10 A 10,10 0 0,1 8.66,-5" stroke="url(#gradient-white-5)" stroke-linecap="round"></path>
    </g>
  </svg>
</div>

Input

The input is a molecular element. It consists of a wrapper with the cui__input block, which should be added to a div tag, containing a cui__input__label added to a label tag and cui__input__input added to an input tag.

The trade-off is that we can't rely on focus and active pseudo-selectors for the input, so we need to programatically add classes to the wrapper.

Floating label

When inputs are blank, their labels will behave as placeholders. When the input is being filled, the label should move to the top.

Stackable

When inputs are stacked together, they should be wrapped in a cui__fieldset component, which provides the proper spacings before and after and solves the issues related to floats. cui__inputs can be stacked together with cui__dropdown--native.

Examples
Regular
- focused
- filled
- error
- error focused
- warning
- warning focused
- disabled
Big
- focused
- filled
- error
- error focused
- warning
- warning focused
- disabled
Giant
- focused
- filled
- error
- error focused
- warning
- warning focused
- disabled
Stacked
Icon
- stroke style
- big
- focused
- filled
- error
- warning
Centered
- filled
- error
- icon
- big
- loading
Loading
- big
- big centered

Examples

Checkout form

Regular

Please write your email address

<div class="cui__input">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" />
</div>

Focused

Please write your email address

<div class="cui__input is-focused">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" />
</div>

Filling

Please write your email address

<div class="cui__input is-filled is-focused">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Filled

Please write your email address

<div class="cui__input is-filled">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Error

Should be used when there's a problem with the filled value that blocks the user to continue.

Invalid email

<div class="cui__input is-error">
    <label class="cui__input__label">
        Invalid email
    </label>
    <input class="cui__input__input" value="invalid@" />
</div>

Error focused

Invalid email

<div class="cui__input is-error is-focused">
    <label class="cui__input__label">
        Invalid email
    </label>
    <input class="cui__input__input" value="invalid@" />
</div>

Warning

Should be used when there's something that requires user's attention to the filled value, but doesn't block her to continue.

Are you sure the domain is exanple?

<div class="cui__input is-warning">
    <label class="cui__input__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__input__input" value="email@exanple.com" />
</div>

Warning focused

Are you sure the domain is exanple?

<div class="cui__input is-warning is-focused">
    <label class="cui__input__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__input__input" value="email@exanple.com" />
</div>

Disabled

Should be used when it's important to show the field to the user but she should not be able to edit it.

Enter your email address

<div class="cui__input is-disabled left half">
    <label class="cui__input__label">
        Enter your email address
    </label>
    <input disabled class="cui__input__input" value="email@exanple.com" />
</div>

<div class="cui__input is-disabled right half">
    <label class="cui__input__label">
        Enter your email address
    </label>
    <input disabled class="cui__input__input" />
</div>

Big

Please write your email address

<div class="cui__input big">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" />
</div>

Focused

Please write your email address

<div class="cui__input big is-focused">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" />
</div>

Filling

Please write your email address

<div class="cui__input big is-filled is-focused">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Filled

Please write your email address

<div class="cui__input big is-filled">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Error

Should be used when there's a problem with the filled value that blocks the user to continue.

Invalid email

<div class="cui__input big is-error">
    <label class="cui__input__label">
        Invalid email
    </label>
    <input class="cui__input__input" value="invalid@" />
</div>

Error focused

Invalid email

<div class="cui__input big is-error is-focused">
    <label class="cui__input__label">
        Invalid email
    </label>
    <input class="cui__input__input" value="invalid@" />
</div>

Warning

Should be used when there's something that requires user's attention to the filled value, but doesn't block her to continue.

Are you sure the domain is exanple?

<div class="cui__input big is-warning">
    <label class="cui__input__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__input__input" value="email@exanple.com" />
</div>

Warning focused

Are you sure the domain is exanple?

<div class="cui__input big is-warning is-focused">
    <label class="cui__input__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__input__input" value="email@exanple.com" />
</div>

Disabled

Should be used when it's important to show the field to the user but she should not be able to edit it.

Enter your email address

<div class="cui__input big is-disabled left half">
    <label class="cui__input__label">
        Enter your email address
    </label>
    <input disabled class="cui__input__input" value="email@exanple.com" />
</div>

<div class="cui__input big is-disabled right half">
    <label class="cui__input__label">
        Enter your email address
    </label>
    <input disabled class="cui__input__input" />
</div>

Giant

Please write your email address

<div class="cui__input giant">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" />
</div>

Focused

Please write your email address

<div class="cui__input giant is-focused">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" />
</div>

Filling

Please write your email address

<div class="cui__input giant is-filled is-focused">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Filled

Please write your email address

<div class="cui__input giant is-filled">
    <label class="cui__input__label">
        Please write your email address
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Error

Should be used when there's a problem with the filled value that blocks the user to continue.

Invalid email

<div class="cui__input giant is-error">
    <label class="cui__input__label">
        Invalid email
    </label>
    <input class="cui__input__input" value="invalid@" />
</div>

Error focused

Invalid email

<div class="cui__input giant is-error is-focused">
    <label class="cui__input__label">
        Invalid email
    </label>
    <input class="cui__input__input" value="invalid@" />
</div>

Warning

Should be used when there's something that requires user's attention to the filled value, but doesn't block her to continue.

Are you sure the domain is exanple?

<div class="cui__input giant is-warning">
    <label class="cui__input__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__input__input" value="email@exanple.com" />
</div>

Warning focused

Are you sure the domain is exanple?

<div class="cui__input giant is-warning is-focused">
    <label class="cui__input__label is-focused">
        Are you sure the domain is exanple?
    </label>
    <input class="cui__input__input" value="email@exanple.com" />
</div>

Disabled

Should be used when it's important to show the field to the user but she should not be able to edit it.

Enter your email address

<div class="cui__input giant is-disabled left half">
    <label class="cui__input__label">
        Enter your email address
    </label>
    <input disabled class="cui__input__input" value="email@exanple.com" />
</div>

<div class="cui__input giant is-disabled right half">
    <label class="cui__input__label">
        Enter your email address
    </label>
    <input disabled class="cui__input__input" />
</div>

Stacked fields

Fields can be stacked together to form a single organic visual component.

By default, side by side fields will be responsive, meaning that they will turn full width on thin screens. You can check this out by resizing the browser or using Chrome inspector's mobile mode.

Name

Lastname

Address line 1

Address line 2

City

State

Zip

Phone number

Email

Side by side

Name

Lastname

<div class="cui__fieldset">
    <div class="cui__input left half">
        <label class="cui__input__label">
            Name
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input right half">
        <label class="cui__input__label">
            Lastname
        </label>
        <input class="cui__input__input" />
    </div>
</div>

Half and Quarter sizes

City

Zip

Country

<div class="cui__fieldset">
    <div class="cui__input left half">
        <label class="cui__input__label">
            City
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input center quarter">
        <label class="cui__input__label">
            Zip
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input right quarter">
        <label class="cui__input__label">
            Country
        </label>
        <input class="cui__input__input" />
    </div>
</div>

Three quarters

City

Zip

<div class="cui__fieldset">
    <div class="cui__input left quarter">
        <label class="cui__input__label">
            City
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input right three-quarters">
        <label class="cui__input__label">
            Zip
        </label>
        <input class="cui__input__input" />
    </div>
</div>

Twenty - Forty

Title

Name

Lastname

<div class="cui__fieldset">
    <div class="cui__input left twenty">
        <label class="cui__input__label">
            Title
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input center forty">
        <label class="cui__input__label">
            Name
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input right forty">
        <label class="cui__input__label">
            Lastname
        </label>
        <input class="cui__input__input" />
    </div>
</div>

Twenty - Eighty

Title

Name

<div class="cui__fieldset">
    <div class="cui__input left twenty">
        <label class="cui__input__label">
            Title
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input right eighty">
        <label class="cui__input__label">
            Name
        </label>
        <input class="cui__input__input" />
    </div>
</div>

One third - Two thirds

Title

Name

<div class="cui__fieldset">
    <div class="cui__input left third">
        <label class="cui__input__label">
            Title
        </label>
        <input class="cui__input__input" />
    </div>
    <div class="cui__input right two-thirds">
        <label class="cui__input__label">
            Name
        </label>
        <input class="cui__input__input" />
    </div>
</div>

With Icon

Enter your postal code

<div class="cui__input--icon">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label">
        Enter your postal code
    </label>
    <input class="cui__input--icon__input" />
</div>

Icon with stroke style

Enter your postal code

<div class="cui__input--icon">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
    <g transform="translate(2, 2)" class="cui__input--icon__icon__stroke">
      <circle cx="8" cy="8" r="7.5"></circle>
      <path d="M6.5,11 L4.5,9" stroke-linecap="round"></path>
      <path d="M11.5,11 L6.5,6" stroke-linecap="round" transform="translate(9, 8.500000) scale(1, -1) translate(-9, -8.500000) "></path>
    </g>
    </svg>

    <label class="cui__input--icon__label">
        Enter your postal code
    </label>
    <input class="cui__input--icon__input" />
</div>

Big

Enter your password

<div class="cui__input--icon big">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label">
        Enter your password
    </label>
    <input class="cui__input--icon__input" />
</div>

Focused

Enter your password

<div class="cui__input--icon is-focused">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label is-focused">
        Enter your password
    </label>
    <input class="cui__input--icon__input" />
</div>

Filling

Please write your email address

<div class="cui__input--icon is-filled is-focused">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label">
        Please write your email address
    </label>
    <input class="cui__input--icon__input" value="email@example.com" />
</div>

Error

Are you sure the domain is example?

<div class="cui__input--icon is-error">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label is-focused">
        Are you sure the domain is example?
    </label>
    <input class="cui__input--icon__input" value="email@exanple.com" />
</div>

Warning

Are you sure the domain is example?

<div class="cui__input--icon is-warning">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label is-focused">
        Are you sure the domain is example?
    </label>
    <input class="cui__input--icon__input" value="email@exanple.com" />
</div>

Disabled

Are you sure the domain is example?

<div class="cui__input--icon is-disabled">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input--icon__label">
        Are you sure the domain is example?
    </label>
    <input disabled class="cui__input--icon__input" value="email@exanple.com" />
</div>

Centered

This is aligned to the center

<div class="cui__input is-centered">
    <label class="cui__input__label">
        This is aligned to the center
    </label>
    <input class="cui__input__input" />
</div>

Filled

This centered field is filled

<div class="cui__input is-centered is-filled">
    <label class="cui__input__label">
        This centered field is filled
    </label>
    <input class="cui__input__input" value="email@example.com" />
</div>

Error

Something went wrong!

<div class="cui__input is-centered is-error">
    <label class="cui__input__label">
      Something went wrong!
    </label>
    <input class="cui__input__input" value="invalid input" />
</div>

Icon

ZIP Code

<div class="cui__input--icon is-centered is-filled is-focused">
    <svg class="cui__input--icon__icon" viewBox="0 0 20 20" focusable="false">
        <g class="cui__input--icon__icon__fill" transform="translate(2, 4)">
            <path d="M13,11 L3,11 C1.897,11 1,10.103 1,9 L1,4 L15,4 L15,9 C15,10.103 14.103,11 13,11 M3,1 L13,1 C14.103,1 15,1.897 15,3 L1,3 C1,1.897 1.897,1 3,1 M13,0 L3,0 C1.35,0 0,1.35 0,3 L0,9 C0,10.65 1.35,12 3,12 L13,12 C14.65,12 16,10.65 16,9 L16,3 C16,1.35 14.65,0 13,0"></path>
            <path d="M8.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 C3,8.776 3.224,9 3.5,9 L8.5,9 C8.776,9 9,8.776 9,8.5 C9,8.224 8.776,8 8.5,8"></path>
        </g>
    </svg>

    <label class="cui__input__label">
        ZIP Code
    </label>
    <input class="cui__input__input" value="94027" />
</div>

Big

ZIP Code

<div class="cui__input big is-centered is-filled is-focused">
    <label class="cui__input__label">
        ZIP Code
    </label>
    <input class="cui__input__input" value="94027" />
</div>

Loading

ZIP Code

<div class="cui__input is-loading is-centered is-filled is-focused">
    <label class="cui__input__label">
      ZIP Code
    </label>
    <input class="cui__input__input" value="94027" />
</div>

Loading

ZIP Code

<div class="cui__input is-loading">
    <label class="cui__input__label">
        ZIP Code
    </label>
    <input class="cui__input__input" value="94027" />
</div>

Big

ZIP Code

<div class="cui__input big is-loading">
    <label class="cui__input__label">
        ZIP Code
    </label>
    <input class="cui__input__input" value="94027" />
</div>

Big centered

ZIP Code

<div class="cui__input big is-centered is-loading">
    <label class="cui__input__label">
        ZIP Code
    </label>
    <input class="cui__input__input" value="94027" />
</div>

Label

Lorem Ipsum is simply dummy text typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. More information

Information Warning Notice Success Brown Purple Light Blue Ultramarine Yellow Grey Black

Information Information

<p class="cui__paragraph--primary">
  Lorem Ipsum is simply dummy text typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  <span class="cui__label">More information</span>
</p>

<p class="cui__paragraph--primary">
  <span class="cui__label information">Information</span>
  <span class="cui__label warning">Warning</span>
  <span class="cui__label notice">Notice</span>
  <span class="cui__label success">Success</span>
  <span class="cui__label brown">Brown</span>
  <span class="cui__label purple">Purple</span>
  <span class="cui__label light-blue">Light Blue</span>
  <span class="cui__label ultramarine">Ultramarine</span>
  <span class="cui__label yellow">Yellow</span>
  <span class="cui__label grey">Grey</span>
  <span class="cui__label black">Black</span>
</p>

<p class="cui__paragraph--primary">
  <span class="cui__label outline information">Information</span>
  <span class="cui__label outline warning">Warning</span>
  <span class="cui__label outline notice">Notice</span>
  <span class="cui__label outline success">Success</span>
  <span class="cui__label outline brown">Brown</span>
  <span class="cui__label outline purple">Purple</span>
  <span class="cui__label outline light-blue">Light Blue</span>
  <span class="cui__label outline ultramarine">Ultramarine</span>
  <span class="cui__label outline yellow">Yellow</span>
  <span class="cui__label outline grey">Grey</span>
  <span class="cui__label outline black">Black</span>
</p>

<div class="cui__block blue">
  <p class="cui__paragraph--primary white">
    <span class="cui__label inverted">Information</span>
    <span class="cui__label outline inverted">Information</span>
  </p>
</div>

Loader

Standalone loaders are designed to be used on overlays when the application is loading. They fit the grid in either 2, 3, 4 or 6 blocks.

They are not designed to be used within other components. For a loader inside a button for example, check out the examples for Button with loader.

Regular
Big
Small
Tiny

Regular

<div class="cui__loader"></div>
<div class="cui__loader blue"></div>
<div class="cui__loader white"></div>

Big

<div class="cui__loader big"></div>
<div class="cui__loader big blue"></div>
<div class="cui__loader big white"></div>

Small

<div class="cui__loader small"></div>
<div class="cui__loader small blue"></div>
<div class="cui__loader small white"></div>

Tiny

<div class="cui__loader tiny"></div>
<div class="cui__loader tiny blue"></div>
<div class="cui__loader tiny white"></div>

Navigation

Examples
Segmented control
- fixed percentage
- respect content width
Tab menu
Context menu

Examples

Dashboard

Segmented control

The segmented control is basically just a different representation of a group of radio buttons and can be used in that way.

fixed percentage

One Two Three

<div class="cui__segmentedcontrol">
   <input class="cui__segmentedcontrol__input" type="radio" name="test" id="test1" checked="checked" />
   <label class="cui__segmentedcontrol__button left third" for="test1">One</label>

   <input class="cui__segmentedcontrol__input" type="radio" name="test" id="test2" />
   <label class="cui__segmentedcontrol__button center third" for="test2">Two</label>

   <input class="cui__segmentedcontrol__input" type="radio" name="test" id="test3" />
   <label class="cui__segmentedcontrol__button right third" for="test3">Three</label>
</div>

respect content width

One A very very long title Three

<div class="cui__segmentedcontrol">
   <input class="cui__segmentedcontrol__input" type="radio" name="fluid" id="fluid1" checked="checked" />
   <label class="cui__segmentedcontrol__button left" for="fluid1">One</label>

   <input class="cui__segmentedcontrol__input" type="radio" name="fluid" id="fluid2" />
   <label class="cui__segmentedcontrol__button center" for="fluid2">A very very long title</label>

   <input class="cui__segmentedcontrol__input" type="radio" name="fluid" id="fluid3" />
   <label class="cui__segmentedcontrol__button right" for="fluid3">Three</label>
</div>

Tab menu

The tab menu is a different styling of the same navigation concept as the segmented control.

fixed percentage

<div class="cui__tab-menu is-selectable">
   <input class="cui__tab-menu__input" type="radio" name="tab-menu" id="tab-menu1" checked="checked" />
   <label class="cui__tab-menu__button third" for="tab-menu1">One</label>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu" id="tab-menu2" />
   <label class="cui__tab-menu__button third" for="tab-menu2">Two</label>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu" id="tab-menu3" />
   <label class="cui__tab-menu__button third" for="tab-menu3">Three</label>
</div>

respect content width

<div class="cui__tab-menu fluid is-selectable">
   <input class="cui__tab-menu__input" type="radio" name="tab-menu-fluid" id="tab-menu-fluid1" checked="checked" />
   <label class="cui__tab-menu__button" for="tab-menu-fluid1">One</label>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu-fluid" id="tab-menu-fluid2" />
   <label class="cui__tab-menu__button" for="tab-menu-fluid2">A very very long title</label>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu-fluid" id="tab-menu-fluid3" />
   <label class="cui__tab-menu__button" for="tab-menu-fluid3">Three</label>
</div>

inverted

<div style="background: #0074c8; padding: 20px;">
    <div class="cui__tab-menu white is-selectable">
       <input class="cui__tab-menu__input" type="radio" name="tab-menu-inverted" id="tab-menu-inverted1" checked="checked" />
       <label class="cui__tab-menu__button third" for="tab-menu-inverted1">One</label>

       <input class="cui__tab-menu__input" type="radio" name="tab-menu-inverted" id="tab-menu-inverted2" />
       <label class="cui__tab-menu__button third" for="tab-menu-inverted2">Two</label>

       <input class="cui__tab-menu__input" type="radio" name="tab-menu-inverted" id="tab-menu-inverted3" />
       <label class="cui__tab-menu__button third" for="tab-menu-inverted3">Three</label>
    </div>
</div>

non selectable

Non selectable tab menus are supposed to be used when you want to animate the selected bar using JS. You have to define widths, transition and position of the cui__tab-menu__selected yourself.

<div class="cui__tab-menu">
   <div class="cui__tab-menu__selected"></div>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu" id="tab-menu1" checked="checked" />
   <label class="cui__tab-menu__button third" for="tab-menu1">One</label>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu" id="tab-menu2" />
   <label class="cui__tab-menu__button third" for="tab-menu2">Two</label>

   <input class="cui__tab-menu__input" type="radio" name="tab-menu" id="tab-menu3" />
   <label class="cui__tab-menu__button third" for="tab-menu3">Three</label>
</div>

<div style="background: #0074c8; padding: 20px;">

  <div class="cui__tab-menu white">
     <div class="cui__tab-menu__selected"></div>

     <input class="cui__tab-menu__input" type="radio" name="tab-menu-inverted-non-selectable" id="tab-menu-inverted-non-selectable1" checked="checked" />
     <label class="cui__tab-menu__button third" for="tab-menu-inverted-non-selectable1">One</label>

     <input class="cui__tab-menu__input" type="radio" name="tab-menu-inverted-non-selectable" id="tab-menu-inverted-non-selectable2" />
     <label class="cui__tab-menu__button third" for="tab-menu-inverted-non-selectable2">Two</label>

     <input class="cui__tab-menu__input" type="radio" name="tab-menu-inverted-non-selectable" id="tab-menu-inverted-non-selectable3" />
     <label class="cui__tab-menu__button third" for="tab-menu-inverted-non-selectable3">Three</label>
  </div>
</div>

Context menu

The context menu is to be used with direct interaction (aka links), usually as a user menu with things like preferences, logout and the like. It's mainly a desktop component.

<ol class="cui__context-menu">
   <li>
      <a href="#" class="cui__context-menu__item">
        1 - Link
      </a>
   </li>
   <li>
      <a href="#" class="cui__context-menu__item">
        2 - Link
      </a>
   </li>
   <li class="cui__context-menu__item">
      <form>
        3 - Form
      </form>
   </li>   
   <li class="cui__context-menu__separator"></li>
   <li>
      <a href="#" class="cui__context-menu__item">
        <div class="cui__context-menu__icon" style="outline: 1px dashed #ccc">
        </div>
        4 - Link
      </a>
   </li>
</ol>

Preview

Preview is a text component for previewing the already-filled content of a fieldset block.

Examples
Default
- with link
- dynamic styling

Examples

Checkout

Default

Billing Address

John Smith

1425 North Avenue Street
San Francisco
94100 California
United States

<h3 class="cui__subtitle condensed">
  Billing Address
</h3>

<div class="cui__preview">
  <h2 class="cui__preview__title">John Smith</h2>
  <p class="cui__preview__content">
    1425 North Avenue Street<br />
    San Francisco<br />
    94100 California<br />
    United States
  </p>
</div>

with link

Billing Address

John Smith

1425 North Avenue Street
San Francisco
94100 California
United States

<h3 class="cui__subtitle condensed">
  Billing Address
</h3>

<div class="cui__preview has-link">
  <h2 class="cui__preview__title">John Smith</h2>
  <p class="cui__preview__content">
    1425 North Avenue Street<br />
    San Francisco<br />
    94100 California<br />
    United States
  </p>
  <div class="cui__preview__footer">
    <a class="cui__preview__footer__link">Change address</a>
  </div>
</div>

Dynamic styling

Billing Address

John Smith

1425 North Avenue Street
San Francisco
94100 California
United States

<h3 class="cui__subtitle condensed">
  Billing Address
</h3>

<div class="cui__preview has-link dynamic-styling">
  <div class="cui__preview__border"></div>
  <div class="cui__preview__border--selected" style="border-color: #3500C8;"></div>

  <h2 class="cui__preview__title">John Smith</h2>
  <p class="cui__preview__content">
    1425 North Avenue Street<br />
    San Francisco<br />
    94100 California<br />
    United States
  </p>
  <div class="cui__preview__footer">
    <a class="cui__preview__footer__link dynamic-styling" style="color: #3500C8;">Change address</a>
  </div>
</div>

Selector

Selectors are lists of items optimized to be compatible with a mobile experience.

Direct
- simple
- description
- title
Installments

Direct

Simple

Item 1

Item 2

Item 3

Current value

<div class="cui__selector--direct">
  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Item 1
    </div>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>

  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Item 2
    </div>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>

  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Item 3
    </div>

    <div class="cui__selector--direct__value">
      Current value
    </div>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>
</div>

Description

Invoice

Klarna will send you an email with payment instructions.

One tap and you're done

Credit or debit card

You'll have to enter your card details

<div class="cui__selector--direct">
  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Invoice
    </div>

    <p class="cui__selector--direct__description">
      Klarna will send you an email with payment instructions.
    </p>

    <p class="cui__selector--direct__description">
      <span class="cui__promo-label">One tap and you're done</span>
    </p>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>

  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Credit or debit card
    </div>

    <p class="cui__selector--direct__description">
      You'll have to enter your card details
    </p>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>
</div>

Title

Description

Item 1

Item 2

Item 3

Current value

<div class="cui__selector--direct title">
  <h2 class="cui__selector--direct__title">
    Description
  </h2>

  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Item 1
    </div>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>

  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Item 2
    </div>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>

  <div class="cui__selector--direct__item">
    <div class="cui__selector--direct__label">
      Item 3
    </div>

    <div class="cui__selector--direct__value">
      Current value
    </div>

    <svg
      class="cui__selector--direct__icon"
      viewBox="0 0 20 20"
      stroke="#3c3c3e"
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-width="1">
      <path d="M8,6 l4,4 l-4,4"/>
    </svg>
  </div>
</div>

Installments

$64.17/mo. for 6 months $32.09/mo. for 12 months $16.05/mo. for 24 months

<div class="cui__selector--installments">
   <input class="cui__selector--installments__input" type="radio" name="installments" id="installments1" />
   <label class="cui__selector--installments__label third" for="installments1">
     <span class="cui__selector--installments__label__value">$64.17/mo.</span>
     <span class="cui__selector--installments__label__connector">for</span>
     <span class="cui__selector--installments__label__info">6 months</span>
     <span class="cui__selector--installments__label__highlight"></span>
   </label>

   <input class="cui__selector--installments__input" type="radio" name="installments" id="installments2" />
   <label class="cui__selector--installments__label third" for="installments2">
     <span class="cui__selector--installments__label__value">$32.09/mo.</span>
     <span class="cui__selector--installments__label__connector">for</span>
     <span class="cui__selector--installments__label__info">12 months</span>
     <span class="cui__selector--installments__label__highlight"></span>
   </label>

   <input class="cui__selector--installments__input" type="radio" name="installments" id="installments3" />
   <label class="cui__selector--installments__label third" for="installments3">
     <span class="cui__selector--installments__label__value">$16.05/mo.</span>
     <span class="cui__selector--installments__label__connector">for</span>
     <span class="cui__selector--installments__label__info">24 months</span>
     <span class="cui__selector--installments__label__highlight"></span>
   </label>
</div>

Switch

The Switch component are a set of checkbox-type components, both in list and standalone. In mobile the look and feel of the component is always the slider style switch, while in desktop there is the option of being either the same style as mobile or a more traditional checkbox mark.

Examples
Single
- right
- pressed
- checked
- error
- checked and pressed
- checkbox
  - legal
- disabled
- dynamic styling
Multiple

Examples

Selectors

Single

This is a toggle switch

<div class="cui__switch">
  This is a toggle switch
</div>

Right

This is a toggle switch on the right side

<div class="cui__switch right">
  This is a toggle switch on the right side
</div>

Checked

This is a toggle switch checked

<div class="cui__switch is-checked">
  This is a toggle switch checked
</div>

Error

This is a toggle switch in an error state

<div class="cui__switch is-error">
  This is a toggle switch in an error state
</div>

Pressed

This is a toggle switch checked

<div class="cui__switch is-pressed">
  This is a toggle switch checked
</div>

Checked and pressed

This is a toggle switch checked

<div class="cui__switch is-pressed is-checked">
  This is a toggle switch checked
</div>

Checkbox

This is a toggle switch with checkbox styles on desktop

<div class="cui__switch checkbox">
  This is a toggle switch with checkbox styles on desktop
</div>

Legal

This is checkbox that signals approving legally required text that is too long to be rendered with a regular size and needs to be slightly smaller to fit.

<div class="cui__switch checkbox legal">
  This is checkbox that signals approving legally required text that is too long to be rendered with a regular size and needs to be slightly smaller to fit.
</div>

Checkbox disabled

This is a disabled toggle switch with checkbox styles on desktop

<div class="cui__switch checkbox is-disabled">
  This is a disabled toggle switch with checkbox styles on desktop
</div>

Disabled

This is a toggle switch disabled

<div class="cui__switch is-disabled">
  This is a toggle switch disabled
</div>

Dynamic styling

This is a toggle switch with custom styles

This is a checkbox switch with custom styles

<div class="cui__switch dynamic-styling">
  <div
    class="cui__switch__bullet"
    style="background-color: #3500C8; border-color: #3500C8;"></div>
  <div
    class="cui__switch__bullet__checkmark"
    style="background-color: #F9FF3C;"></div>
  This is a toggle switch with custom styles
</div>

<div class="cui__switch is-checked dynamic-styling">
  <div
    class="cui__switch__bullet"
    style="background-color: #3500C8; border-color: #3500C8;"></div>
  <div
    class="cui__switch__bullet__checkmark"
    style="background-color: #F9FF3C;"></div>
  This is a toggle switch with custom styles
</div>

<div class="cui__switch checkbox dynamic-styling">
  <div
    class="cui__switch__bullet"
    style="background-color: #3500C8; border-color: #3500C8;"></div>
  <div
    class="cui__switch__bullet__checkmark">
    <svg
      width="14px"
      height="14px"
      viewBox="0 0 14 14"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg">
        <g fill="none" fill-rule="evenodd">
            <g transform="translate(0, -1508)">
              <g transform="translate(0, 1457)">
                <g transform="translate(0, 33)">
                  <g transform="translate(0, 14)">
                    <g transform="translate(0, 4)"><g>
                      <rect x="0" y="0" width="14" height="14" rx="2"></rect>
                      <path d="M3.8,6.67583361 L6.40484483,9.5982824 L10.7279517,4.2"
                      stroke="#F9FF3C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
  </div>
  This is a checkbox switch with custom styles
</div>

<div class="cui__switch checkbox is-checked dynamic-styling">
  <div
    class="cui__switch__bullet"
    style="background-color: #3500C8; border-color: #3500C8;"></div>
  <div
    class="cui__switch__bullet__checkmark">
    <svg
      width="14px"
      height="14px"
      viewBox="0 0 14 14"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg">
        <g fill="none" fill-rule="evenodd">
            <g transform="translate(0, -1508)">
              <g transform="translate(0, 1457)">
                <g transform="translate(0, 33)">
                  <g transform="translate(0, 14)">
                    <g transform="translate(0, 4)"><g>
                      <rect x="0" y="0" width="14" height="14" rx="2"></rect>
                      <path d="M3.8,6.67583361 L6.40484483,9.5982824 L10.7279517,4.2"
                      stroke="#F9FF3C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
  </div>
  This is a checkbox switch with custom styles
</div>

Multiple

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Checkbox

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple checkbox">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Borderless

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple borderless">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Checkbox borderless

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple borderless checkbox">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Disabled

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple is-disabled">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Disabled checkbox

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple checkbox is-disabled">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Disabled borderless checkbox

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple checkbox borderless is-disabled">
  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div class="cui__promo-label">promo</div>
    </div>
  </div>

  <div class="cui__switch--multiple__option is-checked">
    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option">
    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Dynamic styling

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

This is a multiple choice

This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

promo

Second item

Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.

Third item

Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.

<div class="cui__switch--multiple">
  <div class="cui__switch--multiple__option is-checked dynamic-styling">
    <div
      class="cui__switch__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__switch__bullet__checkmark"
      style="background-color: #F9FF3C;"></div>

    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div
        class="cui__promo-label"
        style="background-color: #3500C8; color: #F9FF3C;">
        promo
      </div>
    </div>
  </div>

  <div class="cui__switch--multiple__option dynamic-styling">
    <div
      class="cui__switch__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__switch__bullet__checkmark"
      style="background-color: #F9FF3C;"></div>

    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option dynamic-styling">
    <div
      class="cui__switch__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__switch__bullet__checkmark"
      style="background-color: #F9FF3C;"></div>

    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

<div class="cui__switch--multiple checkbox">
  <div class="cui__switch--multiple__option is-checked dynamic-styling">
    <div
      class="cui__switch__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__switch__bullet__checkmark">
      <svg
        width="14px"
        height="14px"
        viewBox="0 0 14 14"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
              <g transform="translate(0, -1508)">
                <g transform="translate(0, 1457)">
                  <g transform="translate(0, 33)">
                    <g transform="translate(0, 14)">
                      <g transform="translate(0, 4)"><g>
                        <rect x="0" y="0" width="14" height="14" rx="2"></rect>
                        <path d="M3.8,6.67583361 L6.40484483,9.5982824 L10.7279517,4.2"
                        stroke="#F9FF3C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>
    </div>

    <div class="cui__switch--multiple__option__heading">
      This is a multiple choice
    </div>

    <div class="cui__switch--multiple__option__description">
      This is a description Sed tristique ex lectus, bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
      <div
        class="cui__promo-label"
        style="background-color: #3500C8; color: #F9FF3C;">
        promo
      </div>
    </div>
  </div>

  <div class="cui__switch--multiple__option dynamic-styling">
    <div
      class="cui__switch__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__switch__bullet__checkmark">
      <svg
        width="14px"
        height="14px"
        viewBox="0 0 14 14"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
              <g transform="translate(0, -1508)">
                <g transform="translate(0, 1457)">
                  <g transform="translate(0, 33)">
                    <g transform="translate(0, 14)">
                      <g transform="translate(0, 4)"><g>
                        <rect x="0" y="0" width="14" height="14" rx="2"></rect>
                        <path d="M3.8,6.67583361 L6.40484483,9.5982824 L10.7279517,4.2"
                        stroke="#F9FF3C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>
    </div>

    <div class="cui__switch--multiple__option__heading">
      Second item
    </div>

    <div class="cui__switch--multiple__option__description">
      Bibendum aliquet orci facilisis nec. Lorem ipsum sit amet mercuri.
    </div>
  </div>

  <div class="cui__switch--multiple__option dynamic-styling">
    <div
      class="cui__switch__bullet"
      style="background-color: #3500C8; border-color: #3500C8;"></div>
    <div
      class="cui__switch__bullet__checkmark">
      <svg
        width="14px"
        height="14px"
        viewBox="0 0 14 14"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
              <g transform="translate(0, -1508)">
                <g transform="translate(0, 1457)">
                  <g transform="translate(0, 33)">
                    <g transform="translate(0, 14)">
                      <g transform="translate(0, 4)"><g>
                        <rect x="0" y="0" width="14" height="14" rx="2"></rect>
                        <path d="M3.8,6.67583361 L6.40484483,9.5982824 L10.7279517,4.2"
                        stroke="#F9FF3C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>
    </div>

    <div class="cui__switch--multiple__option__heading">
      Third item
    </div>

    <div class="cui__switch--multiple__option__description">
      Facilisis nec. Lorem ipsum sit amet mercuri. Tristique ex lectus, bibendum aliquet orci facilisis nec.
    </div>
  </div>
</div>

Text

These are the general text styles for the toolkit.

Example
Title
Paragraph
Promo Label
Link
- dynamic styling
Text label
- default margins
Amount text

Example

Title

Primary

Primary title

Primary title in blue

Primary title in white

<h1 class="cui__title--primary">
  Primary title
</h1>

<h1 class="cui__title--primary blue">
  Primary title in blue
</h1>

<div class="cui__block blue">
  <h1 class="cui__title--primary white">
    Primary title in white
  </h1>
</div>

Small

Small primary title to fit in several lines so that there it doesn't look as visually cluttered if the title is too long

Small primary title to fit in several lines so that there it doesn't look as visually cluttered if the title is too long in blue

Small primary title to fit in several lines so that there it doesn't look as visually cluttered if the title is too long in white

<h1 class="cui__title--primary small">
  Small primary title to fit in several lines so that there it doesn't look as visually cluttered if the title is too long
</h1>

<h1 class="cui__title--primary small blue">
  Small primary title to fit in several lines so that there it doesn't look as visually cluttered if the title is too long in blue
</h1>

<div class="cui__block blue">
  <h1 class="cui__title--primary small  white">
    Small primary title to fit in several lines so that there it doesn't look as visually cluttered if the title is too long in white
  </h1>
</div>

Small and prominent

Small but visually prominent primary title that could also fit in several lines so that there it doesn't look as visually cluttered if the title is too long

Small but visually prominent primary title that could also fit in several lines so that there it doesn't look as visually cluttered if the title is too long in blue

Small but visually prominent primary title that could also fit in several lines so that there it doesn't look as visually cluttered if the title is too long in white

<h1 class="cui__title--primary small strong">
  Small but visually prominent primary title that could also fit in several lines so that there it doesn't look as visually cluttered if the title is too long
</h1>

<h1 class="cui__title--primary small strong blue">
  Small but visually prominent primary title that could also fit in several lines so that there it doesn't look as visually cluttered if the title is too long in blue
</h1>

<div class="cui__block blue">
  <h1 class="cui__title--primary small strong white">
  Small but visually prominent primary title that could also fit in several lines so that there it doesn't look as visually cluttered if the title is too long in white
  </h1>
</div>

Default margins

Primary title

Primary title in blue

Primary title in white

<h1 class="cui__title--primary default-margins">
  Primary title
</h1>

<h1 class="cui__title--primary default-margins blue">
  Primary title in blue
</h1>

<div class="cui__block blue">
  <h1 class="cui__title--primary default-margins white">
    Primary title in white
  </h1>
</div>

Secondary

Secondary title

Secondary title in blue

Secondary title in white

<h2 class="cui__title--secondary">
  Secondary title
</h2>

<h2 class="cui__title--secondary blue">
  Secondary title in blue
</h2>

<div class="cui__block blue">
  <h2 class="cui__title--secondary white">
    Secondary title in white
  </h2>
</div>

Condensed

Secondary condensed set

<h2 class="cui__title--secondary condensed">
  Secondary condensed set
</h2>

<p class="cui__paragraph--primary condensed">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

Default margins

Secondary title

Secondary title in blue

Secondary title in white

<h2 class="cui__title--secondary default-margins">
  Secondary title
</h2>

<h2 class="cui__title--secondary default-margins blue">
  Secondary title in blue
</h2>

<div class="cui__block blue">
  <h2 class="cui__title--secondary default-margins white">
    Secondary title in white
  </h2>
</div>

Subtitle

Subtitle in blue

Subtitle in white

<h3 class="cui__subtitle">
  Subtitle
</h3>

<h3 class="cui__subtitle blue">
  Subtitle in blue
</h3>

<div class="cui__block blue">
  <h3 class="cui__subtitle white">
    Subtitle in white
  </h3>
</div>

Condensed

Subtitle condensed

Subtitle condensed in blue

Subtitle condensed in white

<h3 class="cui__subtitle condensed">
  Subtitle condensed
</h3>

<h3 class="cui__subtitle blue condensed">
  Subtitle condensed in blue
</h3>

<div class="cui__block blue">
  <h3 class="cui__subtitle white condensed">
    Subtitle condensed in white
  </h3>
</div>

Default margins

Subtitle default margins

Subtitle default margins in blue

Subtitle default margins in white

<h3 class="cui__subtitle default-margins">
  Subtitle default margins
</h3>

<h3 class="cui__subtitle blue default-margins">
  Subtitle default margins in blue
</h3>

<div class="cui__block blue">
  <h3 class="cui__subtitle white default-margins">
    Subtitle default margins in white
  </h3>
</div>

Paragraph

Primary

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<p class="cui__paragraph--primary">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="cui__paragraph--primary">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="cui__paragraph--primary blue">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cui__block blue">
  <p class="cui__paragraph--primary white">
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Primary condensed

<p class="cui__paragraph--primary condensed">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="cui__paragraph--primary condensed">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="cui__paragraph--primary blue condensed">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cui__block blue">
  <p class="cui__paragraph--primary white condensed">
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Default margins

<p class="cui__paragraph--primary default-margins">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="cui__paragraph--primary default-margins">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="cui__paragraph--primary default-margins blue">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="cui__block blue">
  <p class="cui__paragraph--primary default-margins white">
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Secondary

<p class="cui__paragraph--secondary">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="cui__paragraph--secondary">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Secondary condensed

<p class="cui__paragraph--secondary condensed">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="cui__paragraph--secondary condensed">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Default margins

<p class="cui__paragraph--secondary default-margins">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="cui__paragraph--secondary default-margins">
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Legal

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<p class="cui__paragraph--legal">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Default margins

<p class="cui__paragraph--legal default-margins">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Promo Label

<p class="cui__paragraph--primary condensed">
  Lorem Ipsum is simply dummy text typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  <span class="cui__promo-label">Promo</span>
</p>

Link

Click here to go somewhere else
Click here to go somewhere else

Click here to go somewhere else

<p class="cui__paragraph--primary condensed">
  <a class="cui__link">
    Click here to go somewhere else
  </a>
  <br />
  <a class="cui__link black">
    Click here to go somewhere else
  </a>  
  <div class="cui__block blue">  
    <a class="cui__link white">
      Click here to go somewhere else
    </a>  
  </div>  
</a>

Dynamic styling

Dynamic styling is the feature of allowing for override of the background and foreground colors. Not all styles overrides are supported: for Links, only the "blue" link's text color.

In links, the dynamic-styling modifies the hover, focus and active states to have an underline instead of a darkened color. You can see the effect in the link below.

Click here to go somewhere else

<a
  class="cui__link dynamic-styling"
  style="color: #3500C8">
  Click here to go somewhere else
</a>

Text Label

The text label is a small title to be used in combination with some other text styles, such as paragraphs or secondary titles.

Klarna ID

123456-454-8953-34984-39834

Original amount

1.600 kr

Billing address

Jonathan Konstantin Smithsson

15 Northeast Longname Industrial Parkway
San Francisco
94100 California
United States

<h4 class="cui__text-label">
  Klarna ID
</h4>

<p class="cui__paragraph--primary condensed">
  123456-454-8953-34984-39834
</p>

<h4 class="cui__text-label">
  Original amount
</h4>

<h2 class="cui__title--secondary">
  1.600 kr
</h2>

<h4 class="cui__text-label">
  Billing address
</h4>

<h2 class="cui__title--secondary condensed">
  Jonathan Konstantin Smithsson
</h2>

<p class="cui__paragraph--primary condensed">
  15 Northeast Longname Industrial Parkway<br />
  San Francisco<br />
  94100 California<br />
  United States
</p>

Default margins

Klarna ID

123456-454-8953-34984-39834

Original amount

1.600 kr

Billing address

Jonathan Konstantin Smithsson

15 Northeast Longname Industrial Parkway
San Francisco
94100 California
United States

<h4 class="cui__text-label default-margins">
  Klarna ID
</h4>

<p class="cui__paragraph--primary condensed">
  123456-454-8953-34984-39834
</p>

<h4 class="cui__text-label default-margins">
  Original amount
</h4>

<h2 class="cui__title--secondary default-margins">
  1.600 kr
</h2>

<h4 class="cui__text-label default-margins">
  Billing address
</h4>

<h2 class="cui__title--secondary condensed">
  Jonathan Konstantin Smithsson
</h2>

<p class="cui__paragraph--primary condensed">
  15 Northeast Longname Industrial Parkway<br />
  San Francisco<br />
  94100 California<br />
  United States
</p>

Amount Text

€1500

$1800

<p class="cui__amount-text">
  €1500
</p>

<div class="cui__block blue">
  <p class="cui__amount-text white">
    $1800
  </p>
</div>

Tooltip

The tooltip element is to be used to show more information to a user either without occupying space on the page or by making the text more relevant visually.

The tooltip doesn't dictate positioning, only layout, so this must be implemented on your side. For some use cases, CSS will do, but you may need to use JavaScript for that.

The implementation of tooltip's pointer relies on transform: translate rather than using calc, since calc known issues on IE9. Both are unsupported on IE8.

Tooltip's width is limited to 250px. To use wider Tooltip you will need to override the max-width.

Tooltip

Tooltip

Simple

<div class="cui__tooltip">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

Small

<div class="cui__tooltip">
  Lorem Ipsum
</div>

Arrows

You can add arrows on 9 different positions.

<div class="cui__tooltip top-left">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip top">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />
<div class="cui__tooltip top-right">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

<hr />
<div class="cui__tooltip right-top">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip right">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />    
<div class="cui__tooltip right-bottom">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    

<hr />
<div class="cui__tooltip bottom-right">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip bottom">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />    
<div class="cui__tooltip bottom-left">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    

<hr />    
<div class="cui__tooltip left-bottom">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip left">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />
<div class="cui__tooltip left-top">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

Small with arrow

All the arrows above also work with small tooltips.

<div class="cui__tooltip top">
  Lorem Ipsum
</div>

Tooltip with border

Simple

<div class="cui__tooltip border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

Small

<div class="cui__tooltip border">
  Lorem Ipsum
</div>

Arrows

You can add arrows on 9 different positions.

<div class="cui__tooltip top-left border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip top border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />
<div class="cui__tooltip top-right border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

<hr />
<div class="cui__tooltip right-top border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip right border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />    
<div class="cui__tooltip right-bottom border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    

<hr />
<div class="cui__tooltip bottom-right border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip bottom border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />    
<div class="cui__tooltip bottom-left border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    

<hr />    
<div class="cui__tooltip left-bottom border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>    
<hr />
<div class="cui__tooltip left border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<hr />
<div class="cui__tooltip left-top border">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

Small with arrow

All the arrows above also work with small tooltips.

<div class="cui__tooltip top border">
  Lorem Ipsum
</div>