A pane is a FOLIO core component that acts as a container for the information to be displayed without cluttering the screen.   

Screen with 4 panes

Responsive layout

Content

Panes are composed of a pane header and content that shall be arranged into a 12 columns grid layout, allowing it to be responsive when the pane resize.

Breakpoints

When the screen width is wider than 1025px, panes shall appear next to each other.

When the screen width is lower than 1025px, the most recent pane shall overlay on top of the other.

When the screen width is lower than 641px, only the most recent pane shall be displayed.

View prototype

Behavior

Pane headers

Pane headers allow users to know what set of information is displayed in the pane.

They also allow users to perform actions or hide the pane.

Close pane

By clicking on the close icon, panes close, leaving more space for the remaining panes.

Panes transition

New panes slide flex-end while the other panes resize.

The Record pane resized when the Notes pane slide from the right.

Related pages

FOLIO layout aims to be very intuitive.It is composed of a universal header and panes to display content, within an app, in a digestible ma...
The pane header allows users to quickly understand the purpose of each pane and their relationship to each other.
The pane menu allows users to perform actions related to the pane content