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

Components

Accordion

Accordion - usage

Badge

Badge - Usage

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

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

Button Group

Button

Cards contain content and actions about a single subject.

Card

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

Checkbox

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

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

Dots

Drawer

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

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

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 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

List Group

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

Loader

Media Object

Navigation Indicator

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

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

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

Ribbon

Sausage

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

Speech Bubble

Step indicator visualizes progression through a series of discrete steps.

Step Indicator

Table

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