Build / Molecules

EventRow

molecule
play-fn

One event in a list: when it is, what it is, where, and what you are to it.

The date is a torn-off calendar leaf rather than a line of prose, because a column of them can be scanned down — which is the only thing anyone does with a list of events. It is announced as one readable date, so a screen reader hears "18 May" and not "May" then "18".

attendance is your relationship to the event, deliberately not its lifecycle. Whether a conference is upcoming or past is already carried by the list it is in and the date on the left; whether you are speaking at it is not, and it is the thing that changes what you do next.

A row can also carry the people attached to it — whose cards you left with, or who you already know that is going. That is the answer to the only question anyone asks of an event either side of the date, and it is why a list of events is worth scrolling at all. Which of the two it is has to be said (peopleRelation), because the faces look identical and the facts are not interchangeable.

import { EventRow } from '@meetcard/deck'

Example

<EventRow name="RevOps Summit" date="2027-05-18" time="9:00 AM" venue="Austin Convention Center" attendance="attending" soon />

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 = () => <Card style={{ maxWidth: 620 }}>
    <EventRow
        name="RevOps Summit"
        date="2027-05-18"
        time="9:00 AM"
        venue="Austin Convention Center"
        attendance="attending" />
</Card>;

The list is already in date order, so "Soon" is doing what the order cannot: saying which one is close enough to need packing for.

Soon

Source

const Soon = () => <Card style={{ maxWidth: 620 }}>
    <EventRow
        name="RevOps Summit"
        date="2027-05-18"
        time="9:00 AM"
        venue="Austin Convention Center"
        attendance="attending"
        soon />
</Card>;

Your relationship to the event — not whether it has happened.

Attendance

Source

const Attendance = () => (
  <Card style={{ maxWidth: 620 }}>
    <EventRow
      name="RevOps Summit"
      date="2027-05-18"
      time="9:00 AM"
      venue="Austin Convention Center"
      attendance="attending"
      showWeekday
    />
    <EventRow
      name="Boulder Climate Happy Hour"
      date="2027-06-16"
      time="5:30 PM"
      venue="Rayback Collective"
      attendance="hosting"
      showWeekday
    />
    <EventRow
      name="SaaStr Annual"
      date="2027-09-09"
      time="10:00 AM"
      venue="Moscone West"
      attendance="speaking"
      showWeekday
    />
    <EventRow
      name="Founders Dinner"
      date="2027-11-02"
      time="7:00 PM"
      venue="The Wayfarer"
      attendance="invited"
      showWeekday
    />
  </Card>
);

With somewhere to go and something to do.

Linked

Source

const Linked = () => <Card style={{ maxWidth: 620 }}>
    <EventRow
        name="RevOps Summit"
        date="2027-05-18"
        time="9:00 AM"
        venue="Austin Convention Center"
        attendance="attending"
        href="/events/revops-summit"
        actions={(<Button size="sm" variant="secondary">Edit
                </Button>)} />
</Card>;

The compact form a dashboard uses — no weekday, no attendance.

Compact

Source

const Compact = () => <Card style={{ maxWidth: 620 }}>
    <EventRow
        name="RevOps Summit"
        date="2027-05-18"
        time="9:00 AM"
        venue="Austin Convention Center"
        attendance={undefined} />
</Card>;

A row from the events list, carrying everything the list is scrolled for: who put it on, what it looked like, and who you came away with.

With Host And Cards

Source

const WithHostAndCards = () => <Card style={{ maxWidth: 620 }}>
    <EventRow
        name="RevOps Summit"
        date="2027-05-18"
        time="9:00 AM"
        venue="Austin Convention Center"
        attendance="attending"
        showWeekday
        href="/events/revops-summit"
        host={{ name: 'Hannah Davis' }}
        people={[
          { name: 'Hannah Davis' },
          { name: 'Marcus Lee' },
          { name: 'Priya Shah' },
          { name: 'Diego Romero' },
          { name: 'Lena Fox' },
        ]} />
</Card>;

A conference where you met more people than a row can show. The faces are a sample; the count is the fact.

More Cards Than Faces

Source

const MoreCardsThanFaces = () => <Card style={{ maxWidth: 620 }}>
    <EventRow
        name="SaaStr Annual"
        date="2027-09-09"
        time="9:00 AM"
        venue="Moscone West"
        attendance="speaking"
        peopleCount={41}
        people={[
          { name: 'Ada Chen' },
          { name: 'Owen Hale' },
          { name: 'Nora Quinn' },
          { name: 'Arlo Bennett' },
          { name: 'Dev Patel' },
        ]} />
</Card>;

Props

Prop	Type	Default	Description
`date`required	`string`	—	ISO 8601 date, e.g. "2027-05-18". Rendered in the viewer's locale.
`name`required	`string`	—	—
`actions`	`ReactNode`	—	—
`attendance`	`'attending' \| 'hosting' \| 'speaking' \| 'invited'`	—	Your relationship to the event, not its lifecycle state.
`coverSrc`	`string`	—	The event's cover, as a thumbnail. Decorative: it is how you recognise an event you have seen before, and the name beside it is what says which one this is. Dropped below `sm`, where the name needs the width more than the picture does.
`host`	`{ name: string; avatarSrc?: string }`	—	Who is putting it on, named in the meta line.
`href`	`string`	—	Makes the name a link to the event.
`people`	`AvatarGroupPerson[]`	—	The people attached to this event, shown as faces.
`peopleCount`	`number`	—	How many people in total, when that is more than the faces shown — a conference where you met forty shows five of them and says forty. Defaults to however many `people` were given.
`peopleRelation`	`'exchanged' \| 'going'`	`'exchanged'`	What those people are to the event. `exchanged` is whose cards you came away with; `going` is who you already know that will be there. They are the same faces in the same place and they are not the same fact: an event three weeks out cannot have produced a card yet, and a row that says it did is the list lying about the past.
`showWeekday`	`boolean`	`false`	Show the weekday under the date. Off in tight lists.
`soon`	`boolean`	—	Marks the next one up. The list is already in date order, so this is doing something the order cannot: saying which one is close enough to need packing for.
`time`	`string`	—	Start time, already phrased — "9:00 AM". Deck does no time formatting.
`venue`	`string`	—	—

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