| Table of Contents | ||||
|---|---|---|---|---|
|
...
Type | Description | Layout | Example |
Top navigation layout | Used by default for Verint applications. For more information, see VerinTop Top Navigation. |  |  |
Left navigation layout | Used for Verint applications with larger navigation menus. For more information, see VerinTop Left Navigation. |  |  |
Arrangement
Make sure there’s a natural flow between the elements on the page. Where there is a clear hierarchy between elements, it is recommended that they are arranged from top to bottom, left to right. For example:
the page subject is identified in the header area.
a list of available parameters for the main content are available on the left.
the main content is shown in the central workspace.
additional details on selected elements within the main content are displayed on the right.
Spacing
In order to provide visual and implementation consistency, an eight-point soft grid should be used for the spacing, sizing, and hierarchy of elements. This means that the spacing between items, padding, and margins should all be made up of multiples of eight: 8 px, 16 px, 24 px etc.
...
A division of 4 px is allowed for very small areas, but should be avoided where possible.
Some LUX objects have their own defined sizes, such as button widths and table row heights. These should not be resized to the 8 pt grid.
Where objects do not have a defined size they should adhere to the 8 pt grid,for consistency.
Margins
Pages will have margins of:
32px on both the left and right.
24px beneath the VerinTop and at the bottom.
Popups will have the following margins, which exclude the border:
40px on both the left and right.
24px in the header and footer.
Spacing examples
Full page layout | Popup and Popover | Text and lists |
|---|---|---|
 |  |  |
 |  |  |
Toolbar and icon-heavy example |
|---|
 |
Structure
Layouts consist of:
...
Page title (mandatory)
Additional header text, such as a page description
Tabs which change the view within the main workspace
Tools such as Search and action buttons
Other page metadata, such as status indicators
...
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.
The components contained within the header area should be aligned to either the left or right.
Breadcrumbs, header text, chickletschiclets, and tabs should be aligned to the left.
Action menus and other tools and metadata should be aligned to the right.
...
Textual and graphical content
...
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.
Interaction
The layout may not have a whole-page scroll. Each individual pane or workspace may have its own internal vertical scroll, where necessary.
The left and right panes may be collapsible, depending on the screen width. See individual pane specifications for further details.
...