UI Toolkit to Clone and Customize.
Visit /layout.htmlto see a demo layout built with these components.
Accordions rely on the lower-level
uicc-collapsible
component. This is why you have to tooggle the
is-open
switch two times: On the
uicc-accorion__item
element and on it's child
uicc-collapsible
element.
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.
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 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>
<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>
<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>
<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>
Blocks always have a width of 100%.
<div style="height: 100px; background-color: yellow;">
<div class="uicc-block" style="background-color: orange;">This is a block</div>
</div>
Vertical blocks also have a height of 100%.
<div style="height: 100px;">
<div class="uicc-block uicc-block--vertical" style="background-color: orange;">This is a vertical block</div>
</div>
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>
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>
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>
<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>
<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>
<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>
<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>
<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>
You can visually fake checkboxes without using
<input type="checkbox">
form elements. Please make sure to toggle the class
is-checked
on the
uicc-checkbox
element.
<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>
Changes the cursor to "pointer" on hovering
<div class="uicc-clickable">
Clickable
</div>
Slightly increases the touchable area
<div class="uicc-clickable uicc-clickable--touchy">
Clickable
</div>
Cols have a defined right margin
<div class="uicc-col">
Col 1
</div>
<div class="uicc-col">
Col 2
</div>
<div class="uicc-col">
Col 3
</div>
<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>
<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>
<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>
<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>
The collapsible component comes with no special styling in order to be used as a foundation for more opinionated components e.g. Accordion.
Toggle the class
is-open
to 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">…</p>
</div>
</div>
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">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
<p class="uicc-row uicc-row--extraBigMargin">…</p>
</div>
</div>
<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>
Force the color to override other colors (e.g. on links) by adding the modifier
uicc-color--force
.
<div class="uicc-color uicc-color--gray uicc-color--force">Gray
<a href="javascript:;" class="uicc-link">with link</a>
</div>
<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>
<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>
Floating elements in text get some extra spacing between the floating element and the text.
<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>
<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>
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.
<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>
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--gutters
to your grid container element, as done in most of the examples that follow.
<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>
<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>
<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>
<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>
Stack your grid vertically by adding the
uicc-grid--vertical
modifier
<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>
<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>
<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>
<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>
Responsive Grids work by adding media classes to the Grid cells or containers. When those media values are met, the grids automatically adjust accordingly.
<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>
<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>
<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>
The two cells swap ordering when switching from small to medium
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
In a text document we add sensible margins to our uicc-headlines to visually structure the document outline.
Add the
uicc-headline--firstInText
modifier if you do not need a top margin.
<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>
<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>
<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>
<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>
<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>
Hides elements until the class
is-uicc-initialized
is added to any of its parent elements (e.g. directly on the
html
tag).
In this demo inline script, we listen to the DOMContenLoaded event and then wait for 2.5 seconds until we add the class.
<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>
<input type="text" class="uicc-input" placeholder="Placeholder ...">
<input type="text" class="uicc-input uicc-input--big" placeholder="Placeholder ...">
<input type="text" class="uicc-input uicc-input--stateful is-invalid">
<input type="text" class="uicc-input is-disabled" disabled value="input value">
<input type="text" class="uicc-input is-readonly" readonly value="input value">
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:
<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)">
<textarea class="uicc-input" placeholder="Type something in ..."></textarea>
<label class="uicc-inputGroup uicc-inputGroup--constrainedWidth">
<span class="uicc-inputGroup__label">Titel</span>
<input type="text" class="uicc-input">
</label>
Text with an inline regular link.
<p>Text with an inline
<a class="uicc-link" href="javascript:;">regular link</a>.</p>
Text with an inline unobtrusive link.
<p>Text with an inline
<a class="uicc-link uicc-link--unobtrusive" href="javascript:;">unobtrusive link</a>.</p>
<ul class="uicc-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<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>
<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>
If you need to force the list style on non-li elements, simply add the class
uicc-list__item
to the list items.
<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>
Add class
is-loading
to show loading indicator
Lorem ipsum
Lorem ipsum
Lorem ipsum
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>
Add class
is-blocking
to show blocking loading indicator
Lorem ipsum
Lorem ipsum
Lorem ipsum
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>
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>
<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>
<div class="uicc-modal uicc-modal--fullWidth" id="test-modal-fullWidth-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>
</div>
<span class="uicc-modal__headerClose uicc-clickable uicc-clickable--touchy" aria-hidden="true" onclick="shpModalDemoClose('test-modal-fullWidth-open')">
<svg class="uicc-icon">
<use xlink:href="./assets/icons.svg#clear"></use>
</svg>
</span>
</div>
<div class="uicc-modal__content uicc-region">
Modal Content
</div>
</div>
</div>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-fullWidth-open')">Open modal</button>
<div class="uicc-modal uicc-modal--fullHeight uicc-modal--zoomIn" id="test-modal-fullHeight-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>
</div>
<span class="uicc-modal__headerClose uicc-clickable uicc-clickable--touchy" aria-hidden="true" onclick="shpModalDemoClose('test-modal-fullHeight-open')">
<svg class="uicc-icon">
<use xlink:href="./assets/icons.svg#clear"></use>
</svg>
</span>
</div>
<div class="uicc-modal__content uicc-region">
Modal Content
</div>
</div>
</div>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-fullHeight-open')">Open modal</button>
You can control the entry animation by adding these modifiers:
uicc-modal--zoomIn
,
uicc-modal--fadeIn
,
uicc-modal--slideInUp
,
uicc-modal--bounceInDown
(if the animation component is included).
<div class="uicc-modal uicc-modal--fadeIn" id="test-modal-animation">
<div class="uicc-modal__dialog">
<div class="uicc-modal__content uicc-region" style="width: 300px; height: 250px;">
Modal Content
</div>
<div class="uicc-modal__footer uicc-region">
<button type="button" class="uicc-button uicc-button--secondary uicc-button--wide" onclick="shpModalDemoClose('test-modal-animation')">Close</button>
</div>
</div>
</div>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-animation', 'uicc-modal--zoomIn')">zoomIn</button>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-animation', 'uicc-modal--fadeIn')">fadeIn</button>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-animation', 'uicc-modal--slideInUp')">slideInUp</button>
<button class="uicc-button uicc-button--primary" onclick="shpModalDemoOpen('test-modal-animation', 'uicc-modal--bounceInDown')">bounceInDown</button>
do not break lines if the content exceeds the maximum horizontal space.
<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>
<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>
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>
<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>
<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>
<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>
Paragraphs have a defined line height and bottom margin
<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>
If only the line height should be applied, the bottom margin can be disabled using the
uicc-paragraph--noMargin
modifier.
<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>
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--gutters
or
uicc-postfix--bigGutters
add spacing between the postfix contents. Just leave them out, if you don't need spacing.
<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>
By changing the order of the
uicc-postfix__fixed
and
uicc-postfix__fluid
elements in the markup, you can use "postfix" as "prefix".
<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>
<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>
<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>
<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>
Vertically centered contents
<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>
Vertically bottom aligned contents
<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>
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>
Reading blocks have a constrained width for better readability
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>
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>
Regions have nice paddings and different background colors depending on their type
<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>
<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>
<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>
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>
<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>
<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>
<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>
<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>
<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>
<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>
Rows have a defined bottom margin
<div class="uicc-row">
Row 1
</div>
<div class="uicc-row">
Row 2
</div>
<div class="uicc-row">
Row 3
</div>
<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>
<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>
<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>
<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>
<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>
Inverse rows have a top margin instead of a bottom margin
<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>
Set the height of an element to the height of the screen
<div class="uicc-screenDimension uicc-screenDimension--height" style="background-color: lightblue;">
<div style="background: lighblue;">Window-tall element</div>
</div>
Add left/right margin to block to avoid clashing with the screen border.
<div class="uicc-screenMargin">
<div style="background: green">Test</div>
</div>
No margin on small screens
<div class="uicc-screenMargin uicc-screenMargin--smallNone">
<div style="background: green">Test</div>
</div>
Nested screen margins get ignored
<div class="uicc-screenMargin">
<div style="background: green">
Outer
<div class="uicc-screenMargin">
<div style="background: orange">Inner</div>
</div>
</div>
</div>
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
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>
<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 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>
<hr class="uicc-separator">
<hr class="uicc-separator uicc-separator--primary">
<hr class="uicc-separator uicc-separator--secondary">
<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">
<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">
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
.
Add the class
uicc-stickyTable--column
to 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>
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__subTable
table 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--700
to make sure that all sub tables share the same dimensions.
|
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 | |||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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 | |||
|
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 | |||
|
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>
Add the class
uicc-stickyTable--lastColumn
to 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)
<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"> </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--row
to 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--30
etc.).
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>
You can force full-width tables by adding the
uicc-table--block
modifier to the table element.
Add the
uicc-table__cell--numeric
modifier to table cells containing numeric values.
Wrap tables in a (figure) element with the class
uicc-tableWrapper
to add a nice background (that also fills the whitespace at the righthand side of narrow tables)
<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>
Add
uicc-table--hover
class to the
table
element to highlight rows on hover.
<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>
Add
uicc-table--compact
class to render the table more compact
<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>
If you do not want to update the contents of the
uicc-tabs__content
element dynamically then you can add multiple elements with the class
uicc-tabs__content
and only the one with the class
is-active
will be shown.
<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>
<div class="uicc-text uicc-text--centered">
Lorem ipsum
</div>
<div class="uicc-text uicc-text--bold">
Lorem ipsum
</div>
<div class="uicc-text uicc-text--uppercase">
Lorem ipsum
</div>
<div class="uicc-text uicc-text--underlined">
Lorem ipsum
</div>
If the content exceeds the maximum horizontal space then the content will overflow horizontally.
<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>
If the content exceeds the maximum horizontal space then the line will get truncated
<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>
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>
<div class="uicc-centered uicc-centered--horizontally">
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--left">
<span class="uicc-tooltip__trigger">left</span>
<div class="uicc-tooltip__content uicc-region uicc-region--small uicc-region--primary" style="width: 250px">
<div class="uicc-headline uicc-headline--h4 uicc-headline--text uicc-headline--firstInText">Tooltip content</div>HTML allowed</div>
</div>
</div>
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--right">
<span class="uicc-tooltip__trigger">right</span>
<div class="uicc-tooltip__content uicc-region uicc-region--small uicc-region--primary" style="width: 250px">
<div class="uicc-headline uicc-headline--h4 uicc-headline--text uicc-headline--firstInText">Tooltip content</div>HTML allowed</div>
</div>
</div>
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--bottom">
<span class="uicc-tooltip__trigger">bottom</span>
<div class="uicc-tooltip__content uicc-region uicc-region--small uicc-region--primary" style="width: 250px">
<div class="uicc-headline uicc-headline--h4 uicc-headline--text uicc-headline--firstInText">Tooltip content</div>HTML allowed</div>
</div>
</div>
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--top">
<span class="uicc-tooltip__trigger">top</span>
<div class="uicc-tooltip__content uicc-region uicc-region--small uicc-region--primary" style="width: 250px">
<div class="uicc-headline uicc-headline--h4 uicc-headline--text uicc-headline--firstInText">Tooltip content</div>HTML allowed</div>
</div>
</div>
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--top uicc-tooltip--left">
<span class="uicc-tooltip__trigger">top left</span>
<div class="uicc-tooltip__content uicc-region uicc-region--small uicc-region--primary" style="width: 250px">
<div class="uicc-headline uicc-headline--h4 uicc-headline--text uicc-headline--firstInText">Tooltip content</div>HTML allowed</div>
</div>
</div>
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--bottom uicc-tooltip--right">
<span class="uicc-tooltip__trigger">bottom right</span>
<div class="uicc-tooltip__content uicc-region uicc-region--small uicc-region--primary" style="width: 250px">
<div class="uicc-headline uicc-headline--h4 uicc-headline--text uicc-headline--firstInText">Tooltip content</div>HTML allowed</div>
</div>
</div>
<div class="uicc-row">
<div class="uicc-tooltip uicc-tooltip--bottom uicc-tooltip--right">
<span class="uicc-tooltip__trigger">image content</span>
<img class="uicc-tooltip__content" src="https://placeholdit.imgix.net/~text?txtsize=16&bg=1cdcb5&txtclr=ffffff&txt=Tooltip%20Left&w=300&h=200">
</div>
</div>
</div>
<div class="uicc-tooltip uicc-tooltip--bottom uicc-tooltip--right uicc-tooltip--styled">
<svg class="uicc-tooltip__trigger uicc-tooltip__trigger--help uicc-tooltip__trigger--icon uicc-icon uicc-icon--hoverPrimary">
<use xlink:href="./assets/icons.svg#arrow-left"></use>
</svg>
<img class="uicc-tooltip__content" src="https://placeholdit.imgix.net/~text?txtsize=16&bg=1cdcb5&txtclr=ffffff&txt=Tooltip%20Preview&w=300&h=200">
</div>
<div class="uicc-tooltip uicc-tooltip--bottom uicc-tooltip--right uicc-tooltip--styled">
<svg class="uicc-tooltip__trigger uicc-tooltip__trigger--help uicc-tooltip__trigger--icon uicc-icon uicc-icon--hoverPrimary">
<use xlink:href="./assets/icons.svg#arrow-right"></use>
</svg>
<div class="uicc-tooltip__content" style="width: 250px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
<br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
<br>
</div>
</div>
Add the class
uicc-tooltip--onlyIfHover
if you only want the tooltip to be displayed on devices with hovering capabilities. The tooltip will then not be displayed e.g. on regular touch screens (you can still programatically open/cose the tooltip, see below).
<div class="uicc-tooltip uicc-tooltip--styled uicc-tooltip--onlyIfHover">
<svg class="uicc-tooltip__trigger uicc-tooltip__trigger--icon uicc-icon uicc-icon--hoverPrimary">
<use xlink:href="./assets/icons.svg#info-circle"></use>
</svg>
<div class="uicc-tooltip__content" style="width: 250px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
<br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
<br>
</div>
</div>
Add class
is-open
to force the tooltip to be open regardless of its hover state
This can be used either in conjunction with
uicc-tooltip--onlyIfHover
(see above) or with
uicc-tooltip--noHover
if you do not want the tooltip to automatically appear on hover.
<div style="margin-bottom: 280px">
<div class="uicc-tooltip uicc-tooltip--noHover uicc-tooltip--bottom uicc-tooltip--right uicc-tooltip--styled is-open" id="uicc-tooltip-demoNoHover">
<svg class="uicc-tooltip__trigger uicc-tooltip__trigger--icon uicc-icon uicc-icon--hoverPrimary uicc-clickable" onclick="document.getElementById('uicc-tooltip-demoNoHover').classList.toggle('is-open')">
<use xlink:href="./assets/icons.svg#info-circle"></use>
</svg>
<img class="uicc-tooltip__content" src="https://placeholdit.imgix.net/~text?txtsize=16&bg=1cdcb5&txtclr=ffffff&txt=Tooltip%20Preview&w=300&h=200">
</div>
</div>