# Event Card

> Data in Twentyfirst UI.

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

## Example

```tsx
import { EventCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-col"
      style={{
        maxWidth: 300,
      }}
    >
      <EventCard kind="meeting" label="Team sync" date="Tue, Apr 14" time="10:30">
        Roadmap check-in with design and growth; bring last sprint numbers.
      </EventCard>
      <EventCard kind="deadline" label="Deadline" date="Fri, Apr 17" time="17:00">
        Send Q2 invoices to all annual customers.
      </EventCard>
    </div>
  );
}
```

## Props

### EventCard

| Prop | Type | Notes |
| --- | --- | --- |
| `kind?` | `"meeting" \| "deadline" \| "review" \| "launch" \| "incident"` |  |
| `label` | `string` | Required |
| `date` | `string` | Required |
| `time` | `string` | Required |
| `tint?` | `Tint` |  |
| `icon?` | `IconName` |  |
| `actions?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |