UI MarCom 3
Latest (3.5.1)
Previous versions
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Country and Language Selector Date-Time-Picker Disclaimer Dropdown Eyecatcher Feedback Module Figure Footer Header Hero Block Hotspots Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Button Group Toggle Switch Tooltip User Identifier Value Slider
Updates
Component Library Changelog Design Files Changelog
Help
Contact us

Overview

Components are one of the key building blocks of the design system. Each component has been designed, coded and tested to build brand-compliant user interfaces that meet the requirements of modern digital marketing and communication. Here is an overview of the purpose of each component.

You’d like to test some components in a sandbox? Please follow this link and download a zipped folder containing our UI-MARCOM Boilerplate

Accordion
Stable Dark theme

With an Accordion you have the ability to group together related content and show it as an expandable list. This keeps the list concise and saves vertical space while allowing more information to be provided if desired.

Alerts
Stable Updated Dark theme

Alerts are notifications that attract the user’s attention. They can be directly related to an interactive process and give the user feedback on the success or failure of an action.

Application Bar
Stable Updated

The Application Bar is the area at the top of a website or solution that contains the branding, application name, overall user information and off-content functions.

Aspect Ratio
Stable

Applicable aspect ratios to control image formats regardless of the source.

Back to top
Stable

This is a small control button that is shown in the bottom right corner of the viewport when important navigation elements are out of sight.

Breadcrumbs
Stable Dark theme

The breadcrumb navigation provides orientation for the user on websites with a deeply nested page structure. It offers hyperlinks to reach the parent pages.

Button
Stable Dark theme

Buttons attract users’ attention for actions. Different hierarchy levels of buttons are used to achieve the desired loudness level of attraction.

Card Slider
Stable Updated Dark theme

The Card Slider is a component for the presentation of multiple Cards aligned horizontally in one section.

Cards
Stable Dark theme

Cards are versatile containers for the compact presentation of content.

Carousel
Stable Dark theme

With carousels users have the ability to cycle through elements like images or text slides.

Checkboxes
Stable Dark theme

Checkboxes are input elements for managing selections, for example, in forms or filters. They can be used for multiple selection.

Collection
Stable Dark theme

Collections are kind of list separated by horizontal rules. Often the Collection items are links to related content pages. The content of each collection item can contain other layout objects.

Country and Language Selector
Stable New in 3.1 Updated

The Country and Language Selector makes selecting either the prefered language or country and region for an application possible.

Date-Time-Picker
Stable Dark theme

A calendar for date inputs.

Disclaimer
Stable Dark theme

The fine print.

Dropdown
Stable Dark theme

A Dropdown is a small overlay that can contain any type of content, which are displayed on demand.

Eyecatcher
Stable New in 3.1 Dark theme

The eye catcher is a component used on pictures to highlight something new or special.

Feedback Module
Prototype

The feedback module is a small component on the right side of numerous applications, enabling users to comment and to rate the overall user experience of the website.

Figure
Stable

Display images with captions.

Footer
Stable Dark theme

The Footer is bottom edge of the site or application.

Header
Stable

The Header is an obligatory basic element placed at the top of the interface.

Hero Block
Stable Dark theme

The Hero Block works well for a conspicuous entrance, for example, on product pages or special topic detail pages where the content starts with one hero image.

Hotspots
Stable New variant

With Hotspots the user can explore content by opening detailed information on demand. They are placed as interactive spots on an image or graphic.

Label
Stable Dark theme

A small labeling component that can be attached to another object or simply stand alone.

Links
Stable Dark theme

Links are anywhere where hyperlinks refer to other pages. There are different link modifications to fit a variety of purposes.

Lists
Stable Dark theme

Lists are structured presentations of related content and can be used for simple text or links.

Loading Animation
Stable Dark theme

A corporate loading spinner.

Log In Dialog
Stable

A modal welcome screen to introduce the application without showing content initially.

Logo
Stable Updated

The logo expresses Siemens Healthineers’ visions and personality and is a mandatory element of the header for brand recognition.

Media Object
Stable

Media objects help to layout repetitive components where content shouldn’t wrap around.

Menu
Stable Dark theme

With a Menu, users may make a selection from a number of options in a vertical list.

Modal Dialog
Stable Dark theme

Modal dialogs are used for processes that need a decision by the user. They are shown with a layer above the site content.

Multi-column
Stable

The multi-column feature flows content into two columns on a large viewport.

Navigation bar
Stable Dark theme

The Navigation Bar is the part of the Header that contains the global navigation.

Overlay
Stable Dark theme

A container overlaying the page to place the focus on this popped-up content. The rest of the visible interface below is darkened by a fog.

Pagination
Stable Dark theme

Overview and navigation of connected pages.

Progress
Stable Dark theme

A component that indicates the progress of a single process or a static percentage value.

Quotation
Stable Dark theme

Quotations allow a special type of formatting for highlighting quotes of customers or experts.

Radio Buttons
Stable Radio Group under construction Dark theme

Radio buttons are input elements for managing selections, for example, in forms or filters. Only one in a group can be selected.

Search Field
Stable Dark theme

The Search Field is an input that initiates a search on submission.

Search Results
Stable

The search results component defines the formatting of the results list display the user sees after triggering a search.

Select Box
Stable New filter feature New multi select variant Dark Theme

A Select Box is an input field that provides a list of options from which the user chooses a value. They are typically used in forms.

Stage
Stable Dark theme

A stage is used for a conspicuous entrance, for example on the website. It is recommended for displaying one or more campaign visuals and claims on top of the content.

Steps Bar
Stable Dark theme

The Steps Bar provides progress overview to the user in interactive multi-stage processes. It motivates the user to complete the process.

Table
Stable Dark theme

Tables present data sets in a comparable, readable and scannable way.

Tabs
Stable Dark theme

With Tabs the user has the ability to switch between different views of similar content easily.

Tags
Stable Dark theme

Tags are interactive meta keywords to categorize, organize, and filter content.

Textfield
Stable Dark theme

Textfields are form inputs that let the user enter terms of text.

Toggle Button Group
Stable New in 3.2 Dark theme

Toggle Buttons display the status „active“ or "not-active“ through their design. Functionally they are very similar to Radio Buttons which means only one button can be active at the same time.

Toggle Switch
Stable Dark theme

A Toggle Switch is similar to a Checkbox for managing settings, for example, in forms or filters. They are used for on/off selection.

Tooltip
Stable Dark theme

With a Tooltip you can provide short additional information. It opens in a small layer when the user hovers or taps on the item that is attached with the Tooltip.

User Identifier
Stable

The User Identifier contains the user avatar and some user information (user name and affiliated institution). It is displayed in the Application Bar.

Value Slider
Stable New in 3.2 Dark Theme

A Value Slider allows users to view and select from a range of value along a slidable bar.