Cards are a UI element that represents a complete collection of information about an object.

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 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.

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 card footer optionally includes primary and secondary Buttons to progress a user through intended actions.

The Card component expects a set of child components that will compose the layout of its content. These child components include CardHeader, CardContent, and CardFooter, traditionally appearing in that order. All of the child components are optional and can be used in any configuration you wish.

This Card enables interactive CSS styling for hover and focus states. You may want to use this feature if the Card is intended to navigate the user or perform some action when they click on it.

The SelectableCard allows a user to select the entire Card. This component can feature either a Radio Button or Checkbox. The children passed to a Selectable Card will render as the label for the Radio Button or Checkbox.