Card
The Card component groups a title with optional actions. It can also make the entire surface interactive.
Import
Basic usage
Actions
Use the actions prop for controls that act on the card without activating the full card surface.
When using href or onClick, provide buttonAriaLabel so the full-card control has an accessible name.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Visible card title. |
| | | Sets the element used for the title. |
| | — | Displays controls on the trailing edge. |
| | — | Makes the full card navigate to the given path. |
| | — | Makes the full card perform an action. |
| | — | Labels the full-card interactive control. |
* An asterisk denotes that a prop is required.
Was this page helpful?