Organisms

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.