Components
- AccordionsAccordions allow you to show or hide related content under vertically stacked lists
- BadgeA badge indicates the status of an entity and can evolve at any time.
- Bottom Bar
- BreadcrumbBreadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go back to previous steps or levels when needed.
- Built-in menuThe Built-in menu is a useful component for creating a sub-navigation within a content page.
- ButtonsButtons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context
- CardsA card is a graphic element that structures a group of related informations that must be understood on its own. It visually looks like a playing card.
- DataTableThe Datatable is used to present a large set of data organised in rows and columns.
- DividersDividers are thin lines used to insert breaks into your layouts and group similar content.
- FlagsA flag is used to display meta-informations about a product or a service. It must be displayed at the top of the content, and used as an indicator of a content main category
- FormAutocomplete
The definition will be added soon.
CheckboxCheckboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions
DatepickerDate picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element.
DropdownThe definition will be added soon.
FieldsFields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback
File uploaderA file uploader is a pattern mainly used in forms. It allows the user to upload one or several files like pictures or documents.
Password inputPassword input is a necessary security feature for logging in or registering on a website.
Phone number inputPhone number input enables the user to input its phone number with an international country prefix in a form element.
Quantity selectorThe quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example
RadioA radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
SelectA select is a selection tool used in forms, allowing user to choose between multiple predefined options.
Text areaA text area is used to fill multi-line text. They share appearence and states with text inputs
Text inputInputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context
ToggleA toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch
- HeadingThe heading provides basic typographic styles for your page titles, also known as H1. Each heading has its own sizes depending on the breakpoints.
- HeroA hero is an element that you can use on the top of your pages to add a visual or draw the attention of the user on a specific message.
- LayersIn modern layouts, a layer is a way to give further actions or display to the user specific content without breaking the user flow, like login or cart overview.
- LinksA link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page
- ListboxThe definition will be added soon.
- Loader(WIP)
- ModalsA modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action.
- NotificationNotifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result of an action made by the user.
- Option GroupOption button
The option button component allows confronting some options and can be used inside a questionnaire or a survey. The content of each option button must be easily readable to help the user make a choice
Option cardThe option card component allows confronting some options of an item (product or service) and can be used to set up or even filter a selection. The content of each option card must be a comparable synthesis to help the user make a choice.
- Page headerThe Page header component is a persistent UI element located at the top of digital products pages.
- PaginationPagination enables users to navigate from a page to another one, especially when a large content needs to be splitted in several parts. It's mainly used on pages like the search engine result page or the list pages.
- Progress barA progress bar allows you to focus the attention of the user with a visual clue on his progress in a particular journey.
- Rating StarsRating stars is a pattern you’ll find in almost every website. It has two main usages. First, it allows the user to give feedback on the current experience with a product or a service. Second, it allows a brand to provide some informations
- Segmented controlSegmented control allows users to switch from one view to another with the same data or information set. What we call "view" is a display format. For example, it could be switching from a grid view to a list view or between different peri
- SidebarThe Sidebar component is the vertical navigation element commonly used in digital products to provide users with quick and easy access to top-level features.
- StepperA stepper visually indicates the progress of a user's journey on pre-defined steps to complete.
- TabsTabs allow the user to navigate from a content to another within the same context. It keeps the user on the same page.
- TagsTags are used to categorize, show filters or make selections. They display product properties.
- TooltipA tooltip allows you to display further information to the user when needed. It can also be used to explicitely specify a visual element.