Card

Low-code configurable 8.6

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

All card variations within Pega share 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, typography guidelines should be followed. In cards with editable content, text input field usage and form design guidelines should be followed. The body section allows for flexibility in design depending on the content needed to display to the user.

The card footer optionally includes primary and secondary buttons to progress a user through intended actions.

Basic card

The basic card component has a set of child components that compose the layout of its content. These child components include the card header, card content, and card footer, traditionally appearing in that order. All of the child components are optional and can be used in any configuration you wish.