Components are reusable UI elements in a design system that helps to create consistent, intuitive experiences across products.
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.
Form field is a wrapping component that provides consistent styling and behavior for form control elements.
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.
The native select component allows a native HTML select element to work with the form field component.
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.
Radio is used to select a single value from a selection of values.
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.
Tags are compact visual indicators used to display short pieces of information, such as status, categories, or labels. They typically contain an icon, text label, and optionally a delete button for removable items.
A text snippet is used to display a section of text with the ability to show or hide content beyond one line of text.
Textarea allows a native HTML <textarea> element to work with the Form Field component.
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.