Components
AccordionsAccordions allow you to show or hide related content under vertically stacked lists
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.
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.
DividersDividers are thin lines used to insert breaks into your layouts and group similar content.
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.
Form
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
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
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.
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
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 informations to the user when needed. It can also be used to explicitely specify a visual element.