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.
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 a complex and multi-usage component. It provides a structure to display many items and edit them easily through some features.
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
Form
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 Group
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
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.