Card overview

Cards are a UI element that represents actionable information about an object. 

Cosmos Work card

All card variations within Pega share three sections: a header, body, and footer. The header and footer have visual guidelines that persist throughout all use cases. The body section allows for flexibility in design depending on the content needed to display to the user.
A card header always has a title and in some cases, can have an icon and actions. The title and icon are located on the left, while the actions are located on the right side of the card header.
The card body accommodates any layout or design of related information. In modals, typography guidelines should be followed. In To Do cards, text input field usage and form design guidelines should be followed.
The card footer includes primary and secondary buttons to progress a user through an intended action. This guidance applies both in modal and to do card use cases.
Contextual Header Actions
Actions, located in the upper-right hand corner, relate to the content inside of the widget cards. Sometimes this is represented by an icon. Sometimes this is represented by a button. In the Followers widget, the “add” icon represents the user’s ability to add a business user to the case. In the Files and Documents widget, the overflow menu enables a user to upload or filter the content shown here.

Cosmos Work utilities card

Cosmos Work utilities card

Last updated: Oct 2020