Overview ()

An accordion component is a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

AutoCompletes are input fields where a user is suggested several options, based on the input they provide.

Avatars are commonly used to represent a user and can contain photos.

Use banners to alert users about important information.

A box is a very low-level component that can be used to generally style an element.

A branded heading gives brands deeper customisation possibilities to brands.

Buttons indicate possible actions or choices to a user.

A Caption is meant to be an extra textual illustration of a concept.

A checkbox is an input control for making selections.

A visual alternative to radio buttons and checkboxes. They allow a selection of single or multiple options from a set of predefined options.

Allows users to enter a date. This can be done by either having the fill out the date via an input, but also provides the user with a calendar view for easier date selection.

Allows you to display a date in a consistent way through the use of formats.

To draw attention of the user to a dedicated piece of content, you can use a Dialog.

Dividers allow a visual representation of the start of a new area of content.

The <Fieldset> tag is used to group related elements in a form.

Flex components can be used to wrap a set of other elements in a flexible way. It's an extension of Box.

Headings are meant to structurally denote important regions and provide a clear hierarchy in pages.

Hide elements.

Icons can be used to provide extra visual context for other items.

IconButtons are specific instances of a Button, where the only content is an Icon.

Illustrations can be used to provide extra visual context for other items.

Images are simple wrappers around the img tags, but provide built in styling options

LinkText is an interactive element that allows users to navigate to a different destination.

Lists allow a visual representation of the start of a new area of content.

To convey to a user that a page or a specific part is loading, you can present them with a Loader.

This is a wrapper component around the CDN-hosted logos for each brand. This way you don't have to worry about versions, CDN urls, etc.

A Paper exists to group content and display it in a relative depth from where it resides on. It's an extension of Box.

A paragraph is meant for a distinct section of a piece of writing, usually dealing with a single theme

Use a placeholder when you want to reserve space in a specific aspect-ratio

Radio enables a user to make a single selection from a group of options.

RichContent is a component that wraps around some HTML or other components and provides some default styling based on design system values.

Provides text for screen readers that is visually hidden. It is the logical opposite of the aria-hidden attribute.

Select gives users the ability to select a single item from a list of options.

Steppers let a user know what their current position is in a series of steps.

Switches toggle the state of a single setting on or off.

A table is used to organise and display tabular data in a way that's easy to scan.

The Text component is a very generic component that support a wide range of text styles.

A TextField is an interactive control used in forms to collect data from the user.

A Textarea is a TextField that allows the user to write over multiple lines.

A tooltip is a floating label that provide a brief explanation about a specific user interface element. It can be triggered when users hover or focus.

WideLists represent a set of WideListItems displayed in a way to organize related information.

Get responsive value for the active breakpoint.