Molecules

Accordions display an expandable/collapsible list of items. The final Accordion component is a compound of the following:

Alerts display short messages related to the behavior of a system, feature or page.

Banners are used for advertising brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button. The final Banner component is a compound of the following:

Breadcrumbs indicate the user's location in a website hierarchy, facilitating the navigation to previous page levels.

The Bullets component displays a set of bullets, which allow users to alternate between different screens.

Carousels are a set of rotating banners. They contain navigational controls which allow users to alternate between multiple images and content in the same section.

Forms contain interactive components that are used to collect user input.

Icon Buttons are icons that trigger some sort of action, such as adding an item to the cart.

Loading Buttons are used to disable interactions or provide a visual cue that an action is being processed.

Modals are dialog windows that sit on top of an application's main view. Once a Modal is open, interactions with the content behind it are blocked.

The PaymentMethods component displays the logos of the available payment options in a store.

The Price Range component is a slider that allows users to select a maximum and minimum price from a range.

The QuantitySelector component allows customers to select the quantity of a given product to purchase.

The Radio Group component allows users to select a single option from a list of two or more mutually exclusive options.

The Search Input component allows users to enter an input and query results from a database.

Tables display information in a friendly way, allowing users to scan for details quickly. The Table component is a compound of the following: