# Kanban Column

> Data in Twentyfirst UI.

Component · Data · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/KanbanColumn/)

## Example

```tsx
import { AvatarStack, Badge, Card, KanbanColumn } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        maxWidth: 300,
      }}
    >
      <KanbanColumn title="In review" dot="lilac">
        <Card
          title="Billing settings flow"
          meta={["Due Fri"]}
          status={<Badge tone="highlight">Review</Badge>}
          actions={[<AvatarStack key={1} names={["Mara Ellis", "Sun Lee"]} size={24} />]}
        />
        <Card
          title="Empty states for reports"
          meta={["Due Mon"]}
          status={<Badge tone="warning">Changes</Badge>}
        />
      </KanbanColumn>
    </div>
  );
}
```

## Props

### AvatarStack

| Prop | Type | Notes |
| --- | --- | --- |
| `names` | `string[]` | Required |
| `max?` | `number` |  |
| `size?` | `number` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Badge

| Prop | Type | Notes |
| --- | --- | --- |
| `tone?` | `Tone` |  |
| `dot?` | `boolean` |  |
| `live?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Card

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` |  |
| `description?` | `string` |  |
| `meta?` | `string[]` |  |
| `corner?` | `ReactNode` |  |
| `status?` | `ReactNode` |  |
| `actions?` | `ReactNode[]` |  |
| `tint?` | `Tint \| "surface"` |  |
| `onClick?` | `() => void` |  |
| `children?` | `ReactNode` |  |
| `eyebrow?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### KanbanColumn

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Required |
| `dot?` | `Tint` |  |
| `delay?` | `number` |  |
| `children?` | `ReactNode` |  |
| `onAdd?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |