Toasts are non-disruptive messages that appear in the interface, delivering instant feedback.

Components – legacy

Toast

Table

Step indicator visualizes progression through a series of discrete steps.

Step Indicator

Speech Bubble

Select allows for a space efficient way for the user to select one option from a predetermined list. Select utilizes the native menu of the device to display the list of options.

Select

Sausage

The Ribbon  is a visual indicator that help to highlight new content or products to draw attention to them.

Ribbon

A radio button or radio pill is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.

Radio pill

Radio Button Groups are useful when users need to select a single option from a set of choices, such as when switching between views or sorting elements.

Radio Button Group

Progress

Badge - Usage

Navigation Indicator

Media Object

A loader is a visual progress or activity indicator that tell the user that content is loading or data is processing.

Loader

List Group

The items menu is used to display a list of options or items for selection and navigation. It can be used in the top navigation or within your layout to streamline navigation and reduce complexity.

Items Menu

An input field is a component that facilitates entry and editing of text and numbers. In general, input fields are used to collect and post subsequent information provided by users.

Input

The Icon Button is used to provide a clear and concise visual representation with a complementary action. It combines a clear icon allowing users to perform specific actions with a single click.

Icon Button

Dropdown allows for a space efficient way for the user to select one option from a predetermined list. Dropdown utilizes a custom menu with support for graphics to display the list of options.

Dropdown

Drawer

Dots

The contextual dialog is a practical tool for giving additional information  when requested and needed, resulting in a clutter-free experience. It provides relevant details and important notifications, ensuring a streamlined user experience.

Dialog - contextual

A dialog is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.

Dialog

Date pickers make it easy for users to choose specific dates or date ranges by providing a calendar view with an overview of days, months, and years.

Date Picker

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Checkbox

Cards contain content and actions about a single subject.

Card

Button Group

Button

Our logotypes are one of the most valuable and strongest assets which can be used across all channels at all times. More information about the logotypes and other brand assets is available at

Brands

The primary purpose of bottom sheets is to offer complementary content, and functionality, to what the webpage offers and support the service in offering a seamless, ergonomic, experience.

Bottom sheet

Badge

Accordion provides a frame with a header that can be expanded to reveal additional content. Multiple accordion elements may be grouped together.

Search the design system

Components