Mozaic

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
Action Bar Stepper Bar
The Bottom bar component ...
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
Form
Autocomplete
The definition will be added soon.
Checkbox
Checkboxes 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
Datepicker
Date picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element.
Dropdown
The definition will be added soon.
Fields
Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback
File uploader
A file uploader is a pattern mainly used in forms. It allows the user to upload one or several files like pictures or documents.
Password input
Password input is a necessary security feature for logging in or registering on a website.
Phone number input
Phone number input enables the user to input its phone number with an international country prefix in a form element.
Quantity selector
The 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
Radio
A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
Select
A select is a selection tool used in forms, allowing user to choose between multiple predefined options.
Text area
A text area is used to fill multi-line text. They share appearence and states with text inputs
Text input
Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context
Toggle
A 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 Group
Option 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 card
The 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.

Components