Panel Overview

With the new release of the Cosmos Design System not only has the UX and UI received a visual refresh; but also, the information architecture’s approach has been clarified to be modular. Panels, in this new design, group similar collections of data in one place, creating consistency for our users throughout our software. 

There are two panels in Pega’s new UX architecture: the summary and preview panels. Both are comprised of a header, action button, metadata, and tabs.
Summary Panel 
The summary panel, which resides permanently on the left side of the screen and to the right of the menu, contains slots for unlimited critical data and core actions such as editing. Relevant case data becomes more digestive and puts more control in the user’s hand to view precisely the data that is relevant to them.
summary panel
Preview Panels 
The preview panel is activated through user activity, displaying additional information when the user wants to see more without having to open a new case. Content generated in the summary panel is reused throughout the UI as a preview, helping to reduce navigation and ultimately expedite workflow.
preview panel
Case Headers
Both versions of panels have a case header that informs the user of what object in the system they are looking at. These headers usually contain actions that a user can perform on that object. Headers are “sticky” on pages. “Case name” and “Case ID” are required elements. Other header elements, such as a case icon or status badge, are optional and should be used when the use case requires them.
On mobile devices, the case name and actions are the only parts that remain “sticky.” Other information moves to a second header layer that does not stick at the top of the screen. Case icons are hidden on mobile devices to save space.

Last updated: Dec 2019