Shortcuts
Next region
F9
Previous region
ShiftF9
Jump to toast
⌥Enter
Dismiss toast
⌥Q
Go to incoming interaction popup.
⌥Enter
Dismiss incoming interaction popup.
⌥Q

Card

Cards represent a complete collection of information about an object. They are used to visually group blocks of content or interactions together.

Example

Simple Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Anatomy

A card can consist of three sections: a header, body, and footer.

A card header always has a title and, in some cases, can have imagery and actions. The title and imagery are located on the left, while the actions are located on the right side of the card header. These visual guidelines persist throughout all use cases.

The card body accommodates any layout or design of related information. In modals, follow typography guidelines. In cards with editable content, follow guidelines for text input fields and form design. The body section allows for flexibility in design depending on the content needed to display to the user.

A card footer can optionally include primary and secondary buttons to progress a user through intended actions.

Configuration

Cards are the default content container for much of the application experience, and are often configured within Views. To learn how to configure Views in Constellation, visit Pega Documentation.

All information on this site pertains to the Constellation UX System (from 8.8 and onwards). Looking for something else? See resources specifically for Theme Cosmos. If you have questions, concerns, or any other feedback, please reach to us on Pega Support and include the capability 'User Experience' and 'Constellation' in your request.