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

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

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

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

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

Back to top

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

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

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

Card Slider

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

Cards

Cards are versatile containers for the compact presentation of content.

Carousel

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

Checkboxes

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

Collection

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

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

Date-Time-Picker

A calendar for date inputs.

Disclaimer

The fine print.

Dropdown

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

Eyecatcher

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

Feedback Module

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

Display images with captions.

Footer

The Footer is bottom edge of the site or application.

Header

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

Hero Block

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

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

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

Links

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

Lists

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

Loading Animation

A corporate loading spinner.

Log In Dialog

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

Logo

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

Media Object

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

Modal Dialog

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

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

Navigation bar

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

Overlay

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

Overview and navigation of connected pages.

Progress

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

Quotation

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

Radio Buttons

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

Search Field

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

Search Results

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

Select Box

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

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

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

Table

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

Tabs

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

Textfield

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

Toggle Button Group

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

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

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

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

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