Content containers

Content container types

Primary container

Primary containers often hold dashboard widgets, charts, or other information on a page. They use a container style called “Default.” These tiles contain discrete widgets and content. They're most often used to segment information on a dashboard, review harness, or landing page.

A primary container should not be nested inside another primary container. Primary containers appear directly on a page or inside an action container. If a subheader is needed inside a primary container, use an “Alternate,” “Nested,” or a custom container style.

Primary container example

Action container

The user's main work area on any screen should appear inside an action container. This container typically includes the name of the assignment, due date, and the task owner’s avatar.

The background of this container is blue, to call attention to the task that the user needs to complete. This color distinction separates the task from other information on the screen, keeping users focused, while allowing them to reference the surrounding data easily.

Action container example

Secondary container

Secondary information can be shown in various ways. Either a “nested” container can be put inside a primary or action container, or a secondary container can be used. Secondary containers have a gray background which helps them take less attention from the primary information. The gray, secondary container can also be used inside a primary container to differentiate levels of content.

Secondary container example

Last updated: May 2017

Content container behavior

Header actions

Primary and secondary content container headers display actions in the upper right corner. Common actions can be represented by an icon. Other actions should have a clear label. If the actions are common, two can be shown at a time. If the action is not common, one can be shown. When more than two common actions or one uncommon action need to be available, use a menu.

A header with two common actions, refresh, and add.

Common actions example

A header with one uncommon action, “evaluate application”.

Uncommon actions example

A header with a primary common action and a menu.

Menu of actions example

Buttons

If a process is “moved” by an action, the action should be indicated by a button at the bottom of a card. Actions that move a process “forward” should be on the right side of the card. Actions that move a process “backward” or cancel should be on the left side. The primary action should be farthest to the right, and should be the only one in the “strong” button style.

Example of the actions “Submit” and “Cancel.”

Standard buttons example

Example of the actions “Next,” “Back,” and “Cancel”.

Next and Back buttons example

Example of the actions “Approve,” “Reject,” and “Cancel”. Both “Reject” and “Approve” move the process along, so they are both on the right.

Reject action example

Size

Containers can be any size, but there are some guidelines to be aware of:

  • Containers displayed in the secondary information area should be 386px wide.
  • Case and action views have an overall maximum width of 1600px.
  • Containers displayed in the primary information area have a minimum width of 720px.
  • Learn more about Page templates here.

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: Notifications