# Card

Source: https://payloadcms.com/docs/beta/ui-components/card

The `Card` component groups a title with optional actions. It can also make the entire surface interactive.

## Import

Inside a Payload Admin Panel Custom Component:

```tsx
import { Card } from '@payloadcms/ui'
```

You can also import the component directly:

```tsx
import { Card } from '@payloadcms/ui/elements/Card'
```

## Basic usage

**Implementation**

```tsx
<Card title="Posts" />
```

**Styling**

Override Card tokens within the component selector to customize its surface, interactive state, border, and corner radius.

```css
@layer payload {
  .card {
    --color-bg-secondary: #f4f1ff;
    --color-bg-secondary-hover: #e9e3ff;
    --color-border: #c8bdf5;
    --radius-medium: 0.75rem;
  }
}
```

- `--color-bg-secondary`: Default card background.
- `--color-bg-secondary-hover`: Interactive card background on hover.
- `--color-border`: Card border color.
- `--radius-medium`: Card corner radius.

## Actions

Use the `actions` prop for controls that act on the card without activating the full card surface.

**Implementation**

```tsx
<Card
  actions={
    <Button
      aria-label="Create new Post"
      buttonStyle="ghost"
      icon={<PlusIcon size={16} />}
      margin={false}
      onClick={() => createPost()}
      round
    />
  }
  title="Posts"
/>
```

**Styling**

Override Card tokens within the component selector to customize its surface, interactive state, border, and corner radius.

```css
@layer payload {
  .card {
    --color-bg-secondary: #f4f1ff;
    --color-bg-secondary-hover: #e9e3ff;
    --color-border: #c8bdf5;
    --radius-medium: 0.75rem;
  }
}
```

- `--color-bg-secondary`: Default card background.
- `--color-bg-secondary-hover`: Interactive card background on hover.
- `--color-border`: Card border color.
- `--radius-medium`: Card corner radius.

When using `href` or `onClick`, provide `buttonAriaLabel` so the full-card control has an accessible name. Give controls passed to `actions` their own accessible names.

## 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                                     |
| ----------------- | ------------- | ------- | ----------------------------------------------- |
| `title` \*        | `string`      | —       | Visible card title.                             |
| `titleAs`         | `ElementType` | `'div'` | Sets the element used for the title.            |
| `actions`         | `ReactNode`   | —       | Displays controls on the trailing edge.         |
| `href`            | `string`      | —       | Makes the full card navigate to the given path. |
| `onClick`         | `() => void`  | —       | Makes the full card perform an action.          |
| `buttonAriaLabel` | `string`      | —       | Labels the full-card interactive control.       |

_\* An asterisk denotes that a prop is required._