Page templates

Basic page structure

While Pega provides the tools to create unlimited page layouts, our strategic applications employ a few core page layouts.

Two column layout

For the default perform harness, default review harness, tree screenflow, and dashboard configuration.

Large desktop

The content has a maximum width of 1600px, and it is centered in the work area on the screen. When there is room for it, as shown, the side navigation panel on the left is fully expanded.

Large desktop example

Small desktop

At this size and larger the content is at its maximum width. Under this size, the left-side navigation collapses to the space-saving version to make more room for the content.

Small desktop example

Large laptop

Under 1928px, the left-side navigation collapses in order to allow more room for the content. The content continues to be centered in the available space.

Large laptop example

Laptop

The content continues to be 1600px maximum width until there is no more room. If the screen size is smaller than 1676px, the left (blue) panel begins to shrink.

Laptop example

Small laptop

The main content compresses from a maximum width of 1200px to a minimum width of 740px. 740px was chosen as minimum width because it works on screens as small as a tablet in portrait mode. UIs that work at this size give the most flexibility for working on many screen sizes and devices. This means that development teams can be more efficient in building experiences. After this point, the layout reflows to a single column layout.

Small laptop example

Single column layout

For landing pages, customer 360 views, and tabbed screen flows.

Large desktop

The content has a maximum width of 1600px, and it is centered in the work area on the screen. When there is room for it, the side navigation panel on the left is fully expanded.

Large desktop example

Small desktop

At this size and larger, the content is at its maximum width. Under this size, the left-side navigation collapses to the space-saving version to make more room for the content.

Small desktop example

Large laptop

Under 1928px, the left side navigation collapses to allow more room for the content. The content continues to be centered in the available space.

Large laptop example

Laptop

The content continues to be 1600px maximum width until there is no more room. If the screen size is smaller than 1676px, the content begins to shrink.

Laptop example

Small laptop

The content compresses from a maximum width of 1600px to 1140px before switching to a tablet mode.

Small laptop example

Tablet in Landscape mode

At this size, all content stacks with main elements on top, and the secondary elements below. All the content also stretches to 100% of the width.

Note that the secondary information (previously 386px wide) now stretches to 100%. This may require design changes for some use cases.

Landscape tablet example

Tablet in Portrait mode

This size comfortably fits the 740px minimum width for the action area.

Portrait tablet example

Phablet

Under 768px, the left/right margins are removed for more space. The main content area begins to compress below the 740px minimum width and all interactions and navigation are mobile-focused.

Phablet example

Phone

All controls and layouts are optimized for mobile. If phones are a primary use case for an application, consider using a specific mobile-first design.

Phone example

Last updated: Jun 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Modals and overlays