Molecules

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