Accordion

Accordions rely on the lower-level uicc-collapsiblecomponent. This is why you have to tooggle the is-openswitch two times: On the uicc-accorion__itemelement and on it's child uicc-collapsibleelement.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Accordion Item 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Long Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Long Header item name Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-accordion">
  <div class="uicc-accordion__item">
    <div class="uicc-accordion__itemHeader uicc-postfix uicc-postfix--centere" onclick="this.parentElement.classList.toggle('is-open');this.parentElement.querySelector('.uicc-collapsible').classList.toggle('is-open')">
      <span class="uicc-accordion__itemHeadline uicc-postfix__fluid uicc-col">Accordion Item 1</span>
      <svg class="uicc-accordion__itemIcon uicc-icon">
        <use xlink:href="./assets/icons.svg#arrow-right"></use>
      </svg>
    </div>
    <div class="uicc-collapsible">
      <div class="uicc-accordion__itemContent uicc-collapsible__content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
        ut aliquip ex ea commodo consequat.
      </div>
    </div>
  </div>
  <div class="uicc-accordion__item is-open">
    <div class="uicc-accordion__itemHeader uicc-postfix uicc-postfix--centere" onclick="this.parentElement.classList.toggle('is-open');this.parentElement.querySelector('.uicc-collapsible').classList.toggle('is-open')">
      <span class="uicc-accordion__itemHeadline uicc-postfix__fluid uicc-col">Accordion Item 2</span>
      <svg class="uicc-accordion__itemIcon uicc-icon">
        <use xlink:href="./assets/icons.svg#arrow-right"></use>
      </svg>
    </div>
    <div class="uicc-collapsible is-open">
      <div class="uicc-accordion__itemContent uicc-collapsible__content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
        ut aliquip ex ea commodo consequat.
      </div>
    </div>
  </div>
  <div class="uicc-accordion__item">
    <div class="uicc-accordion__itemHeader uicc-postfix uicc-postfix--centere" onclick="this.parentElement.classList.toggle('is-open');this.parentElement.querySelector('.uicc-collapsible').classList.toggle('is-open')">
      <span class="uicc-accordion__itemHeadline uicc-postfix__fluid uicc-col">Long Content</span>
      <svg class="uicc-accordion__itemIcon uicc-icon">
        <use xlink:href="./assets/icons.svg#arrow-right"></use>
      </svg>
    </div>
    <div class="uicc-collapsible">
      <div class="uicc-accordion__itemContent uicc-collapsible__content">
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
        <p class="uicc-row">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
          magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
  <div class="uicc-accordion__item">
    <div class="uicc-accordion__itemHeader uicc-postfix uicc-postfix--centere" onclick="this.parentElement.classList.toggle('is-open');this.parentElement.querySelector('.uicc-collapsible').classList.toggle('is-open')">
      <span class="uicc-accordion__itemHeadline uicc-postfix__fluid uicc-col">Long Header item name Lorem ipsum dolor sit amet</span>
      <svg class="uicc-accordion__itemIcon uicc-icon">
        <use xlink:href="./assets/icons.svg#arrow-right"></use>
      </svg>
    </div>
    <div class="uicc-collapsible">
      <div class="uicc-accordion__itemContent uicc-collapsible__content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
        ut aliquip ex ea commodo consequat.
      </div>
    </div>
  </div>
</div>

Alert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-alert uicc-alert--success uicc-row">
  <div class="uicc-alert__content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam,
    <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  </div>
</div>
<div class="uicc-alert uicc-alert--info uicc-row">
  <div class="uicc-alert__content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam,
    <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  </div>
</div>
<div class="uicc-alert uicc-alert--warning uicc-row">
  <div class="uicc-alert__content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam,
    <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  </div>
</div>
<div class="uicc-alert uicc-alert--error uicc-row">
  <div class="uicc-alert__content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam,
    <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  </div>
</div>

Animated

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

<script>
  function uiccAnimatedDemo(id, effect) {
    var removeAllClassesFromElement = function(element) {
      var classNamesToRemove = Array.prototype.slice.call(element.classList, 0).filter(function(className) {
        return /^uicc-animated/.test(className);
      });

      classNamesToRemove.forEach(function(className) {
        element.classList.remove(className);
      });
    }

    var demoElement = document.getElementById(id);
    demoElement.classList.add('uicc-animated');
    demoElement.classList.add('uicc-animated--' + effect);

    setTimeout(removeAllClassesFromElement.bind(null, demoElement), 500);
  }
</script>
<div style="overflow:hidden" class="uicc-region uicc-region--primary uicc-row">
  <div id="uicc-animated-demo" class="uicc-region uicc-region--secondary">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  </div>
</div>

<button class="uicc-button uicc-button--primary" onclick="uiccAnimatedDemo('uicc-animated-demo', 'fadeIn');">Fade in</button>
<button class="uicc-button uicc-button--primary" onclick="uiccAnimatedDemo('uicc-animated-demo', 'zoomIn');">Zoom in</button>
<button class="uicc-button uicc-button--primary" onclick="uiccAnimatedDemo('uicc-animated-demo', 'slideInUp');">slideInUp</button>
<button class="uicc-button uicc-button--primary" onclick="uiccAnimatedDemo('uicc-animated-demo', 'slideOutDown');">slideOutDown</button>
<button class="uicc-button uicc-button--primary" onclick="uiccAnimatedDemo('uicc-animated-demo', 'bounceInDown');">bounceInDown</button>

Badge

100

10

1

0

<div class="uicc-badge uicc-badge--info">100</div>
<div class="uicc-badge uicc-badge--success">10</div>
<div class="uicc-badge uicc-badge--warning">1</div>
<div class="uicc-badge uicc-badge--error">0</div>

Badge Icon

100

10

1

0

<div class="uicc-badgeIcon uicc-badgeIcon--info uicc-col">
  <svg class="uicc-badgeIcon__icon uicc-icon">
    <use xlink:href="./assets/icons.svg#notifications"></use>
  </svg>
  <div class="uicc-badgeIcon__badge uicc-badge uicc-badge--info">100</div>
</div>
<div class="uicc-badgeIcon uicc-badgeIcon--success uicc-col">
  <svg class="uicc-badgeIcon__icon uicc-icon">
    <use xlink:href="./assets/icons.svg#notifications"></use>
  </svg>
  <div class="uicc-badgeIcon__badge uicc-badge uicc-badge--success">10</div>
</div>
<div class="uicc-badgeIcon uicc-badgeIcon--warning uicc-col">
  <svg class="uicc-badgeIcon__icon uicc-icon">
    <use xlink:href="./assets/icons.svg#notifications"></use>
  </svg>
  <div class="uicc-badgeIcon__badge uicc-badge uicc-badge--warning">1</div>
</div>
<div class="uicc-badgeIcon uicc-badgeIcon--error uicc-col">
  <svg class="uicc-badgeIcon__icon uicc-icon">
    <use xlink:href="./assets/icons.svg#notifications"></use>
  </svg>
  <div class="uicc-badgeIcon__badge uicc-badge uicc-badge--error">0</div>
</div>

Block

Block (default)

Blocks always have a width of 100%.

This is a block

<div style="height: 100px; background-color: yellow;">
  <div class="uicc-block" style="background-color: orange;">This is a block</div>
</div>

Block (vertical)

Vertical blocks also have a height of 100%.

This is a vertical block

<div style="height: 100px;">
  <div class="uicc-block uicc-block--vertical" style="background-color: orange;">This is a vertical block</div>
</div>

Button

Button (default)

Primary Secondary Danger

<a class="uicc-button uicc-button--primary">Primary</a>
<a class="uicc-button uicc-button--secondary">Secondary</a>
<a class="uicc-button uicc-button--danger">Danger</a>

Button (outline)

Primary Secondary Danger

<a class="uicc-button uicc-button--outline uicc-button--primary">Primary</a>
<a class="uicc-button uicc-button--outline uicc-button--secondary">Secondary</a>
<a class="uicc-button uicc-button--outline uicc-button--danger">Danger</a>

Button (is-active)

You can force the hover state by adding the is-activeflag

Primary Secondary Danger

<a class="uicc-button uicc-button--primary is-active">Primary</a>
<a class="uicc-button uicc-button--secondary  is-active">Secondary</a>
<a class="uicc-button uicc-button--danger is-active">Danger</a>

Button (disabled)

You can either use the disabledattribute or the is-disabledclass.

<button class="uicc-button uicc-button--primary" disabled>Primary</button>
<button class="uicc-button uicc-button--secondary" disabled>Secondary</button>
<button class="uicc-button uicc-button--danger" disabled>Disabled</button>

Button (block)

Button

<a class="uicc-button uicc-button--block uicc-button--primary">Button</a>

Button (big)

Button

<a class="uicc-button uicc-button--big uicc-button--primary">Button</a>

Button (with text and icon left)

Button

<a class="uicc-button uicc-button--primary">
  <svg class="uicc-button__icon uicc-button__icon--left uicc-icon">
    <use xlink:href="./assets/icons.svg#arrow-left"></use>
  </svg>
  Button
</a>

Button (text and icon right)

Button

<a class="uicc-button uicc-button--primary">
  Button
  <svg class="uicc-button__icon uicc-button__icon--right uicc-icon">
    <use xlink:href="./assets/icons.svg#arrow-right"></use>
  </svg>
</a>

Button (icon only)

<a class="uicc-button uicc-button--primary uicc-button--icon">
  <svg class="uicc-button__icon uicc-icon">
    <use xlink:href="./assets/icons.svg#check"></use>
  </svg>
</a>
<a class="uicc-button uicc-button--secondary uicc-button--icon">
  <svg class="uicc-button__icon uicc-icon">
    <use xlink:href="./assets/icons.svg#clear"></use>
  </svg>
</a>

Centered

Centered (horizontally)

Display content horizontally centered.

<div class="uicc-centered uicc-centered--horizontally" style="height: 10rem; background-color: lightblue; padding: 0.5rem">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=demo&w=200&h=100" alt="">
</div>

Centered (vertically)

Display content vertically centered.

Lorem ipsum

<div class="uicc-centered uicc-centered--vertically" style="height: 10rem; background-color: lightblue; padding: 0.5rem">
  <p>Lorem ipsum</p>
</div>

Centered (both)

Display content vertically and horizontally centered.

Lorem ipsum

<div class="uicc-centered uicc-centered--vertically uicc-centered--horizontally" style="height: 10rem; background-color: lightblue; padding: 0.5rem">
  <p>Lorem ipsum</p>
</div>

Checkbox

Checkbox (default)

Checkbox 1 Checkbox 2

<label class="uicc-checkbox">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Checkbox 1</span>
</label>
<label class="uicc-checkbox">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Checkbox 2</span>
</label>

Checkbox (inline)

Checkbox 1 Checkbox 2

<label class="uicc-checkbox uicc-checkbox--inline">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Checkbox 1</span>
</label>
<label class="uicc-checkbox uicc-checkbox--inline">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Checkbox 2</span>
</label>

Checkbox (disabled)

Checkbox 1 Checkbox 2

<label class="uicc-checkbox is-disabled">
  <input type="checkbox" class="uicc-checkbox__control" disabled>
  <span class="uicc-checkbox__label">Checkbox 1</span>
</label>
<label class="uicc-checkbox is-disabled">
  <input type="checkbox" class="uicc-checkbox__control" disabled checked>
  <span class="uicc-checkbox__label">Checkbox 2</span>
</label>

Checkbox (small)

Checkbox 1 Checkbox 2

<label class="uicc-checkbox uicc-checkbox--small">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Checkbox 1</span>
</label>
<label class="uicc-checkbox uicc-checkbox--small">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Checkbox 2</span>
</label>

Checkbox (big)

Yes, please subscribe me to your email list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<label class="uicc-checkbox uicc-checkbox--big">
  <input type="checkbox" class="uicc-checkbox__control">
  <span class="uicc-checkbox__label">Yes, please subscribe me to your email list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
</label>

Checkbox (Fake)

You can visually fake checkboxes without using <input type="checkbox">form elements. Please make sure to toggle the class is-checkedon the uicc-checkboxelement.

Checkbox 1 Checkbox 2

<label class="uicc-checkbox">
  <span class="uicc-checkbox__label" onclick="this.parentElement.classList.toggle('is-checked')">Checkbox 1</span>
</label>
<label class="uicc-checkbox">
  <span class="uicc-checkbox__label" onclick="this.parentElement.classList.toggle('is-checked')">Checkbox 2</span>
</label>

Clickable

Clickable (Default)

Changes the cursor to "pointer" on hovering

Clickable

<div class="uicc-clickable">
  Clickable
</div>

Clickable (Touchy)

Slightly increases the touchable area

Clickable

<div class="uicc-clickable uicc-clickable--touchy">
  Clickable
</div>

Col

Col (default)

Cols have a defined right margin

Col 1

Col 2

Col 3

<div class="uicc-col">
  Col 1
</div>
<div class="uicc-col">
  Col 2
</div>
<div class="uicc-col">
  Col 3
</div>

Col (with separator)

Col 1

Col 2

Col 3

<div class="uicc-col uicc-col--withSeparator">
  Col 1
</div>
<div class="uicc-col uicc-col--withSeparator">
  Col 2
</div>
<div class="uicc-col uicc-col--withSeparator">
  Col 3
</div>

Col (small margin)

Col 1

Col 2

Col 3

Col 4 (with separator)

Col 5 (with separator)

Col 6 (with separator)

<div class="uicc-col uicc-col--smallMargin">
  Col 1
</div>
<div class="uicc-col uicc-col--smallMargin">
  Col 2
</div>
<div class="uicc-col uicc-col--smallMargin">
  Col 3
</div>
<div class="uicc-col uicc-col--smallMargin uicc-col--withSeparator">
  Col 4 (with separator)
</div>
<div class="uicc-col uicc-col--smallMargin uicc-col--withSeparator">
  Col 5 (with separator)
</div>
<div class="uicc-col uicc-col--smallMargin uicc-col--withSeparator">
  Col 6 (with separator)
</div>

Col (big margin)

Col 1

Col 2

Col 3

Col 4 (with separator)

Col 5 (with separator)

Col 6 (with separator)

<div class="uicc-col uicc-col--bigMargin">
  Col 1
</div>
<div class="uicc-col uicc-col--bigMargin">
  Col 2
</div>
<div class="uicc-col uicc-col--bigMargin">
  Col 3
</div>
<div class="uicc-col uicc-col--bigMargin uicc-col--withSeparator">
  Col 4 (with separator)
</div>
<div class="uicc-col uicc-col--bigMargin uicc-col--withSeparator">
  Col 5 (with separator)
</div>
<div class="uicc-col uicc-col--bigMargin uicc-col--withSeparator">
  Col 6 (with separator)
</div>

Col (inverse)

Col 1

Col 2

Col 3

Col 4 (with separator)

Col 5 (with separator)

Col 6 (with separator)

<div class="uicc-col uicc-col--inverse">
  Col 1
</div>
<div class="uicc-col uicc-col--inverse">
  Col 2
</div>
<div class="uicc-col uicc-col--inverse">
  Col 3
</div>
<div class="uicc-col uicc-col--inverse uicc-col--withSeparator">
  Col 4 (with separator)
</div>
<div class="uicc-col uicc-col--inverse uicc-col--withSeparator">
  Col 5 (with separator)
</div>
<div class="uicc-col uicc-col--inverse uicc-col--withSeparator">
  Col 6 (with separator)
</div>

Collapsible

The collapsible component comes with no special styling in order to be used as a foundation for more opinionated components e.g. Accordion.

Collapsible (short content)

Toggle the class is-opento open/close the collapsible content

Collapsible Content

…

<button class="uicc-button uicc-button--secondary uicc-row" onclick="document.getElementById('uicc-collapsible-demo-1').classList.toggle('is-open')">Toggle</button>
<div class="uicc-collapsible" id="uicc-collapsible-demo-1">
  <div class="uicc-collapsible__content">
    <p class="uicc-row uicc-row--extraBigMargin">Collapsible Content</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
  </div>
</div>

Collapsible (large content)

Collapsible Content

…

<button class="uicc-button uicc-button--secondary uicc-row" onclick="document.getElementById('uicc-collapsible-demo-2').classList.toggle('is-open')">Toggle</button>
<div class="uicc-collapsible" id="uicc-collapsible-demo-2">
  <div class="uicc-collapsible__content">
    <p class="uicc-row uicc-row--extraBigMargin">Collapsible Content</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
    <p class="uicc-row uicc-row--extraBigMargin">&hellip;</p>
  </div>
</div>

Color

Color (default)

Primary with link

Secondary with link

Gray with link

Medium Gray with link

Error with link

White with link

<div class="uicc-color uicc-color--primary">Primary
  <a href="javascript:;" class="uicc-link">with link</a>
</div>
<div class="uicc-color uicc-color--secondary">Secondary
  <a href="javascript:;" class="uicc-link">with link</a>
</div>
<div class="uicc-color uicc-color--gray">Gray
  <a href="javascript:;" class="uicc-link">with link</a>
</div>
<div class="uicc-color uicc-color--mediumGray">Medium Gray
  <a href="javascript:;" class="uicc-link">with link</a>
</div>
<div class="uicc-color uicc-color--error">Error
  <a href="javascript:;" class="uicc-link">with link</a>
</div>
<div class="uicc-color uicc-color--white" style="background-color: pink; padding: 0.3rem;">White
  <a href="javascript:;" class="uicc-link">with link</a>
</div>

Color (force)

Force the color to override other colors (e.g. on links) by adding the modifier uicc-color--force.

Gray with link

<div class="uicc-color uicc-color--gray uicc-color--force">Gray
  <a href="javascript:;" class="uicc-link">with link</a>
</div>

Float

Float (left)

<div class="uicc-float--clear">
  <div class="uicc-float uicc-float--left" style="width: 30px; height: 30px; background-color: lightblue;"></div>
  <div class="uicc-float uicc-float--left" style="width: 30px; height: 30px; background-color: lightgreen;"></div>
  <div class="uicc-float uicc-float--left" style="width: 30px; height: 30px; background-color: coral;"></div>
  <div class="uicc-float uicc-float--left" style="width: 30px; height: 30px; background-color: orange;"></div>
</div>

Float (right)

<div class="uicc-float--clear">
  <div class="uicc-float uicc-float--right" style="width: 30px; height: 30px; background-color: lightblue;"></div>
  <div class="uicc-float uicc-float--right" style="width: 30px; height: 30px; background-color: lightgreen;"></div>
  <div class="uicc-float uicc-float--right" style="width: 30px; height: 30px; background-color: coral;"></div>
  <div class="uicc-float uicc-float--right" style="width: 30px; height: 30px; background-color: orange;"></div>
</div>

Float (in text)

Floating elements in text get some extra spacing between the floating element and the text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div>
  <figure class="uicc-float uicc-float--left uicc-float--inText">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=demo&w=100&h=60">
    <figcaption>Bildunterschrift</figcaption>
  </figure>
  <figure class="uicc-float uicc-float--right uicc-float--inText">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=demo&w=100&h=60">
    <figcaption>Bildunterschrift</figcaption>
  </figure>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
  tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
  minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Float (in text, small center)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div>
  <figure class="uicc-figure uicc-float uicc-float--left uicc-float--inText uicc-float--smallCenter">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=demo&w=200&h=60">
    <figcaption class="uicc-figure__caption">Bildunterschrift</figcaption>
  </figure>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
  tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
  minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Grid

Grid (equal columns)

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

cell 1

cell 2

cell 3

<div class="uicc-grid">
  <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (gutters/padding)

By default, grid cells do not have any padding between each other. This is especially useful for non-textual content like images, video, street maps etc. However, if you do need padding, you can simply add the class uicc-grid--guttersto your grid container element, as done in most of the examples that follow.

cell 1

cell 2

cell 3

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (2 equal, 1 double column)

cell 1

cell 2 (double)

cell 3

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
  <div class="uicc-grid__cell uicc-grid__cell--double uicc-grid__example">cell 2 (double)</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (2 equal, 1 tripe column)

cell 1

cell 2 (triple)

cell 3

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
  <div class="uicc-grid__cell uicc-grid__cell--triple uicc-grid__example">cell 2 (triple)</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (1 shrink, 2 equal column)

cell 1

cell 2 (shrink)

cell 3

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
  <div class="uicc-grid__cell uicc-grid__cell--shrink uicc-grid__example">cell 2 (shrink)</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (vertical - 1 shrink, 2 equal column)

Stack your grid vertically by adding the uicc-grid--verticalmodifier

cell 1

cell 2 (shrink)

cell 3

<div style="height: 400px;">
  <div class="uicc-grid uicc-grid--vertical uicc-grid--gutters">
    <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
    <div class="uicc-grid__cell uicc-grid__cell--shrink uicc-grid__example">cell 2 (shrink)</div>
    <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
  </div>
</div>

Grid (unequal, based on 12 columns)

1of12

2of12

3of12

6of12

8of12

4of12

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__cell--1of12 uicc-grid__example">1of12</div>
  <div class="uicc-grid__cell uicc-grid__cell--2of12 uicc-grid__example">2of12</div>
  <div class="uicc-grid__cell uicc-grid__cell--3of12 uicc-grid__example">3of12</div>
  <div class="uicc-grid__cell uicc-grid__cell--6of12 uicc-grid__example">6of12</div>
  <div class="uicc-grid__cell uicc-grid__cell--8of12 uicc-grid__example">8of12</div>
  <div class="uicc-grid__cell uicc-grid__cell--4of12 uicc-grid__example">4of12</div>
</div>

Grid (unequal, responsive)

small 6of12; medium 3of12

small 6of12; medium 9of12

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__cell--6of12 uicc-grid__cell--medium-3of12 uicc-grid__example">small 6of12; medium 3of12</div>
  <div class="uicc-grid__cell uicc-grid__cell--6of12 uicc-grid__cell--medium-9of12 uicc-grid__example">small 6of12; medium 9of12</div>
</div>

Grid (nesting)

cell 1

cell 2.a

cell 2.b

cell 3

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1</div>
  <div class="uicc-grid__cell uicc-grid__example">
    <div class="uicc-grid uicc-grid--gutters">
      <div class="uicc-grid__cell uicc-grid__example">cell 2.a</div>
      <div class="uicc-grid__cell uicc-grid__example">cell 2.b</div>
    </div>
  </div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (responsive)

Responsive Grids work by adding media classes to the Grid cells or containers. When those media values are met, the grids automatically adjust accordingly.

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--full uicc-grid--medium-fit uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Grid (Responsive, flowing)

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 4 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 5 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 6 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 7 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--tiny-full uicc-grid--small-1of2 uicc-grid--medium-1of3 uicc-grid--large-1of4 uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 4 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 5 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 6 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 7 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Grid (Responsive, flowing, center widow line)

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 4 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 5 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 6 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 7 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--tiny-full uicc-grid--small-1of2 uicc-grid--medium-1of3 uicc-grid--large-1of4 uicc-grid--gutters uicc-grid--centerWidowLine">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 4 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 5 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 6 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 7 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Grid (responsive, re-ordering)

The two cells swap ordering when switching from small to medium

Small first, medium last

Small last, medium first

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">Small first, medium last</div>
  <div class="uicc-grid__cell uicc-grid__example uicc-grid__cell--medium-orderFirst">Small last, medium first</div>
</div>

Grid (stretched alignment / default)

cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

cell 2

cell 3

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (top alignment)

cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

cell 2

cell 3

<div class="uicc-grid uicc-grid--top uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (center alignment)

cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

cell 2

cell 3

<div class="uicc-grid uicc-grid--center uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (bottom alignment)

cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

cell 2

cell 3

<div class="uicc-grid uicc-grid--bottom uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3</div>
</div>

Grid (mixed alignment)

.uicc-grid__cell--top

.uicc-grid__cell--center

.uicc-grid__cell--bottom

<div class="uicc-grid uicc-grid--gutters" style="height: 300px">
  <div class="uicc-grid__cell uicc-grid__cell--top uicc-grid__example">.uicc-grid__cell--top</div>
  <div class="uicc-grid__cell uicc-grid__cell--center uicc-grid__example">.uicc-grid__cell--center</div>
  <div class="uicc-grid__cell uicc-grid__cell--bottom uicc-grid__example">.uicc-grid__cell--bottom</div>
</div>

Grid (with row and column gutters)

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 4 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--1of2 uicc-grid--gutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 4 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Grid (with big row and column gutters)

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 4 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--1of2 uicc-grid--gutters uicc-grid--bigGutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 4 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Grid (with row gutters)

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 4 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--1of2 uicc-grid--rowGutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 4 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Grid (with column gutters)

cell 1 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 2 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 3 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

cell 4 ............................... ............................... ............................... ............................... ............................... ............................... ...............................

<div class="uicc-grid uicc-grid--1of2 uicc-grid--columnGutters">
  <div class="uicc-grid__cell uicc-grid__example">cell 1 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 2 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 3 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
  <div class="uicc-grid__cell uicc-grid__example">cell 4 ............................... ............................... ............................... ...............................
    ............................... ............................... ...............................</div>
</div>

Headline

Headline (default)

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4 Addendum

Heading 5 Addendum

Heading 6 Addendum

<h1 class="uicc-headline uicc-headline--h0">Heading 0</h1>
<h1 class="uicc-headline uicc-headline--h1">Heading 1</h1>
<h2 class="uicc-headline uicc-headline--h2">Heading 2</h2>
<h3 class="uicc-headline uicc-headline--h3">Heading 3</h3>
<h4 class="uicc-headline uicc-headline--h4">Heading 4
  <small class="uicc-headline__addendum">Addendum</small>
</h4>
<h5 class="uicc-headline uicc-headline--h5">Heading 5
  <small class="uicc-headline__addendum">Addendum</small>
</h5>
<h6 class="uicc-headline uicc-headline--h6">Heading 6
  <small class="uicc-headline__addendum">Addendum</small>
</h6>

Headline (in text)

In a text document we add sensible margins to our uicc-headlines to visually structure the document outline.

Add the uicc-headline--firstInTextmodifier if you do not need a top margin.

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4 Addendum

Heading 5 Addendum

Heading 6 Addendum

<h1 class="uicc-headline uicc-headline--h0 uicc-headline--text uicc-headline--firstInText">Heading 0</h1>
<h1 class="uicc-headline uicc-headline--h1 uicc-headline--text uicc-headline--firstInText">Heading 1</h1>
<h2 class="uicc-headline uicc-headline--h2 uicc-headline--text">Heading 2</h2>
<h3 class="uicc-headline uicc-headline--h3 uicc-headline--text">Heading 3</h3>
<h4 class="uicc-headline uicc-headline--h4 uicc-headline--text">Heading 4
  <small class="uicc-headline__addendum">Addendum</small>
</h4>
<h5 class="uicc-headline uicc-headline--h5 uicc-headline--text">Heading 5
  <small class="uicc-headline__addendum">Addendum</small>
</h5>
<h6 class="uicc-headline uicc-headline--h6 uicc-headline--text">Heading 6
  <small class="uicc-headline__addendum">Addendum</small>
</h6>

Headline (Primary)

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4 Addendum

Heading 5 Addendum

Heading 6 Addendum

<h1 class="uicc-headline uicc-headline--h0 uicc-headline--primary">Heading 0</h1>
<h1 class="uicc-headline uicc-headline--h1 uicc-headline--primary">Heading 1</h1>
<h2 class="uicc-headline uicc-headline--h2 uicc-headline--primary">Heading 2</h2>
<h3 class="uicc-headline uicc-headline--h3 uicc-headline--primary">Heading 3</h3>
<h4 class="uicc-headline uicc-headline--h4 uicc-headline--primary">Heading 4
  <small class="uicc-headline__addendum">Addendum</small>
</h4>
<h5 class="uicc-headline uicc-headline--h5 uicc-headline--primary">Heading 5
  <small class="uicc-headline__addendum">Addendum</small>
</h5>
<h6 class="uicc-headline uicc-headline--h6 uicc-headline--primary">Heading 6
  <small class="uicc-headline__addendum">Addendum</small>
</h6>

Headline (Secondary)

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4 Addendum

Heading 5 Addendum

Heading 6 Addendum

<h1 class="uicc-headline uicc-headline--h0 uicc-headline--secondary">Heading 0</h1>
<h1 class="uicc-headline uicc-headline--h1 uicc-headline--secondary">Heading 1</h1>
<h2 class="uicc-headline uicc-headline--h2 uicc-headline--secondary">Heading 2</h2>
<h3 class="uicc-headline uicc-headline--h3 uicc-headline--secondary">Heading 3</h3>
<h4 class="uicc-headline uicc-headline--h4 uicc-headline--secondary">Heading 4
  <small class="uicc-headline__addendum">Addendum</small>
</h4>
<h5 class="uicc-headline uicc-headline--h5 uicc-headline--secondary">Heading 5
  <small class="uicc-headline__addendum">Addendum</small>
</h5>
<h6 class="uicc-headline uicc-headline--h6 uicc-headline--secondary">Heading 6
  <small class="uicc-headline__addendum">Addendum</small>
</h6>

Headline (Label)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1 class="uicc-headline uicc-headline--h1 uicc-headline--label">Heading 1</h1>
<h2 class="uicc-headline uicc-headline--h2 uicc-headline--label">Heading 2</h2>
<h3 class="uicc-headline uicc-headline--h3 uicc-headline--label">Heading 3</h3>
<h4 class="uicc-headline uicc-headline--h4 uicc-headline--label">Heading 4</h4>
<h5 class="uicc-headline uicc-headline--h5 uicc-headline--label">Heading 5</h5>
<h6 class="uicc-headline uicc-headline--h6 uicc-headline--label">Heading 6</h6>

Hidden

Hidden element

Hidden element fade in on unhide

Hidden element fade in on unhide, preserve space

<div class="uicc-hidden" id="uicc-unhidden-demo-1">Hidden element</div>
<div class="uicc-hidden uicc-hidden--fadeInOnUnhidden" id="uicc-unhidden-demo-2">Hidden element fade in on unhide</div>
<div class="uicc-hidden uicc-hidden--preserveSpace uicc-hidden--fadeInOnUnhidden" id="uicc-unhidden-demo-3">Hidden element fade in on unhide, preserve space</div>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('uicc-unhidden-demo-1').classList.toggle('is-unhidden')">Toggle visibility demo 1</button>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('uicc-unhidden-demo-2').classList.toggle('is-unhidden')">Toggle visibility demo 2</button>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('uicc-unhidden-demo-3').classList.toggle('is-unhidden')">Toggle visibility demo 3</button>

Hidden uninitialized

Hides elements until the class is-uicc-initializedis added to any of its parent elements (e.g. directly on the htmltag).

In this demo inline script, we listen to the DOMContenLoaded event and then wait for 2.5 seconds until we add the class.

This element is hidden until the "is-uicc-initialized" is added to the "body" tag

<div class="uicc-hiddenUninitialized" style="height: 200px; padding: 1rem; background-color: turquoise;">This element is hidden until the "is-uicc-initialized" is added to the "body" tag</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
      document.querySelector('html').classList.add('is-uicc-initialized');
    }, 2500);
  });
</script>

Icon

Icons (SVG icons)

<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#add"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#arrow-down"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#arrow-downward"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#arrow-left"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#arrow-right"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#arrow-up"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#arrow-upward"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#calendar"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#check"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#clear"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#delete"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#edit"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#info-circle"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#more-horizontal"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#more-vertical"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#visibility-on"></use>
</svg>
<svg class="uicc-icon uicc-icon--hoverPrimary">
  <use xlink:href="./assets/icons.svg#visibility-off"></use>
</svg>

Icon (default):

By default, icons inherit their color from the parent element

<svg class="uicc-icon">
  <use xlink:href="./assets/icons.svg#check"></use>
</svg>

Icon (primary brand color)

<svg class="uicc-icon uicc-icon--primary">
  <use xlink:href="./assets/icons.svg#check"></use>
</svg>

Icon (light color)

<svg class="uicc-icon uicc-icon--light">
  <use xlink:href="./assets/icons.svg#edit"></use>
</svg>

Icon (inverted color)

<div class="uicc-region uicc-region--primary">
  <svg class="uicc-icon uicc-icon--inverted">
    <use xlink:href="./assets/icons.svg#edit"></use>
  </svg>
</div>

Icon (with circle)

<div class="uicc-region uicc-region--default">
  <svg class="uicc-icon uicc-icon--circle">
    <use xlink:href="./assets/icons.svg#arrow-right"></use>
  </svg>
</div>

<div class="uicc-region uicc-region--primary">
  <svg class="uicc-icon uicc-icon--circle uicc-icon--inverted">
    <use xlink:href="./assets/icons.svg#arrow-right"></use>
  </svg>
</div>

Input

Input (default)

<input type="text" class="uicc-input" placeholder="Placeholder ...">

Input (big)

<input type="text" class="uicc-input uicc-input--big" placeholder="Placeholder ...">

Input (stateful)

<input type="text" class="uicc-input uicc-input--stateful is-invalid">

Input (disabled)

<input type="text" class="uicc-input is-disabled" disabled value="input value">

Input (readonly)

<input type="text" class="uicc-input is-readonly" readonly value="input value">

Input (hidden)

Hide input element while still preserving accessibility features (i.e. tab order) and ensuring that its value gets submitted properly. CSS properties such as display: none or visibility: hidden will not work out. The reasons are:

the input value will not be sent to the server on form submit
the input will be excluded out of tab order.

<input type="text" class="uicc-input" value="visible input (press tab to focus next input - the hidden one)">
<input type="text" class="uicc-input is-hidden" value="input value">
<input type="text" class="uicc-input" value="another visible input (after the hidden one)">

Input (range / slider)

<input type="range" class="uicc-input">

Input (textarea)

<textarea class="uicc-input" placeholder="Type something in ..."></textarea>

File Input as Button

Choose File

<label class="uicc-button uicc-button--primary">
  <input type="file" class="uicc-input is-hidden">Choose File
</label>

Input Group

Input Group (with label and error message)

Titel

This is an error!

<label class="uicc-inputGroup">
  <span class="uicc-inputGroup__label">Titel</span>
  <input type="text" class="uicc-input uicc-input--stateful is-invalid" value="input value">
  <div class="uicc-inputGroup__subtext uicc-inputGroup__subtext--error">This is an error!</div>
</label>

Input Group (constrained width)

Titel

<label class="uicc-inputGroup uicc-inputGroup--constrainedWidth">
  <span class="uicc-inputGroup__label">Titel</span>
  <input type="text" class="uicc-input">
</label>

Input Group (aligned button)

Suchwort

<div class="uicc-grid uicc-grid--gutters">
  <div class="uicc-grid__cell">
    <label class="uicc-inputGroup">
      <span class="uicc-inputGroup__label">Suchwort</span>
      <input type="text" class="uicc-input">
    </label>
  </div>
  <div class="uicc-grid__cell">
    <button type="button" class="uicc-inputGroup__alignedButton uicc-button uicc-button--primary">Suchen</button>
  </div>
</div>

Input Icon

Input Icon (Default)

<div class="uicc-inputIcon">
  <input type="text" class="uicc-inputIcon__input uicc-input" value="input value">
  <svg class="uicc-inputIcon__icon uicc-icon uicc-icon--tiny">
    <use xlink:href="./assets/icons.svg#calendar"></use>
  </svg>
  <div class="uicc-inputIcon__tooltip">
    Tooltip content
    <br>
    <span class="uicc-fontSize uicc-fontSize--extraLarge">HTML allowed</span>
    <br>Line 2 ...
    <br>Line 3 ...
  </div>
</div>

Input Icon (Textarea)

<div class="uicc-inputIcon uicc-inputIcon--textarea">
  <textarea class="uicc-inputIcon__input uicc-input" placeholder="Type something in ..."></textarea>
  <svg class="uicc-inputIcon__icon uicc-icon uicc-icon--tiny">
    <use xlink:href="./assets/icons.svg#check"></use>
  </svg>
  <div class="uicc-inputIcon__tooltip">
    Tooltip content
    <br>
    <span class="uicc-fontSize uicc-fontSize--extraLarge">HTML allowed</span>
    <br>Line 2 ...
    <br>Line 3 ...
  </div>
</div>

Input Icon (Select)

<div class="uicc-inputIcon uicc-inputIcon--select">
  <select class="uicc-inputIcon__input uicc-select">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <svg class="uicc-inputIcon__icon uicc-icon uicc-icon--tiny">
    <use xlink:href="./assets/icons.svg#check"></use>
  </svg>
  <div class="uicc-inputIcon__tooltip">
    Tooltip content
    <br>
    <span class="uicc-fontSize uicc-fontSize--extraLarge">HTML allowed</span>
    <br>Line 2 ...
    <br>Line 3 ...
  </div>
</div>

Link

Link (default)

Text with an inline regular link.

<p>Text with an inline
  <a class="uicc-link" href="javascript:;">regular link</a>.</p>

Link (unobtrusive)

Text with an inline unobtrusive link.

<p>Text with an inline
  <a class="uicc-link uicc-link--unobtrusive" href="javascript:;">unobtrusive link</a>.</p>

List

List (default / no bullets)

List item 1
List item 2
List item 3

<ul class="uicc-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

List (bulleted)

List item 1
List item 2, that has content that goes over more than one line, it contains a lot of words. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
List item 3

<ul class="uicc-list uicc-list--bulleted">
  <li>List item 1</li>
  <li>List item 2, that has content that goes over more than one line, it contains a lot of words. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
  <li>List item 3</li>
</ul>

List (numbered)

List item 1
List item 2, that has content that goes over more than one line, it contains a lot of words. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
List item 3

<ol class="uicc-list uicc-list--numbered">
  <li>List item 1</li>
  <li>List item 2, that has content that goes over more than one line, it contains a lot of words. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
  <li>List item 3</li>
</ol>

List (without li elements)

If you need to force the list style on non-li elements, simply add the class uicc-list__itemto the list items.

List item 1

List item 2, that has content that goes over more than one line, it contains a lot of words. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

List item 3

<div class="uicc-list uicc-list--bulleted">
  <div class="uicc-list__item">List item 1</div>
  <div class="uicc-list__item">List item 2, that has content that goes over more than one line, it contains a lot of words. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt.</div>
  <div class="uicc-list__item">List item 3</div>
</div>

Loading Container

Add class is-loadingto show loading indicator

Loading Container (default)

Lorem ipsum

<div class="uicc-loadingContainer uicc-region uicc-region--primary uicc-row" id="test-loading-container1">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <div class="uicc-loadingContainer__loader">
    <div class="uicc-loadingContainer__dialog">
      <div class="uicc-loadingContainer__loadingIndicator uicc-loadingIndicator"></div>
    </div>
  </div>
</div>
<button class="uicc-button uicc-button--secondary" onclick="document.getElementById('test-loading-container1').classList.toggle('is-loading');">Toggle loading</button>

Loading Container (blocking)

Add class is-blockingto show blocking loading indicator

Lorem ipsum

<div class="uicc-loadingContainer uicc-region uicc-region--primary is-blocking uicc-row" id="test-loading-container2">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <div class="uicc-loadingContainer__loader">
    <div class="uicc-loadingContainer__dialog">
      <div class="uicc-loadingContainer__loadingIndicator uicc-loadingIndicator"></div>
    </div>
  </div>
</div>
<button class="uicc-button uicc-button--secondary" onclick="document.getElementById('test-loading-container2').classList.toggle('is-loading');">Toggle loading</button>

Loading Container (with message)

Lorem ipsum

Get plenty of sleep – if you can

<div class="uicc-loadingContainer uicc-region uicc-region--primary uicc-row" id="test-loading-container3">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <div class="uicc-loadingContainer__loader">
    <div class="uicc-loadingContainer__dialog">
      <span class="uicc-loadingContainer__loadingMessage">Get plenty of sleep – if you can</span>
      <div class="uicc-loadingContainer__loadingIndicator uicc-loadingIndicator"></div>
    </div>
  </div>
</div>
<button class="uicc-button uicc-button--secondary" onclick="document.getElementById('test-loading-container3').classList.toggle('is-loading');">Toggle loading</button>

Loading Indicator

The loading indicator is hidden in the demo page to avoid unnecessary memory consumption. You can reveal the loading indicator by clicking the button below:

<div class="uicc-row" id="loading-indicator-demo" style="display:none;">
  <div class="uicc-loadingIndicator"></div>
</div>
<p class="uicc-row">The loading indicator is hidden in the demo page to avoid unnecessary memory consumption. You can reveal the loading indicator
  by clicking the button below:</p>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('loading-indicator-demo').style.display = 'block';">Show loading indicator</button>

Add class is-opento morph burger icon into close icon

<div id="menu-toggle-demo" class="uicc-menuToggle">
  <span class="uicc-menuToggle__line"></span>
  <span class="uicc-menuToggle__line"></span>
  <span class="uicc-menuToggle__line"></span>
</div>
<script>
  document.getElementById("menu-toggle-demo").addEventListener('click', function(e) {
    e.currentTarget.classList.toggle('is-open');
  });
</script>

<script>
  function shpModalDemoOpen(id, animationClass) {
    var animationClasses = ['uicc-modal--bounceInDown', 'uicc-modal--slideInUp', 'uicc-modal--zoomIn',
      'uicc-modal--fadeIn'
    ];
    var element = document.getElementById(id);

    if (animationClass) {
      animationClasses.forEach(function(className) {
        element.classList.remove(className);
      });
      element.classList.add(animationClass);
    }

    var demoElement = document.getElementById(id);
    demoElement.classList.add('is-open');
    document.querySelector('html').classList.add('is-uicc-modal-open');
  }

  function shpModalDemoClose(id) {
    document.getElementById(id).classList.remove('is-open');
    document.querySelector('html').classList.remove('is-uicc-modal-open');
  }
</script>
<div class="uicc-modal" id="test-modal-open">
  <div class="uicc-modal__dialog">
    <div class="uicc-modal__header uicc-region">
      <div class="uicc-modal__headerContent">
        <div class="uicc-row uicc-row--extraSmallMargin">
          <h1 class="uicc-headline uicc-headline--h4 uicc-headline--primary">Modal Headline</h1>
        </div>
        <h2 class="uicc-headline uicc-headline--h6 uicc-headline--primary">Subheadline</h2>
      </div>
      <div class="uicc-modal__headerClose uicc-clickable uicc-clickable--touchy" aria-hidden="true" onclick="shpModalDemoClose('test-modal-open')">
        <svg class="uicc-icon">
          <use xlink:href="./assets/icons.svg#clear"></use>
        </svg>
      </div>
    </div>
    <div class="uicc-modal__content uicc-region">
      <div class="uicc-readingBlock">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
        ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent
        luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
        veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
        vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
        at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
        facer possim assum.
      </div>
    </div>
    <div class="uicc-modal__footer uicc-region">
      <div class="uicc-postfix uicc-postfix--between">
        <div class="uicc-postfix__fixed">
          <button type="button" class="uicc-button uicc-button--secondary uicc-button--wide" onclick="shpModalDemoClose('test-modal-open')">Close</button>
        </div>
        <div class="uicc-postfix__fixed">
          <button type="button" class="uicc-button uicc-button--primary uicc-button--wide">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-open')">Open modal</button>

No Wrap / No Line Breaks

do not break lines if the content exceeds the maximum horizontal space.

With no wrap: very long line with many words.

Without no wrap: very long line with many words.

<div style="max-width: 200px; background-color: red;">
  <div class="uicc-noWrap">With no wrap: very long line with many words.</div>
  <div>Without no wrap: very long line with many words.</div>
</div>

Off Canvas

Main Content

Left Off Canvas Content

Right Off Canvas Content

Bottom Off Canvas Content

<div class="uicc-offCanvas uicc-row" id="off-canvas-demo" style="height: 350px;">
  <div class="uicc-offCanvas__inner">
    <div class="uicc-offCanvas__on uicc-region uicc-region--secondary">
      Main Content
    </div>
    <div class="uicc-offCanvas__off uicc-offCanvas__off--left uicc-region uicc-region--primary">
      Left Off Canvas Content
    </div>
    <div class="uicc-offCanvas__off uicc-offCanvas__off--right uicc-region uicc-region--primary">
      Right Off Canvas Content
    </div>
    <div class="uicc-offCanvas__off uicc-offCanvas__off--bottom uicc-region uicc-region--primary">
      Bottom Off Canvas Content
    </div>
  </div>
</div>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('off-canvas-demo').classList.remove('is-open-right', 'is-open-bottom');document.getElementById('off-canvas-demo').classList.toggle('is-open-left');">Toggle left pane</button>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('off-canvas-demo').classList.remove('is-open-left', 'is-open-bottom');document.getElementById('off-canvas-demo').classList.toggle('is-open-right');">Toggle right pane</button>
<button class="uicc-button uicc-button--primary" onclick="document.getElementById('off-canvas-demo').classList.remove('is-open-left', 'is-open-right');document.getElementById('off-canvas-demo').classList.toggle('is-open-bottom');">Toggle bottom pane</button>

Page Layout

Click here to open example layout

Page Wrapper

This should be the most outer element of your page (a direct child of the body tag, but not the body tag itsef). Sets max-width and font-size.

...

<div class="uicc-pageWrapper">
  ...
</div>

Pagination

Pagination (start)

<div class="uicc-row">
  <nav class="uicc-pagination">
    <span class="uicc-pagination__item is-active">
      1
    </span>
    <a class="uicc-pagination__item" href="javascript:;">
      2
    </a>
    <a class="uicc-pagination__item" href="javascript:;">
      3
    </a>
    <a class="uicc-pagination__item" href="javascript:;">
      4
    </a>
    <a class="uicc-pagination__item" href="javascript:;">
      5
    </a>
    <span class="uicc-pagination__item">
      <svg class="uicc-icon">
        <use xlink:href="./assets/icons.svg#more-horizontal"></use>
      </svg>
    </span>
    <a class="uicc-pagination__item" href="javascript:;">
      999
    </a>
  </nav>
</div>

Pagination (middle)

<div class="uicc-row">
  <nav class="uicc-pagination">
    <a class="uicc-pagination__item" href="javascript:;">
      1
    </a>
    <span class="uicc-pagination__item">
      <svg class="uicc-icon">
        <use xlink:href="./assets/icons.svg#more-horizontal"></use>
      </svg>
    </span>
    <a class="uicc-pagination__item" href="javascript:;">
      99
    </a>
    <span class="uicc-pagination__item is-active">
      100
    </span>
    <a class="uicc-pagination__item" href="javascript:;">
      101
    </a>
    <span class="uicc-pagination__item">
      <svg class="uicc-icon">
        <use xlink:href="./assets/icons.svg#more-horizontal"></use>
      </svg>
    </span>
    <a class="uicc-pagination__item" href="javascript:;">
      999
    </a>
  </nav>
</div>

Pagination (end)

<div class="uicc-row">
  <nav class="uicc-pagination">
    <a class="uicc-pagination__item" href="javascript:;">
      1
    </a>
    <span class="uicc-pagination__item">
      <svg class="uicc-icon">
        <use xlink:href="./assets/icons.svg#more-horizontal"></use>
      </svg>
    </span>
    <a class="uicc-pagination__item" href="javascript:;">
      995
    </a>
    <a class="uicc-pagination__item" href="javascript:;">
      996
    </a>
    <a class="uicc-pagination__item" href="javascript:;">
      997
    </a>
    <a class="uicc-pagination__item" href="javascript:;">
      998
    </a>
    <span class="uicc-pagination__item is-active">
      999
    </span>
  </nav>
</div>

Paragraph

Paragraphs have a defined line height and bottom margin

Paragraph (default)

Paragraph are optimized for legibility. Numbers are displayed in old style letters: 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-paragraph">
  Paragraph are optimized for legibility. Numbers are displayed in old style letters: 0123456789. Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div class="uicc-paragraph">
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
  feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit
  praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
  option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
<div class="uicc-paragraph">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  aliquam erat volutpat.
</div>

Paragraph (no margin)

If only the line height should be applied, the bottom margin can be disabled using the uicc-paragraph--noMarginmodifier.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-paragraph uicc-paragraph--noMargin">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  ex ea commodo consequat.
</div>
<div class="uicc-paragraph uicc-paragraph--noMargin">
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
  feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit
  praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
  option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
<div class="uicc-paragraph uicc-paragraph--noMargin">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  aliquam erat volutpat.
</div>

Postfix

Postfixed elements consist of one or more fixed elements plus one ore more fluid elements taking up all the remaining space.

The modifiers uicc-postfix--guttersor uicc-postfix--bigGuttersadd spacing between the postfix contents. Just leave them out, if you don't need spacing.

Postfix (Default)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-row">
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
  <button class="uicc-postfix__fixed uicc-button uicc-button--primary" type="submit">
    <svg class="uicc-button__icon uicc-icon">
      <use xlink:href="./assets/icons.svg#arrow-right"></use>
    </svg>
  </button>
</div>

Postfix (as Prefix)

By changing the order of the uicc-postfix__fixedand uicc-postfix__fluidelements in the markup, you can use "postfix" as "prefix".

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-row">
  <button class="uicc-postfix__fixed uicc-button uicc-button--primary" type="submit">
    <svg class="uicc-button__icon uicc-icon">
      <use xlink:href="./assets/icons.svg#arrow-right"></use>
    </svg>
  </button>
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
</div>

Postfix (Stacked on tiny screens)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-postfix--tiny-stacked">
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
  <button class="uicc-postfix__fixed uicc-button uicc-button--primary" type="submit">
    <svg class="uicc-button__icon uicc-icon">
      <use xlink:href="./assets/icons.svg#arrow-right"></use>
    </svg>
  </button>
</div>

Postfix (Stacked on small and tiny screens)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-postfix--small-stacked">
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
  <button class="uicc-postfix__fixed uicc-button uicc-button--primary" type="submit">
    <svg class="uicc-button__icon uicc-icon">
      <use xlink:href="./assets/icons.svg#arrow-right"></use>
    </svg>
  </button>
</div>

Postfix (Stacked on medium and smaller screens)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-postfix--medium-stacked">
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
  <button class="uicc-postfix__fixed uicc-button uicc-button--primary" type="submit">
    <svg class="uicc-button__icon uicc-icon">
      <use xlink:href="./assets/icons.svg#arrow-right"></use>
    </svg>
  </button>
</div>

Postfix (center)

Vertically centered contents

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-postfix--center">
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
  <svg class="uicc-postfix__fixed uicc-icon uicc-icon--primary uicc-icon--big">
    <use xlink:href="./assets/icons.svg#check"></use>
  </svg>
</div>

Postfix (bottom)

Vertically bottom aligned contents

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div class="uicc-postfix uicc-postfix--gutters uicc-postfix--bottom">
  <div class="uicc-postfix__fluid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</div>
  <svg class="uicc-postfix__fixed uicc-icon uicc-icon--primary uicc-icon--big">
    <use xlink:href="./assets/icons.svg#more-horizontal"></use>
  </svg>
</div>

Postfix (between)

Use maximum spacing between the elements

<div class="uicc-postfix uicc-postfix--between">
  <svg class="uicc-postfix__fixed uicc-icon uicc-icon--primary uicc-icon--big">
    <use xlink:href="./assets/icons.svg#arrow-left"></use>
  </svg>
  <svg class="uicc-postfix__fixed uicc-icon uicc-icon--primary uicc-icon--big">
    <use xlink:href="./assets/icons.svg#arrow-right"></use>
  </svg>
</div>

Radio Button

Radio Button (default)

Radio Button 1 Radio Button 2

<label class="uicc-radio">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-default">
  <span class="uicc-radio__label">Radio Button 1</span>
</label>
<label class="uicc-radio">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-default">
  <span class="uicc-radio__label">Radio Button 2</span>
</label>

Radio Button (inline)

Radio Button 1 Radio Button 2

<label class="uicc-radio uicc-radio--inline">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-inline">
  <span class="uicc-radio__label">Radio Button 1</span>
</label>
<label class="uicc-radio uicc-radio--inline">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-inline">
  <span class="uicc-radio__label">Radio Button 2</span>
</label>

Radio (disabled)

Radio 1 Radio 2

<label class="uicc-checkbox is-disabled">
  <input type="checkbox" class="uicc-checkbox__control" disabled>
  <span class="uicc-checkbox__label">Radio 1</span>
</label>
<label class="uicc-checkbox is-disabled">
  <input type="checkbox" class="uicc-checkbox__control" disabled checked>
  <span class="uicc-checkbox__label">Radio 2</span>
</label>

Radio Button (small)

Radio Button 1 Radio Button 2

<label class="uicc-radio uicc-radio--small">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-small">
  <span class="uicc-radio__label">Radio Button 1</span>
</label>
<label class="uicc-radio uicc-radio--small">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-small">
  <span class="uicc-radio__label">Radio Button 2</span>
</label>

Radio Button (big)

Yes, please subscribe me to your email list. No, please leave me alone

<label class="uicc-radio uicc-radio--big">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-big">
  <span class="uicc-radio__label">Yes, please subscribe me to your email list.</span>
</label>
<label class="uicc-radio uicc-radio--big">
  <input type="radio" class="uicc-radio__control" name="uicc-radio-demo-big">
  <span class="uicc-radio__label">No, please leave me alone</span>
</label>

Radio Button (Fake)

You can visually fake radioes without using <input type="radio">form elements. Please make sure to toggle the class is-checkedon the uicc-radioelement.

Radio Button 1 Radio Button 2

<label class="uicc-radio">
  <span class="uicc-radio__label" onclick="this.parentElement.classList.toggle('is-checked')">Radio Button 1</span>
</label>
<label class="uicc-radio">
  <span class="uicc-radio__label" onclick="this.parentElement.classList.toggle('is-checked')">Radio Button 2</span>
</label>

Reading Block

Reading blocks have a constrained width for better readability

Reading Block (default)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<div class="uicc-readingBlock">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
    possim assum.</p>
</div>

Reading Block (columns)

Flows the text into two columns on large screens

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<div class="uicc-readingBlock uicc-readingBlock--columns">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
    possim assum.</p>
</div>

Region

Regions have nice paddings and different background colors depending on their type

Region (default)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--default">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (primary)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--primary">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (secondary)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--secondary">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (focusable)

Highlight the region if an element inside that region is focused

<div class="uicc-region uicc-region--secondary uicc-region--focusable">
  <input type="text" class="uicc-input" placeholder="Placeholder ...">
</div>

Region (small)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--secondary uicc-region--small">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (big)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--secondary uicc-region--big">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (rounded)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--secondary uicc-region--rounded">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (vertical only)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--secondary uicc-region--verticalOnly">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (horizontal only)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="uicc-region uicc-region--secondary uicc-region--horizontalOnly">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  <a href="javascript:;">dolore magna aliquam erat volutpat</a>.
</div>

Region (example layout):

[LOGO]

Sie haben Ihr Passwort vergessen?

Geben Sie Ihre E-Mail-Adresse an, um Ihr Passwort zurückzusetzen:

<div class="uicc-pageWrapper">
  <div class="uicc-region uicc-region--secondary">
    <div class="uicc-region uicc-centered uicc-centered--horizontally uicc-row uicc-row--bigMargin">
      [LOGO]
    </div>
    <h2 class="uicc-headline uicc-headline--h3 uicc-headline--text uicc-headline--firstInText ">Sie haben Ihr Passwort vergessen?</h2>
    <div class="uicc-region uicc-region--big uicc-region--primary uicc-region--focusable">
      <label class="uicc-row uicc-row--extraBigMargin">Geben Sie Ihre E-Mail-Adresse an, um Ihr Passwort zurückzusetzen:
        <input type="text" class="uicc-input" placeholder="me@mail.com">
      </label>
    </div>
  </div>
</div>

Row

Row (default)

Rows have a defined bottom margin

Row 1

Row 2

Row 3

<div class="uicc-row">
  Row 1
</div>
<div class="uicc-row">
  Row 2
</div>
<div class="uicc-row">
  Row 3
</div>

Row (with separator)

Row 1

Row 2

Row 3

<div class="uicc-row uicc-row--withSeparator">
  Row 1
</div>
<div class="uicc-row uicc-row--withSeparator">
  Row 2
</div>
<div class="uicc-row uicc-row--withSeparator">
  Row 3
</div>

Row (with small margin)

Row 1

Row 2

Row 3

Row 4 (with separator)

Row 5 (with separator)

Row 6 (with separator)

<div class="uicc-row uicc-row--smallMargin">
  Row 1
</div>
<div class="uicc-row uicc-row--smallMargin">
  Row 2
</div>
<div class="uicc-row uicc-row--smallMargin">
  Row 3
</div>
<div class="uicc-row uicc-row--smallMargin uicc-row--withSeparator">
  Row 4 (with separator)
</div>
<div class="uicc-row uicc-row--smallMargin uicc-row--withSeparator">
  Row 5 (with separator)
</div>
<div class="uicc-row uicc-row--smallMargin uicc-row--withSeparator">
  Row 6 (with separator)
</div>

Row (with extra small margin)

Row 1

Row 2

Row 3

Row 4 (with separator)

Row 5 (with separator)

Row 6 (with separator)

<div class="uicc-row uicc-row--extraSmallMargin">
  Row 1
</div>
<div class="uicc-row uicc-row--extraSmallMargin">
  Row 2
</div>
<div class="uicc-row uicc-row--extraSmallMargin">
  Row 3
</div>
<div class="uicc-row uicc-row--extraSmallMargin uicc-row--withSeparator">
  Row 4 (with separator)
</div>
<div class="uicc-row uicc-row--extraSmallMargin uicc-row--withSeparator">
  Row 5 (with separator)
</div>
<div class="uicc-row uicc-row--extraSmallMargin uicc-row--withSeparator">
  Row 6 (with separator)
</div>

Row (with big margin)

Row 1

Row 2

Row 3

Row 4 (with separator)

Row 5 (with separator)

Row 6 (with separator)

<div class="uicc-row uicc-row--bigMargin">
  Row 1
</div>
<div class="uicc-row uicc-row--bigMargin">
  Row 2
</div>
<div class="uicc-row uicc-row--bigMargin">
  Row 3
</div>
<div class="uicc-row uicc-row--bigMargin uicc-row--withSeparator">
  Row 4 (with separator)
</div>
<div class="uicc-row uicc-row--bigMargin uicc-row--withSeparator">
  Row 5 (with separator)
</div>
<div class="uicc-row uicc-row--bigMargin uicc-row--withSeparator">
  Row 6 (with separator)
</div>

Row (with extra big margin)

Row 1

Row 2

Row 3

Row 4 (with separator)

Row 5 (with separator)

Row 6 (with separator)

<div class="uicc-row uicc-row--extraBigMargin">
  Row 1
</div>
<div class="uicc-row uicc-row--extraBigMargin">
  Row 2
</div>
<div class="uicc-row uicc-row--extraBigMargin">
  Row 3
</div>
<div class="uicc-row uicc-row--extraBigMargin uicc-row--withSeparator">
  Row 4 (with separator)
</div>
<div class="uicc-row uicc-row--extraBigMargin uicc-row--withSeparator">
  Row 5 (with separator)
</div>
<div class="uicc-row uicc-row--extraBigMargin uicc-row--withSeparator">
  Row 6 (with separator)
</div>

Row (inverse)

Inverse rows have a top margin instead of a bottom margin

Row 1

Row 2

Row 3

Row 4 (with separator)

Row 5 (with separator)

Row 6 (with separator)

<div class="uicc-row uicc-row--inverse">
  Row 1
</div>
<div class="uicc-row uicc-row--inverse">
  Row 2
</div>
<div class="uicc-row uicc-row--inverse">
  Row 3
</div>
<div class="uicc-row uicc-row--inverse uicc-row--extraBigMargin uicc-row--withSeparator">
  Row 4 (with separator)
</div>
<div class="uicc-row uicc-row--inverse uicc-row--extraBigMargin uicc-row--withSeparator">
  Row 5 (with separator)
</div>
<div class="uicc-row uicc-row--inverse uicc-row--extraBigMargin uicc-row--withSeparator">
  Row 6 (with separator)
</div>

Screen Dimension

Screen Dimension (height)

Set the height of an element to the height of the screen

Window-tall element

<div class="uicc-screenDimension uicc-screenDimension--height" style="background-color: lightblue;">
  <div style="background: lighblue;">Window-tall element</div>
</div>

Screen Margin

Screen Margin (default)

Add left/right margin to block to avoid clashing with the screen border.

Test

<div class="uicc-screenMargin">
  <div style="background: green">Test</div>
</div>

Screen Margin (smallNone):

No margin on small screens

Test

<div class="uicc-screenMargin uicc-screenMargin--smallNone">
  <div style="background: green">Test</div>
</div>

Screen Margins (Nested):

Nested screen margins get ignored

Outer

Inner

<div class="uicc-screenMargin">
  <div style="background: green">
    Outer
    <div class="uicc-screenMargin">
      <div style="background: orange">Inner</div>
    </div>
  </div>
</div>

Scrollable

Scrollable (Background hint)

Test

<div class="uicc-scrollable uicc-scrollable--backgroundHint uicc-scrollable--default" tabindex="0">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

Scrollable (Scrollbars)

Test

<div class="uicc-scrollable uicc-scrollable--scrollbars uicc-scrollable--default" tabindex="0">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

Select

Select (default)

<select class="uicc-select">
  <option class="uicc-select__option">Option 1</option>
  <option class="uicc-select__option">Option 2</option>
  <option class="uicc-select__option">Option 3</option>
  <option class="uicc-select__option">Option 4</option>
  <option class="uicc-select__option">Option 5</option>
  <option class="uicc-select__option">Option 6</option>
  <option class="uicc-select__option">Option 7</option>
</select>

Select (expanded)

<select class="uicc-select" size="5">
  <option class="uicc-select__option">Option 1</option>
  <option class="uicc-select__option">Option 2</option>
  <option class="uicc-select__option">Option 3</option>
  <option class="uicc-select__option">Option 4</option>
  <option class="uicc-select__option">Option 5</option>
  <option class="uicc-select__option">Option 6</option>
  <option class="uicc-select__option">Option 7</option>
</select>

Select (multiple)

<select class="uicc-select" size="5" multiple>
  <option class="uicc-select__option">Option 1</option>
  <option class="uicc-select__option">Option 2</option>
  <option class="uicc-select__option">Option 3</option>
  <option class="uicc-select__option">Option 4</option>
  <option class="uicc-select__option">Option 5</option>
  <option class="uicc-select__option">Option 6</option>
  <option class="uicc-select__option">Option 7</option>
</select>

Separator

Separator (default)

<hr class="uicc-separator">
<hr class="uicc-separator uicc-separator--primary">
<hr class="uicc-separator uicc-separator--secondary">

Separator (big):

<hr class="uicc-separator uicc-separator--big">
<hr class="uicc-separator uicc-separator--big uicc-separator--primary">
<hr class="uicc-separator uicc-separator--big uicc-separator--secondary">

Separator (fade):

<hr class="uicc-separator uicc-separator--big uicc-separator--fade">
<hr class="uicc-separator uicc-separator--big uicc-separator--fade uicc-separator--primary">
<hr class="uicc-separator uicc-separator--big uicc-separator--fade uicc-separator--secondary">

Slider

You have to adjust two attributes: data-slides-countshould contain the total number of slides and data-active-slideshould contain the index of the currently active slide. You need to provide your own navigation controls to alter the data-active-slideattribute value.

Slider (unstyled)

This slider works with a minimum of styling in order to be very versatile.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

1
2
3
4
5

<div class="uicc-slider uicc-row" id="uicc-slider-demo" data-slides-count="5" data-active-slide="1">
  <div class="uicc-slider__slides">

    <article class="uicc-slider__slide">
      <div class="uicc-centered uicc-centered--vertically uicc-centered--horizontally" style="height: 100px; background: coral">Slide 1</div>
    </article>

    <article class="uicc-slider__slide">
      <div class="uicc-centered uicc-centered--vertically uicc-centered--horizontally" style="height: 120px; background: gold">Slide 2</div>
    </article>

    <article class="uicc-slider__slide">
      <div class="uicc-centered uicc-centered--vertically uicc-centered--horizontally" style="height: 70px; background: silver">Slide 3</div>
    </article>

    <article class="uicc-slider__slide">
      <div class="uicc-centered uicc-centered--vertically uicc-centered--horizontally" style="height: 150px; background: pink">Slide 4</div>
    </article>

    <article class="uicc-slider__slide">
      <div class="uicc-centered uicc-centered--vertically uicc-centered--horizontally" style="height: 100px; background: lightblue">Slide 5</div>
    </article>

  </div>
</div>

<!-- this is just a dummy navigation - please at least replace the inline onclick handlers when copying -->
<div class="uicc-centered uicc-centered--horizontally">
  <ol class="uicc-col uicc-pagination">
    <li class="uicc-pagination__item is-active">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo').setAttribute('data-active-slide', '1');">1</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo').setAttribute('data-active-slide', '2');">2</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo').setAttribute('data-active-slide', '3');">3</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo').setAttribute('data-active-slide', '4');">4</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo').setAttribute('data-active-slide', '5');">5</span>
    </li>
  </ol>
</div>

Slider (cards)

Slide 1

Slide 2

Slide 3

Slide 4

1
2
3
4

<div class="uicc-slider uicc-row" id="uicc-slider-demo-cards" data-slides-count="4" data-active-slide="1">
  <div class="uicc-slider__slides">

    <article class="uicc-slider__slide uicc-slider__slide--card">
      <div class="uicc-slider__card" style="height: 100px;">Slide 1</div>
    </article>

    <article class="uicc-slider__slide uicc-slider__slide--card">
      <div class="uicc-slider__card" style="height: 120px;">Slide 2</div>
    </article>

    <article class="uicc-slider__slide uicc-slider__slide--card">
      <div class="uicc-slider__card" style="height: 70px;">Slide 3</div>
    </article>

    <article class="uicc-slider__slide uicc-slider__slide--card">
      <div class="uicc-slider__card" style="height: 150px;">Slide 4</div>
    </article>

  </div>
</div>

<!-- this is just a dummy navigation - please at least replace the inline onclick handlers when copying -->
<div class="uicc-centered uicc-centered--horizontally">
  <ol class="uicc-col uicc-pagination">
    <li class="uicc-pagination__item is-active">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo-cards').setAttribute('data-active-slide', '1');">1</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo-cards').setAttribute('data-active-slide', '2');">2</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo-cards').setAttribute('data-active-slide', '3');">3</span>
    </li>
    <li class="uicc-pagination__item">
      <span class="uicc-pagination__link uicc-clickable uicc-clickable--touchy" onclick="this.parentNode.parentNode.querySelector('.is-active').classList.remove('is-active'); this.parentNode.classList.add('is-active'); document.getElementById('uicc-slider-demo-cards').setAttribute('data-active-slide', '4');">4</span>
    </li>
  </ol>
</div>

Sticky Table

The Sticky Table component enhances the existing table component with the capability to make EITHER the first column OR the header rows sticky. The remaining columns/rows then will be scrollable if they do not fit into the available space.

Each table cell requires the class uicc-stickyTable__cell.

Table (sticky column):

Add the class uicc-stickyTable--columnto make the table horizontally scrollable while fixing the first column.

Specify the width of the sticky column by applying the classes uicc-stickyTable--stickyColumnWidth-50, uicc-stickyTable--stickyColumnWidth-60, ... uicc-stickyTable--stickyColumnWidth-100, uicc-stickyTable--stickyColumnWidth-150, ... uicc-stickyTable--stickyColumnWidth-700

If the height of the sticky columns differs from the height of the non-sticky columns then you should set an explicit height at the row level by applying the classes uicc-table__row--35, uicc-table__row--40, ... uicc-table__row--120

Headline	A Text	B Num	C Num	D	E	F	G	H	I	J	K	L with long column title	M	N	O	P	Q	R
Headline 1	Cell 1 - a	4323.46	192.565	4323.46	192.565	4323.46	192.565	4323.46	192.565	4323.46	192.565	4323.46	0	0	192.565	4323.46	192.565	4323.46
Headline 2	Cell 2 - a	10107.43	667.01	10107.43	667.01	10107.43	667.01	10107.43	667.01	10107.43	667.01	10107.43	0	10107.43	667.01	10107.43	667.01	10107.43
Headline 3	Cell 3 - a	980.20	1001.24	980.20	1001.24	980.20	0	980.20	1001.24	980.20	1001.24	980.20	1001.24	980.20	1001.24	980.20	1001.24	980.20

<div class="uicc-stickyTable uicc-stickyTable--column uicc-stickyTable--stickyColumnWidth-100">
  <div class="uicc-stickyTable__scroller">
    <table class="uicc-table uicc-table--bordered">
      <thead>
        <tr class="uicc-table__row">
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline">Headline</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline">A Text</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">B Num</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">C Num</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">D</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">E</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">F</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">G</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">H</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">I</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">J</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">K</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">L with long column title</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">M</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">N</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">O</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">P</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">Q</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">R</th>
        </tr>
      </thead>
      <tbody>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 1</td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 1 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 2</td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 2 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 3 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table (multiple sticky columns):

The sticky table only supports making the first column sticky. If you need to have more than one sticky columns then you can create a uicc-stickyTable__subTabletable within the first column.

You also need to specify the width of the sub table columns by applying the classes uicc-table__cell--20, uicc-table__cell--25, ... uicc-table__cell--700to make sure that all sub tables share the same dimensions.

Headline	Sticky 2	Sticky 3

A Text

B Num

C Num

D

E

F

G

H

I

J

K

L with long column title

M

N

O

P

Q

R

Headline 1

live

120.000

Cell 1 - a

4323.46

192.565

4323.46

192.565

4323.46

192.565

4323.46

192.565

4323.46

192.565

4323.46

0

192.565

4323.46

192.565

4323.46

Headline 2

live

95.000

Cell 2 - a

10107.43

667.01

10107.43

667.01

10107.43

667.01

10107.43

667.01

10107.43

667.01

10107.43

0

10107.43

667.01

10107.43

667.01

10107.43

Headline 3

pending

120.000

Cell 3 - a

980.20

1001.24

980.20

1001.24

980.20

0

980.20

1001.24

980.20

1001.24

980.20

1001.24

980.20

1001.24

980.20

1001.24

980.20

<div class="uicc-stickyTable uicc-stickyTable--column uicc-stickyTable--stickyColumnWidth-300">
  <div class="uicc-stickyTable__scroller">
    <table class="uicc-table uicc-table--bordered">
      <thead>
        <tr class="uicc-table__row">
          <th class="uicc-stickyTable__cell">
            <table class="uicc-stickyTable__subTable uicc-table">
              <tr class="uicc-table__row">
                <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--150">Headline</th>
                <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--75">Sticky 2</th>
                <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--75">Sticky 3</th>
              </tr>
            </table>
          </th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline">A Text</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">B Num</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">C Num</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">D</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">E</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">F</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">G</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">H</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">I</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">J</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">K</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">L with long column title</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">M</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">N</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">O</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">P</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">Q</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">R</th>
        </tr>
      </thead>
      <tbody>
        <tr class="uicc-table__row uicc-table__row">
          <td class="uicc-stickyTable__cell">
            <table class="uicc-stickyTable__subTable uicc-table">
              <tr class="uicc-table__row">
                <td class="uicc-table__cell uicc-table__cell--150 uicc-text uicc-text--bold">Headline 1</tD>
                <td class="uicc-table__cell uicc-table__cell--75">live</td>
                <td class="uicc-table__cell uicc-table__cell--75">120.000</td>
              </tr>
            </table>
          </td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 1 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell">
            <table class="uicc-stickyTable__subTable uicc-table">
              <tr class="uicc-table__row">
                <td class="uicc-table__cell uicc-table__cell--150 uicc-text uicc-text--bold">Headline 2</tD>
                <td class="uicc-table__cell uicc-table__cell--75">live</td>
                <td class="uicc-table__cell uicc-table__cell--75">95.000</td>
              </tr>
            </table>
          </td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 2 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell">
            <table class="uicc-stickyTable__subTable uicc-table">
              <tr class="uicc-table__row">
                <td class="uicc-table__cell uicc-table__cell--150 uicc-text uicc-text--bold">Headline 3</tD>
                <td class="uicc-table__cell uicc-table__cell--75">pending</td>
                <td class="uicc-table__cell uicc-table__cell--75">120.000</td>
              </tr>
            </table>
          </td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 3 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table (sticky last column):

Add the class uicc-stickyTable--lastColumnto make the table horizontally scrollable while fixing the first column. Specify the width of the last sticky column by applying the classes uicc-stickyTable--stickyLastColumnWidth-50, uicc-stickyTable--stickyColumnWidth-60, ... uicc-stickyTable--stickyColumnWidth-100

The sticky last column can also be combined with the sticky first column (the default)

Headline	A Text	B Num	C Num	D	E	F	G	H	I	J	K	L with long column title	M	N	O	P	Q	R
Headline 1	Cell 1 - a	4323.46	192.565	4323.46	192.565	4323.46	192.565	4323.46	192.565	4323.46	192.565	4323.46	0	0	192.565	4323.46	192.565	4323.46
Headline 2	Cell 2 - a	10107.43	667.01	10107.43	667.01	10107.43	667.01	10107.43	667.01	10107.43	667.01	10107.43	0	10107.43	667.01	10107.43	667.01	10107.43
Headline 3	Cell 3 - a	980.20	1001.24	980.20	1001.24	980.20	0	980.20	1001.24	980.20	1001.24	980.20	1001.24	980.20	1001.24	980.20	1001.24	980.20

<div class="uicc-stickyTable uicc-stickyTable--column uicc-stickyTable--lastColumn uicc-stickyTable--stickyColumnWidth-100 uicc-stickyTable--stickyLastColumnWidth-50">
  <div class="uicc-stickyTable__scroller">
    <table class="uicc-table uicc-table--bordered">
      <thead>
        <tr class="uicc-table__row">
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline">Headline</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline">A Text</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">B Num</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">C Num</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">D</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">E</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">F</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">G</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">H</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">I</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">J</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">K</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">L with long column title</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">M</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">N</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">O</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">P</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">Q</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">R</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--headline uicc-table__cell--actions uicc-table__cell--separatorLeft">&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr class="uicc-table__row uicc-table__row--45">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 1</td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 1 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--actions uicc-table__cell--separatorLeft">
            <a href="javascript:;" class="uicc-table__action" title="edit">
              <svg class="uicc-icon uicc-icon--hoverPrimary uicc-icon--small">
                <use xlink:href="./assets/icons.svg#edit"></use>
              </svg>
            </a>
          </td>
        </tr>
        <tr class="uicc-table__row uicc-table__row--45">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 2</td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 2 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--actions uicc-table__cell--separatorLeft">
            <a href="javascript:;" class="uicc-table__action" title="edit">
              <svg class="uicc-icon uicc-icon--hoverPrimary uicc-icon--small">
                <use xlink:href="./assets/icons.svg#edit"></use>
              </svg>
            </a>
          </td>
        </tr>
        <tr class="uicc-table__row uicc-table__row--45">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell">Cell 3 - a</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">0</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--actions uicc-table__cell--separatorLeft">
            <a href="javascript:;" class="uicc-table__action" title="edit">
              <svg class="uicc-icon uicc-icon--hoverPrimary uicc-icon--small">
                <use xlink:href="./assets/icons.svg#edit"></use>
              </svg>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Add the class uicc-stickyTable--rowto make the table vertically scrollable while fixing the header.

You also need to restrict the height of the table (e.g. style="height: 300px;").

Specify the height of the sticky header by applying the classes uicc-stickyTable--stickyHeaderHeight-20, uicc-stickyTable--stickyHeaderHeight-25, uicc-stickyTable--stickyHeaderHeight-30... uicc-stickyTable--stickyHeaderHeight-300

Make sure that the cells in the header have the same width as the cells in the body by applying the appropriate table cell modifiers ( uicc-table__cell--20, uicc-table__cell--30etc.).

Headline	A Text	B Numeric	C	D
Headline 1	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	4323.46	192.565	4323.46
Headline 2	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	10107.43	667.01	10107.43
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20
Headline 3	Lorem ipsum dolor sit amet, consectetuer adipiscing elit	980.20	1001.24	980.20

<div class="uicc-stickyTable uicc-stickyTable--header uicc-stickyTable--stickyHeaderHeight-35" style="height: 300px">
  <div class="uicc-stickyTable__scroller">
    <table class="uicc-table uicc-table--bordered">
      <thead class="uicc-stickyTable__header">
        <tr class="uicc-table__row">
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell uicc-table__cell--150 uicc-table__cell--headline">Headline</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120 uicc-table__cell--headline">A Text</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--headline uicc-table__cell--numeric">B Numeric</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--headline uicc-table__cell--numeric">C</th>
          <th class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--headline uicc-table__cell--numeric">D</th>
        </tr>
      </thead>
      <tbody>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--150 uicc-text uicc-text--bold">Headline 1</td>
          <td class="uicc-stickyTable__cell uicc-table__cell--120 uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">4323.46</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">192.565</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">4323.46</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 2</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">10107.43</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">667.01</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">10107.43</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
        <tr class="uicc-table__row">
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-text uicc-text--bold">Headline 3</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--120">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">1001.24</td>
          <td class="uicc-stickyTable__cell uicc-table__cell uicc-table__cell--80 uicc-table__cell--numeric">980.20</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table

You can force full-width tables by adding the uicc-table--blockmodifier to the table element.

Add the uicc-table__cell--numericmodifier to table cells containing numeric values.

Wrap tables in a (figure) element with the class uicc-tableWrapperto add a nice background (that also fills the whitespace at the righthand side of narrow tables)

Table (bordered):

Headline	A Text	B Num	C Num
Headline 1	Cell 1 - a	4323.46	192.565
Headline 2	Cell 2 - a	10107.43	667.01
Headline 3	Cell 3 - a	980.20	1001.24
Headline 3	Cell 3 - a	980.20	1001.24

<figure class="uicc-tableWrapper">
  <table class="uicc-table uicc-table--data uicc-table--bordered uicc-table--responsiveSmallDown">
    <thead>
      <tr class="uicc-table__row">
        <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--contentAsResponsiveHeadline">Headline</th>
        <th class="uicc-table__cell uicc-table__cell--headline">A Text</th>
        <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">B Num</th>
        <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--numeric">C Num</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 1</td>
        <td class="uicc-table__cell" data-uicc-th="Col A (text)">Cell 1 - a</td>
        <td class="uicc-table__cell uicc-table__cell--numeric" data-uicc-th="Col B (numeric)">4323.46</td>
        <td class="uicc-table__cell uicc-table__cell--numeric" data-uicc-th="Col C (numeric)">192.565</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 2</td>
        <td class="uicc-table__cell" data-uicc-th="Col A (text)">Cell 2 - a</td>
        <td class="uicc-table__cell uicc-table__cell--numeric" data-uicc-th="Col B (numeric)">10107.43</td>
        <td class="uicc-table__cell uicc-table__cell--numeric" data-uicc-th="Col C (numeric)">667.01</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 3</td>
        <td class="uicc-table__cell" data-uicc-th="Col A (text)">Cell 3 - a</td>
        <td class="uicc-table__cell uicc-table__cell--numeric" data-uicc-th="Col B (numeric)">980.20</td>
        <td class="uicc-table__cell uicc-table__cell--numeric" data-uicc-th="Col C (numeric)">1001.24</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--highlight uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 3</td>
        <td class="uicc-table__cell uicc-table__cell--highlight" data-uicc-th="Col A (text)">Cell 3 - a</td>
        <td class="uicc-table__cell uicc-table__cell--highlight uicc-table__cell--numeric" data-uicc-th="Col B (numeric)">980.20</td>
        <td class="uicc-table__cell uicc-table__cell--highlight uicc-table__cell--numeric" data-uicc-th="Col C (numeric)">1001.24</td>
        <td class="uicc-table__cell uicc-table__cell--highlight uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

Table (hover rows):

Add uicc-table--hoverclass to the tableelement to highlight rows on hover.

Headline	Col A	Col B	Col C
Headline 1	Cell 1 - a	Cell 1 - b	Cell 1 - c
Headline 2	Cell 2 - a	Cell 2 - b	Cell 2 - c
Headline 3	Cell 3 - a	Cell 3 - b	Cell 3 - c

<figure class="uicc-tableWrapper">
  <table class="uicc-table uicc-table--data uicc-table--hover uicc-table--responsiveSmallDown">
    <thead>
      <tr class="uicc-table__row">
        <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--contentAsResponsiveHeadline">Headline</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Col A</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Col B</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Col C</th>
        <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--separatorLeft">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 1</td>
        <td class="uicc-table__cell" data-uicc-th="Col A">Cell 1 - a</td>
        <td class="uicc-table__cell" data-uicc-th="Col B">Cell 1 - b</td>
        <td class="uicc-table__cell" data-uicc-th="Col C">Cell 1 - c</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline uicc-table__cell--separatorLeft">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 2</td>
        <td class="uicc-table__cell" data-uicc-th="Col A">Cell 2 - a</td>
        <td class="uicc-table__cell" data-uicc-th="Col B">Cell 2 - b</td>
        <td class="uicc-table__cell" data-uicc-th="Col C">Cell 2 - c</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline uicc-table__cell--separatorLeft">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 3</td>
        <td class="uicc-table__cell" data-uicc-th="Col A">Cell 3 - a</td>
        <td class="uicc-table__cell" data-uicc-th="Col B">Cell 3 - b</td>
        <td class="uicc-table__cell" data-uicc-th="Col C">Cell 3 - c</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline uicc-table__cell--separatorLeft">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

Table (compact):

Add uicc-table--compactclass to render the table more compact

Headline	Col A	Col B	Col C
Headline 1	Cell 1 - a	Cell 1 - b	Cell 1 - c
Headline 2	Cell 2 - a	Cell 2 - b	Cell 2 - c
Headline 3	Cell 3 - a	Cell 3 - b	Cell 3 - c

<figure class="uicc-tableWrapper">
  <table class="uicc-table uicc-table--data uicc-table--compact uicc-table--responsiveSmallDown">
    <thead>
      <tr class="uicc-table__row">
        <th class="uicc-table__cell uicc-table__cell--headline uicc-table__cell--contentAsResponsiveHeadline">Headline</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Col A</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Col B</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Col C</th>
        <th class="uicc-table__cell uicc-table__cell--headline">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 1</td>
        <td class="uicc-table__cell" data-uicc-th="Col A">Cell 1 - a</td>
        <td class="uicc-table__cell" data-uicc-th="Col B">Cell 1 - b</td>
        <td class="uicc-table__cell" data-uicc-th="Col C">Cell 1 - c</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 2</td>
        <td class="uicc-table__cell" data-uicc-th="Col A">Cell 2 - a</td>
        <td class="uicc-table__cell" data-uicc-th="Col B">Cell 2 - b</td>
        <td class="uicc-table__cell" data-uicc-th="Col C">Cell 2 - c</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="uicc-table__row">
        <td class="uicc-table__cell uicc-table__cell--contentAsResponsiveHeadline" data-uicc-th="Headline">Headline 3</td>
        <td class="uicc-table__cell" data-uicc-th="Col A">Cell 3 - a</td>
        <td class="uicc-table__cell" data-uicc-th="Col B">Cell 3 - b</td>
        <td class="uicc-table__cell" data-uicc-th="Col C">Cell 3 - c</td>
        <td class="uicc-table__cell uicc-table__cell--actions uicc-table__cell--noResponsiveHeadline">
          <a href="javascript:;" class="uicc-table__action" title="edit">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#edit"></use>
            </svg>
          </a>
          <a href="javascript:;" class="uicc-table__action" title="delete">
            <svg class="uicc-icon uicc-icon--hoverPrimary">
              <use xlink:href="./assets/icons.svg#delete"></use>
            </svg>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

Tabs

If you do not want to update the contents of the uicc-tabs__contentelement dynamically then you can add multiple elements with the class uicc-tabs__contentand only the one with the class is-activewill be shown.

Tab Content

<div class="uicc-tabs">
  <div class="uicc-tabs__headers uicc-row uicc-row--bigMargin">
    <a class="uicc-tabs__tab" href="javascript:;">Tab 1</a>
    <a class="uicc-tabs__tab" href="javascript:;">Tab 1</a>
    <a class="uicc-tabs__tab is-active" href="javascript:;">2nd Tab</a>
    <a class="uicc-tabs__tab" href="javascript:;">Third Tab</a>
    <a class="uicc-tabs__tab" href="javascript:;">Another One!</a>
  </div>
  <div class="uicc-tabs__content is-active">
    Tab Content
  </div>
</div>

Text

Text (centered)

Lorem ipsum

<div class="uicc-text uicc-text--centered">
  Lorem ipsum
</div>

Text (bold)

Lorem ipsum

<div class="uicc-text uicc-text--bold">
  Lorem ipsum
</div>

Text (uppercase)

Lorem ipsum

<div class="uicc-text uicc-text--uppercase">
  Lorem ipsum
</div>

Text (underlined)

Lorem ipsum

<div class="uicc-text uicc-text--underlined">
  Lorem ipsum
</div>

Text (no wrap)

If the content exceeds the maximum horizontal space then the content will overflow horizontally.

With no wrap: very long line with many words.

Without no wrap: very long line with many words.

<div style="max-width: 200px; background-color: lightgrey;">
  <div class="uicc-text uicc-text--noWrap">With no wrap: very long line with many words.</div>
  <div>Without no wrap: very long line with many words.</div>
</div>

Text (truncated)

If the content exceeds the maximum horizontal space then the line will get truncated

A very long line with many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many many words.

<div class="uicc-text uicc-text--truncated">A very long line with many many many many many many many many many many many many many many many many many many many many
  many many many many many many many many many many many many many many many many many many many many many many many many
  many many many many many many many many words.</div>

Text (sizes)

Extra Small. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat.

Small. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat.

Standard. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat.

Large. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat.

Extra Large. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat.

<p class="uicc-text uicc-text--extraSmall">Extra Small. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
  <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="uicc-text uicc-text--small">Small. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
  <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Standard. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
  <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="uicc-text uicc-text--large">Large. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
  <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="uicc-text uicc-text--extraLarge">Extra Large. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
  <a class="uicc-link" href="javascript:;">quis nostrud exerci tation ullamcorper</a>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Account Notifications Security Members

[Content]

<div class="uicc-region" style="min-height: 350px; background-color: lightyellow;">
  <div class="uicc-postfix uicc-postfix--bigGutters">
    <div class="uicc-postfix__fixed">
      <div class="uicc-verticalMenu uicc-verticalMenu--inline uicc-verticalMenu--left" style="width: 180ox">
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Account
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item is-active">
          Notifications
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Security
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Members
        </a>
      </div>
    </div>
    <div class="uicc-postfix__fluid">
      [Content]
    </div>
  </div>
</div>

Account Notifications Security Members

[Content]

<div class="uicc-region" style="min-height: 350px; background-color: lightyellow;">
  <div class="uicc-postfix uicc-postfix--bigGutters uicc-postfix--small-stacked">
    <div class="uicc-postfix__fixed">
      <div class="uicc-verticalMenu uicc-verticalMenu--inlineMediumUp uicc-verticalMenu--left">
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Account
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item is-active">
          Notifications
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Security
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Members
        </a>
      </div>
    </div>
    <div class="uicc-postfix__fluid">
      [Content]
    </div>
  </div>
</div>

[Content]

Account Notifications Security Members

<div class="uicc-region" style="min-height: 350px; background-color: lightyellow;">
  <div class="uicc-postfix uicc-postfix--bigGutters uicc-postfix--medium-stacked">
    <div class="uicc-postfix__fluid">
      [Content]
    </div>
    <div class="uicc-postfix__fixed">
      <div class="uicc-verticalMenu uicc-verticalMenu--inlineLargeUp uicc-verticalMenu--right">
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Account
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item is-active">
          Notifications
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Security
        </a>
        <a href="javascript:;" class="uicc-verticalMenu__item">
          Members
        </a>
      </div>
    </div>
  </div>
</div>