Build / Organisms

EventCard

organism
play-fn

An event as a card — for the public event page, a company's events listing, and the app's Events destination.

The date renders in the viewer's locale but is wrapped in a <time> with the machine-readable value, so the real date survives translation.

import { EventCard } from '@meetcard/deck'

Example

<EventCard name="RevOps Summit" startDate="2027-05-18" location="San Francisco" status="upcoming" connectionCount={42} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco" />
</div>;

Spanning several days. The range collapses to one month where it can.

Multi Day

Source

const MultiDay = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco"
        endDate="2027-05-20" />
</div>;

Still to come.

Upcoming

Source

const Upcoming = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco"
        status="upcoming" />
</div>;

A dot supplements color so "live" is not signalled by hue alone.

Live

Source

const Live = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco"
        status="live"
        connectionCount={12} />
</div>;

Already happened, with how many people you met there.

Past

Source

const Past = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco"
        status="past"
        connectionCount={42} />
</div>;

Linked, so the name leads to the event's own page.

Linked

Source

const Linked = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco"
        href="/events/revops-summit-2027-05-18"
        status="upcoming" />
</div>;

With an action, for joining without leaving the list.

With Actions

Source

const WithActions = () => <div style={{ maxWidth: 440 }}>
    <EventCard
        name="RevOps Summit"
        startDate="2027-05-18"
        location="Moscone Center, San Francisco"
        status="upcoming"
        actions={(<Button size="sm" variant="secondary">Join
                </Button>)} />
</div>;

The Events destination in the app.

In A List

Source

const InAList = () => <Stack as="ul" gap={12} style={{ maxWidth: 440 }}>
    <li>
        <EventCard
            name="RevOps Summit"
            startDate="2027-05-18"
            location="Moscone Center, San Francisco"
            status="live"
            connectionCount={12} />
    </li>
    <li>
        <EventCard
            name="SaaSConf"
            startDate="2027-06-02"
            endDate="2027-06-04"
            location="Austin, TX"
            status="upcoming" />
    </li>
    <li>
        <EventCard
            name="Field Marketing Meetup"
            startDate="2026-11-12"
            location="London, UK"
            status="past"
            connectionCount={8} />
    </li>
</Stack>;

Props

Prop	Type	Default	Description
`name`required	`string`	—	—
`startDate`required	`string`	—	ISO 8601 date, e.g. "2027-05-18". Rendered in the viewer's locale.
`actions`	`ReactNode`	—	—
`connectionCount`	`number`	—	Connections captured at this event.
`endDate`	`string`	—	ISO 8601 end date for multi-day events.
`href`	`string`	—	Public event URL — `meetcard.io/events/{slug}-{YYYY-MM-DD}`.
`location`	`string`	—	Venue or city, e.g. "Moscone Center, San Francisco".
`status`	`'upcoming' \| 'live' \| 'past'`	—	Lifecycle state. Drives the status pill.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.