# Card

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

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

## Import

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

## Basic usage

**Implementation**

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

**Styling**

Target the Card base class and its interactive modifier to change its surface, border, and hover treatment.

```css
.card {
  background: #f3f1ff;
  border: 1px solid #c8c0ff;
  border-radius: 8px;
}

.card--has-onclick:hover {
  background: #ebe7ff;
  border-color: #6d5dfc;
}
```

- `background`: Card surface color.
- `border`: Card border width, style, and color.
- `border-radius`: 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="icon-label"
      icon="plus"
      iconStyle="with-border"
      onClick={() => createPost()}
      round
    />
  }
  title="Posts"
/>
```

**Styling**

Target the Card base class and its interactive modifier to change its surface, border, and hover treatment.

```css
.card {
  background: #f3f1ff;
  border: 1px solid #c8c0ff;
  border-radius: 8px;
}

.card--has-onclick:hover {
  background: #ebe7ff;
  border-color: #6d5dfc;
}
```

- `background`: Card surface color.
- `border`: Card border width, style, and color.
- `border-radius`: Card corner radius.

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