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.
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 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.
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.
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.
The breadcrumb navigation provides orientation for the user on websites with a deeply nested page structure. It offers hyperlinks to reach the parent pages.
Buttons attract users’ attention for actions. Different hierarchy levels of buttons are used to achieve the desired loudness level of attraction.
The Card Slider is a component for the presentation of multiple Cards aligned horizontally in one section.
Checkboxes are input elements for managing selections, for example, in forms or filters. They can be used for multiple selection.
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.
A Dropdown is a small overlay that can contain any type of content, which are displayed on demand.
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.
With Hotspots the user can explore content by opening detailed information on demand. They are placed as interactive spots on an image or graphic.
In-Page Navigation is needed when there is extensive content on one page. The user can navigate to each chapter easily and the currently viewed chapter is highlighted in the in-page navigation.
Links are anywhere where hyperlinks refer to other pages. There are different link modifications to fit a variety of purposes.
Lists are structured presentations of related content and can be used for simple text or links.
The logo expresses Siemens Healthineers’ visions and personality and is a mandatory element of the header for brand recognition.
Modal dialogs are used for processes that need a decision by the user. They are shown with a layer above the site content.
As a slider for multimedia content this feature can prominently serve several images and videos with caption text. The Multimedia Container works well for a conspicuous entrance, for example on product pages.
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.
Quotations allow a special type of formatting for highlighting quotes of customers or experts.
Radio buttons are input elements for managing selections, for example, in forms or filters. Only one in a group can be selected.
The search results component defines the formatting of the results list display the user sees after triggering a search.
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.
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.
The Steps Bar provides progress overview to the user in interactive multi-stage processes. It motivates the user to complete the process.
A Toggle Switch is similar to a Checkbox for managing settings, for example, in forms or filters. They are used for on/off selection.
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.