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.
Card
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Cards represent a complete collection of information about an entity or region. They are used to visually group blocks of content or interactions together.
Usage
The Card component is an <article/> that is designed to elevate content against a non-primary color background. It will render any children passed to it and will grow or shrink in size accordingly.
Example
Anatomy
Media
The CardMedia component is intended to wrap Images, videos, or audio content. It will stretch the content to the full width of the Card. While it can be used anywhere within a Card, it is best utilized at the top, above any header.
Header
The CardHeader component will render its content, typically Text, at the top of a Card. If actions are provided, they will render inline with the other header content.
Content
The CardContent component is a Flex container capable of accepting any Flex container props. It is reccommended to use the CardContent component to wrap any content in order to apply proper padding throughout the Card.
Footer
The CardFooter component will render its children at the bottom of a Card. This content can be aligned using the justify prop.
Full demo
The following demo combines all of the Card components discussed above to create a full representation of a Card.
Example
Full 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.
Related components
Properties
| Name | Description | Default | Type |
|---|---|---|---|
as | HTML tag or React Component to render the component as. | | ElementType<any> |
children | Components and content for the Card. | | ReactNode |
className | Additional CSS classes. | | string |
forwardedAs | HTML tag or React Component to finally render the component as. | | ElementType<any> |
interactive | Enables the focus, hover, and active styles. | false | boolean |
onClick | | (event: any) => void | |
role | HTML role attribute for accessibility. | "region" | string |
Custom theming
You can override the styles of the Card component by setting a custom theme on the Configuration component.
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.
Theme properties
{
'border-radius':'base.border-radius',// → base.border-radiusbackground:'base.palette.primary-background',// → base.palette.primary-backgroundpadding:'base.spacing',// → base.spacing'border-color':'base.palette.interactive'// → base.palette.interactive}}}