The Panels of the Design System

Lay out your application in order to match the environment. Panels are at the very core of our applications, as they structure the layout.

 

Basic

The basic layout structure can be made of three panels:

  • The central panel contains the main items of the application.
  • The left panel usually holds items related to quick filters.
  • The right panel can display extra details with some clickable items.

Basic_EN.png

 

Behavior

The behavior of the side panels changes depending on the size of the screen.

 

Simple

The side panel slides from the side of the page and squeezes the main content to fit in the screen right beside it.

Simple_EN.png

 

Action Menu

The action menu enables users to quickly access the main actions of the application. It takes shape as a panel on the right that displays, without sliding, on the top of the application.

Action_EN.png

 

Three-Quarter

Used when triggering either state of a single criterion.

ThreeQuarter_EN.png

These three-quarter panels use modals. See the Components of the Design System for more details.

 

See Finance Active's Design System for more details.

Was this article helpful?
0 out of 0 found this helpful