Components

Basic page structure

Pega allows for the creation of any page layout needed, however, for our strategic applications we employ specific standards.

Spacing

Pega applications use a 7px scale for sizing and spacing.

Diagram showing the spacing of a typical dynamic layout

General and default text is 14px tall, and most spacing is 14px. There are some cases where smaller (7px, 3.5px) or larger (21px+) spacing is needed. Using 7 as a base ensures that the spacing is consistent throughout.

Diagram showing the spacing of the assignments widget

Inputs and buttons are 32px tall in order to accommodate text with sufficient spacing. Most buttons also have a minimum width of 105px.

Diagram showing the spacing between two form fields

Desktop/laptop

The application header is for global actions such as application-wide search, user settings, and—if there are fewer than six links—global navigation.

The sidebar (<aside>) is used for global navigation.

The main (<main>) area is considered the “work area’’ or primary canvas. Typically a right column ajoins the work area for configuration, settings, and contextual information/assets (e.g., attachments, related content).

Handheld — Responsive/Adaptive

Pega 7 UI can be set up for both responsive UI (e.g., a single UI that renders its form and function appropriately for the screen size) and adaptive UI (e.g., a specific UI selected by the server to render optimally for the particular device in use). This ensures delivery of the right experience for a particular device (and/or user role, etc.). To accommodate the potential need for a wider array of breakpoint targets, we target specific dimensions for each display category.

  • Mobile — Less than 480px
  • Tablets/smaller displays — Between 480px and 768px
  • Larger displays — More than 768px
Mobile example

Last updated: Mar 2017

Common layouts

Dashboard

Dashboard example

Case manager perform harness

Case overview example

CLM

Perform action page example

Landing page (grid)

Grid landing page example

Last updated: Mar 2017

Next: Examples