Case headers

Case headers

Case headers inform 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 (case icon, status badge, etc.) are optional and should be used when the use case requires them.

Case header example

Mobile

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.

Mobile case header example

Last updated: Jun 2017

Landing page header

Landing pages are pages in an application that are not directly related to a specific case or object. Usually they are lists or search pages. There can be actions on this page.

Landing page example

Mobile

On mobile devices, the page name and actions remain. Any decorative icons are hidden.

Mobile landing example

Last updated: May 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: Content containers