Components

An accordion is a group of vertically stacked, collapsible sections that allow users to toggle the visibility of related content.

Article provides styles to common element selectors to create an article in a content page.

A breadcrumb is a secondary navigation pattern that shows users their current location within a website or application's hierarchy.

Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.

A callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.

A card is a flexible content container used to group related information and actions about a single subject.

Container is a basic structural element that restricts page content to a specific maximum width.

Error message that works alongside the Form Field component to style and place the error message and its associated form control element appropriately.

Form field is a wrapping component that provides consistent styling and behavior for form control elements.

Native select is a form control element that can be used in forms to select a value from a set of options.

Radio is used to select a single value from a selection of values.

A hero is a top-level container designed to be large and captivating, typically used as the first component to introduce a page's main purpose or message.

Image utilizes the native HTML <img> element to display responsive images on a page and prevent content jumping while images are loading.

The input component allows a native HTML input element to work with the form field component.

Link set is a component for displaying two or more link set items.

A list is a stylized container used to vertically group a series of related content.

Loading icons are used as an indicator of an event in progress.

A media gallery displays a group of thumbnails in a gallery format, allowing users to preview and select different media.

Menu is a small floating panel used to display a list of actions or navigational items.

Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.

Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.

A notification provides contextual feedback or information related to user actions within a page's content.

Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.

A progress bar provides visual feedback about the duration or progress of a task or operation.

Quantity field is a form control element that switches between a native select and input element.

Usage

A sidebar is a component used to display additional information alongside a page.

A switch allows users to toggle the state of a single setting.

Tabs provide a way to navigate between panels that display related content without leaving the page.

A text snippet is used to display a section of text with the ability to show or hide content beyond one line of text.

Toasts are notifications that provide application-level information. They are designed to mimic push notifications and appear temporarily on the screen.

Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.