Global layout

Overview

To keep consistency across products, we have determined basic layout rules to display informations on pages with 3 PageLayout sizes and 3 layout item sizes.

PageLayout

Adapt PageLayout to the complexity and number of informations to display on a page. Few exemples :

• Prefer a Small PageLayout to display a single form with few imputs or a simple datatable with two/three columns.

• Use a Medium PageLayout to display a more complexe datatable or to create a page with several cards in it.

If you need to display more than one element in a page, use LayoutItem to create columns in your page.

Layout item

LayoutItem are used to create more complex PageLayout with columns. It helps to display more informations in the same page by keeping while maintaining legibility.

Be mindful when choosing LayoutItem to display informations. Few exemples :

• Use S LayoutItem to display text

• Prefer M LayoutItem for richer panel such as forms

Illustrations

Responsive Web Design

Responsive Web Design is the capacity of an interface to be adapted to any monitor resolution (from computer screen to mobile). With RWD, users are able to navigate through our products and perform their tasks, whatever their IT tool are.

Designs must be provided with responsive versions depending on breakpoints. Possible Breakpoint values are :

• lg (1440px)

• md (1080px)

• sm (768px)

• xs (540px)

Breakpoint Feature Block

Not all designs and features should be responsive. Indeed, we have seen with some of our complex functionalities that sometimes, on smaller screens, usability is degraded.

Thus, for features that would not work on smaller screens, designs must be provided with a Breakpoint feature block :

Breakpoint Feature Block is a specific empty state letting users understand why they cannot access the feature.

It's up to each project to define at which beakpoint this message is shown. The illustration, title and subtitle have default value but can be overided. By default, there is no Primary Button, but it can be added to redirect to another page is an alternative solution is available.

Key Takaway