Table of Contents

minLevel	1
maxLevel	2

...

Layouts consist of:

VerinTop
Ribbon (optional, top navigation layout only)
Header area
Main workspace
Left pane, containing either:
- Left navigation (left navigation layout only)
- Filter pane (optional, top navigation layout only)
Right Details Pane (optional)

...

See the VerinTop page for more information.

...

Ribbon

Ribbon should be used where there are a lot of controls for the main workspace. The ribbon should:

be fixed underneath the VertinTop.
be the full width of the page, with the exception of the filter pane (where exists).
be collapsible.

...

.

For more information, see Ribbon.

Header area

The header area contains information which relates to the whole page.

...

Breadcrumbs
Page title (mandatory)
Header text, such as a page description.
Chicklets for applied filters.
Tabs which change the view within the main workspace.
Tools such as Search or an Action Menu and actions.
Other page metadata, such as a status indicator.

Placement and Positioning

The header is positioned at the top of the page, directly underneath the VerinTop.
The height of the header area may vary, depending on which components are included.
The header area should be the full width of the page, with the exception of the left pane. It may optionally stretch above the details pane.
Breadcrumbs, header text, and tabs should be aligned to the left-hand side of the header area.
The action menu Action menus and status indicators should be aligned to the right-hand side.

...

The layout of sections should also have a clear hierarchy, ordered left-to-right, top-to-bottom.

...

REPLACE IMAGE

Structure

Each section should have:

...

The spacing between each section should be consistent across the workspace.

Should there be rules about how many sections or how they’re arranged? Only 3 columns (left-centre-right) etc?

Interaction

Sections should be of a fixed proportional width, with a height responsive to their content. They should not be adjustable by the user. Where the user has control over the layout of sections, use a Widget Dashboard.

...

The right-hand details pane should be used to present information and actions relating to selected items within the main content, or additional content related to the main workspace.

For full details, see Details Pane.

...

Where there is not enough space to display the full layout, the main workspace should be prioritised. Other areas within the layout may be collapsed or minimised, including the left and right panes.
The content of the main workspace should be fluid, dynamically adapting to the size of the available area, even as it changes during use. This may include changing text, graphics, table, and spacing sizes. The available space may change due to the state of collapsible panes as well as screen size.
Where sections are used within the main workspace:
- as the width of the workspace changes, so should the widths of the individual sections within it. The proportion of the width that each section uses should remain the same.
- the layout of the content within each section should dynamically respond to its width.
- breakpoints may be introduced, at which the sections may be rearranged into a more appropriate layout. For example, a minimum-width workspace breakpoint may make all sections full width and vertically stacked.
Where space is severely limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible. ??
~~Using a mobile-first approach can make layout design and implementation easier.~~
When the screen width is changed, anchored panes and components should remain fixed to the left- or right-hand side.
The size and spacing of individual components and fixed panes (such as the Filter Pane and Details Pane) should not change as the layout dynamically responds.
See the recommended responsive design for individual components, where necessary.