Atoms

Buttons

Buttons, or call-to-actions (CTAs) are used for important user actions. Button labels should be speaking in the sense of the user’s understanding, rather than in the system’s language. Buttons can be combined with each other, but only within their label-groups (i.e....

Bubbles

Bubbles are notifications that indicate new available information at the data categorie's respective link or icon. Bubbles Use bubbles as temporary and dynamic elements that adapt to new information and not as a static element. Indicators need to be used respective to...

Cards

Cards can be used as an entrance to a category within the content or as bold links, for example on a dashboard interface. As cards have a resemblance with physical cards, it is important to stay close to the real behavior in terms of their haptics and movements. Cards...

Checkboxes

Checkboxes are used to select one or multiple options from a set of available values. Checkboxes Checkboxes need to be represented using all following states within each item. [lide_liquid_component type="Element" element="Checkbox"...

Dropdowns

Dropdowns or select fields enable the user to select one option from a list of multiple options. The selection of an option can affect other form elements on the same page / screen. Dropdown Regular dropdowns are used for selecting one option from an array of...

Filters

Filters are used to organize a set of available content by categories. They should always be used close to their content. Filters can be added and removed in order to decrease or increase the amount of visible content. Simple Filters Filters need to consist of a label...

Graphics

Graphics can be images or photographs. A graphic’s resolution should always support high pixel density screens while the image size should be small enough to be carried by mobile devices. Placeholder Use these images when the final content is not available yet or as a...

Headlines

Headlines are used as an introduction into a topic and for visual differentiation between content blocks. Headlines require hierarchies and a placement conform with these. Lato Please refer to the typography section for more information about text usage....

Icons

Icons are small images, preferably of SVG file format. They provide context for content or interactions. Icons should be used in combination with a text label. Icons Icons support content by being an addition to a piece of text. Alarm Atoms Alarm Bottle Atoms Basket...

Labels

Description Labels describe another element,. Other fields of application may be image captions or tooltips. Code Lorem agdfgdgdgfhfsfafgs 6457432144553241323456 Live Example UI Design Button 1 Button 2 Button...

Links

Links are used primarily for navigational elements. Links may also be used for actions with lower priorities, but then only in combination with a higher prioritized button. Links Inline, as part of a paragraph. [lide_liquid_component type="Element" element="Paragraph"...

Lists

Lists are used to vertically organize content. Lists can be ordered or unordered. Unordered lists can also be used as checklists. List with Icons These lists are used when lists need a lot of attention or are interactive. [lide_liquid_component type="Element"...

Logos

      Information on the usage of our logo can be found in the brand principles document which can be requested from our branding department at ....

Paragraphs

Paragraphs are rich text blocks. The text can be formatted. Paragraphs Paragraphs are available in different sizes. Please refer to the typography section for more information about text usage. [lide_liquid_component type="Element" element="Paragraph"...

Cells

Cells are an integral part of the brand principles within our company. For digital products, we use them as background elements. You can choose of the following available cells designs. Stay consistent within your digital product though. Default (Plastic) Synthetic...

Radio Buttons

Radiobuttons are used to select one option out of a set of multiple options. Radio Buttons Radio buttons need to be represented using all following states within each item. [lide_liquid_component type="Element" element="RadioButton" radiobutton__version="Stateful"...

Tags

Tags are used for labeling items or content. Tags may also be used as a display for active filters. Solid Tags Default [lide_liquid_component...

Text Fields

Text fields are used either in forms together with other input fields or stand-alone (e.g. value entering, newsletter etc.), for submitting data. Text field types should always be aligned with their use case (e.g. calendar, e-mail etc.). Error messages are required...

Toggles

Toggles are used to select one out of two available options or to switch between two states. Toggles Default [lide_liquid_component...