Style Guide

1 #Base Base

1.1 #Base.Button Link Button Link

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

Example
Button Link
Markup 
<a href="#" class="buttonLink">Button Link</a> <button class="buttonLink">Button Link</button>
Source: build/doc/doc.css, line 3791

1.2 #Base.Buttons Button

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

Examples
Default styling
Button
.button--primary
Primary
Button
.button--action
Action
Button
.button--danger
Danger
Button
.button--bordered
Bordered
Button
:disabled
Disabled
Button
Markup 
<a href="#" class="button [modifier class]">Button</a> <button class="button [modifier class]">Button</button>
Source: build/doc/doc.css, line 3461

1.3 #Base.Fake Tables Fake Tables

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

Example
Header
Header
Header
Header
Header
Cell
Cell
Cell
Cell
Cell
Markup 
<div class="table">
<div class="table__row table__row--header">
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
</div>
<div class="table__row">
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
</div>
</div>
Source: build/doc/doc.css, line 4478

1.4 #Base.Helper Hardcoded Hint

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

Example
Text
Markup 
<span class="hardcodedHint" title="Title">Text</span>
Source: build/doc/doc.css, line 3006

1.5 #Base.Icons Icons

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

icon icon-360

icon icon-academy

icon icon-address

icon icon-addressbook

icon icon-aichat

icon icon-angle-down

icon icon-angle-left

icon icon-angle-right

icon icon-angle-up

icon icon-arrow-down

icon icon-arrow-left

icon icon-arrow-right

icon icon-arrow-up

icon icon-basket

icon icon-bike

icon icon-chart

icon icon-chat

icon icon-check-circle

icon icon-check

icon icon-clock

icon icon-close

icon icon-columns

icon icon-copy

icon icon-date

icon icon-document-archive

icon icon-download

icon icon-drag-drop

icon icon-edit

icon icon-exclamation-circle

icon icon-exclamation

icon icon-expand

icon icon-facebook

icon icon-file-doc

icon icon-file-document

icon icon-file-image

icon icon-file-pdf

icon icon-file-powerpoint

icon icon-file-video

icon icon-file-xls

icon icon-filter

icon icon-gift

icon icon-heart-filled

icon icon-heart

icon icon-home

icon icon-info

icon icon-instagram

icon icon-invoice

icon icon-language

icon icon-linkedin

icon icon-list

icon icon-loading

icon icon-lock

icon icon-logged

icon icon-login

icon icon-logout

icon icon-mail

icon icon-map-pin

icon icon-marketing

icon icon-minus

icon icon-password-hide

icon icon-password-show

icon icon-pause

icon icon-payment

icon icon-pen-to-square

icon icon-phone

icon icon-pinterest

icon icon-play

icon icon-plus

icon icon-print

icon icon-question

icon icon-quickorder

icon icon-register

icon icon-reload

icon icon-retoure

icon icon-rma

icon icon-search

icon icon-send

icon icon-service

icon icon-settings

icon icon-share

icon icon-shipping

icon icon-sorting

icon icon-star-filled

icon icon-star-half

icon icon-star

icon icon-subscriptions

icon icon-tiktok

icon icon-trash

icon icon-twitter

icon icon-upload

icon icon-user

icon icon-users

icon icon-voice

icon icon-whatsapp

icon icon-xing

icon icon-youtube

icon icon-zoom

Example
Markup 
<i class="icon icon-name"></i>
Source: build/doc/doc.css, line 364

1.6 #Base.Lists Lists

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

Examples
Default styling
  • List
  • List
  • List
.checkList
Checklist
  • List
  • List
  • List
Markup 
<ul class="[modifier class]">
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
Source: build/doc/doc.css, line 10187

1.7 #Base.Tables Tables

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

Example
Header Header Header Header Header
Cell Cell Cell Cell Cell
Markup 
<table>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
Source: build/doc/doc.css, line 4420