Overview

For revision notes, see page Items Versions.

Elements

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...

 

Components

Content Cards

Content Cards contain an easy to digest overview of the content that lays behind them. They should be clickable and linked to further interactions or content levels. Content Cards with Content Overview Use this expression for category entrances and high level content...

Accordions

Accordions consist of a set of headlines, each with expandable content. Only one item can be expanded at a time. Desktop & Tablet [lide_liquid_component type="Component" component="Accordion" accordion__version="Default"...

Badges

Badges symbolize special properties of an item or person. Badges provide a short overview about that property and its value. Simple Badge Default...

Breadcrumbs

Breadcrumbs provide information on the current position of the user. Besides the current screen, the hierarchical path to the start screen is listed. Each item of the breadcrumb string is linked to its respective page. Breadcrumbs [lide_liquid_component...

Fly Outs

Fly outs contain a limited amount of data and have the purpose of providing brief information, short forms or tables / menus. Fly outs can be opened and closed manually by the user as well as automatically or as part of another user interaction (e.g. scrolling)....

Graphs

Graphs translate data into a visual representation and provide an overview about complex structures or analytics. Bar Chart The bar chart is used for number comparisons in relation to a progressing value (e.g. time). Values can be grouped and summarized. Each y-axis...

Modals

Modals provide additional information in another layer. Modals can be closed manually by the user. Modals should be used sparingly. Simple Modal [lide_liquid_component type="Component" component="Modal" modal__version="Default"...

Notifications

Notifications provide immediate information to the user. Those information can be confirmations, warnings, or hints. Notifications appear automatically and disappear automatically as well, although a manual closing should always be possible. Notification Bar Simple...

Paginations

Paginations are used to navigate through split lists of content. A pagination shows the current position of the user as well as the total amount of list pages and options to navigate within these pages. Simple Pagination Use the simple pagination for content lists of...

Progress Bars

Progress bars indicate the advance of a certain interaction or process. Common use cases are page scrolling or processes like check out or registration. Step Progress Bar Items Use the step progress bar for processes as setups, checkouts or registrations. Default...

Quotes

Quotes display highlight-worthy statements in a prominent manner. For actual quotes, the source is also shown. Quote with Image Use quotes with an image whenever there is a fitting visual representation available that undermines the statement or if you want to show...

Ratings

Ratings provide an estimated value on the quality of a certain element. They can be interactive for the user. Star Rating Use star ratings whenever you want to provide information about the user or customer satisfaction regarding a product, service or item....

Search Bars

Search bars enable the user to enter a search term or phrase which will then be processed by the search engine. Standard Search Bar Use the standard search bar in your header and as you default choice for search bars. [lide_liquid_component type="Component"...

Sliders

Sliders contain a set of content items and animate through this set in a sliding manner. Slider with Label Default...

Social Shares

Social shares contain options to share a specific content on social networks or can be used as links to related accounts within the social network / platforms. Social Shares Use large share symbols if you want to show only one platform or present one platform with...

Tables

Tables are used to put content into a ordered grid. The first line is always the header line and defines the content below for each column. Each column can be sorted. You will find examples for small, medium, and large sized tables on this page. Each size can be...

Tabs

Tabs are used as an overview and quick access to different contents of the same superior topic. A set of tabs needs at least two items. Sticky Tabs Sticky tabs remain visible regardless of user scrolling within the tab content area. Example Default Hover Active...

Tooltips

Tooltips provide additional information, mostly short paragraphs, and can be placed besides all sorts of interface elements. Tooltips Choose the position of the tooltip with regards to the available space in your interface. [lide_liquid_component type="Component"...

 

Modules

Calendars

Calendars provide information about dates related to certain events. Those information are displayed independently from the time frame but can vary in their display forms respectively. Events can contain their own content. Simple A simple form for entering single...

Chats

Chats are direct message conversations between the user and another communicator. Chat messages are archived and can be manually deleted by the user. The user has an overview of his chat conversations. It should be possible to add emoticons to chat messages and to...

Favorites

Favorite icons are used to mark single items of a system and add those to a collection. These icons need to be placed directly at the respective elements. Favorites should be removable at all times either at the element or on the favorites overview. Favorites...

Footers

Footers close every screen/ page and provide next steps for the user as well as legal topics and optionally, entries to other topics or categories. Footers need to include legal topics and copyright information required in the application's respective country. Footers...

Forms

Forms let the user enter information and data. Forms can be of different length to represent different use cases (e.g. contact, newsletter sign-up, check out). Form fields should be validated as quickly as possible, typically through in-line validation. Form...

Galleries

Galleries comprise of multiple media assets and display these assets within one component. It should always be possible to navigate through the assets of one gallery. Single assets can be enlarged and played. Galleries Desktop Default Mobile Default Single Module...

Headers

Headers are the intros of every screen/ page. A header should provide context and motivate the user to look at the rest of the page. Headers [lide_liquid_component type="Module" module="Header" header__version="Default"...

Leaderboards

Leaderboards are lists of elements, participating in a competition alike situation. Leaderboards show the ordering of all elements as well as additional related information. Leaderboards Default Default Tile Hover Tile Components Coming...

Light Boxes

Lightboxes are used to set the users focus on a certain interface element, usually an enlarged graphic or photograph. It’s also possible to display other modules within a lightbox as modals. Light Boxes [lide_liquid_component type="Module" module="Lightbox"...

Media Players

Media Players are used to playback videos and other media files. Video Players Default Video Player Default Video Player Advanced Video Player Audio Players Default Video Player Default Audio Player Default Video Player Default Audio Player Pause Media Player Icons...

Navigations

Navigations offer an overview of the available content categories as well as quick access points to these. Navigations should always be placed on the left side of the screen. Navigations Navigations need to be represented using all following states within each...

Notification Centers

Notification centers collect notifications in a timeline and provide an overview of passed events for the user. Notifications can be deleted. Notification Center Default Notification Headline Default Notification Box Text only Text only Text only Hover With graphic...

Onboardings

Onboardings take place at the first use of an application or website. Onboardings provide an introduction into the application’s functionalities and guide the user through a pre-defined tutorial, using the actual interface. Onboarding Default / Disabled Tile Enabled...

Shopping Carts

Shopping carts are used in e-commerce environments and display the items added by the user. The shopping cart should be accessible from every page and can have a reduced view within a fly-out. Shopping Cart Default Components Coming soon.

 

Templates

Archive Page

Archive pages are part of an editorial system and summarize articles and other content within an area, separated from the rest of the website / application. User should be able to sort items within an archive and search through them. Please note, that templates only...

Article Page

Article pages are part of an editorial system and provide mostly textual information to the reader. Articles can contain media and are linked within their article universe. Please note, that templates only regard to page content and do not reflect entire page...

Error Page

Error pages are fall-back pages for error messages, generated by the system. Instead of only the error code, they provide further assistance and offer ways out of this dead-end. Please note, that templates only regard to page content and do not reflect entire page...

FAQs

Frequently asked questions are a collection of popular questions and answers. Commonly the FAQs are displayed within a set of expanders or an accordion. If the content requires it, FAQs can be split up to multiple categories. FAQs [lide_liquid_component...

Generic Page

Generic pages step in for every case where none of the other available templates fits appropriately. Generic pages can be build up to various different shapes with almost all kinds of content. It is important to pay attention to the guidelines of all building blocks...

Help Page

Help pages should, independently from their context, provide on point topics for supporting the user with various different problems. While you cannot know what questions the user might have, it is important to try to make the best guess possible in order to meet the...

Process Page

Process pages are part of a pre-defined process and can only be accessed from within this process. Each process page shows the progress of the user within the process and offers navigation elements for moving back and forwards, if possible. Please note, that templates...

Registration Page

Registration pages mark the first step of registration processes. Users can, by going through this process, register for an account to a platform. Please note, that templates only regard to page content and do not reflect entire page frameworks. Desktop Mobile Modules...

Search Results Page

Search results pages display results, matching a search query. If no matches are found, the results page should always make suggestions that are close to the search term or try to find matches in other content categories. Search results can be grouped, in order to...