Components

An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.

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

Breadcrumbs are a secondary navigation that displays a user's location within a website or application.

The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.

Callout is a versatile component that can be used to easily highlight a piece of content.

Cards are versatile content containers that contain content and actions to convey information 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 a wrapping component for form control elements.

Input is a form control element that can be used in forms.

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

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

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

Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.

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

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

List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.

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

Media gallery is used to display a group of thumbnails in a gallery format.

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.

Notifications provide a way to display and communicate 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.

Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.

Tabs provide a way to navigate between panels that display related content.

The text snippet component shows a snippet of text, with the ability to show or hide content beyond one line of text.

Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.

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