Build / Molecules

AttendeeList

molecule

Who's coming to an event — a compact identity row per attendee, distinct from PersonCard: this is a scannable list entry, not the full business card. role/company collapse to one muted line rather than PersonCard's separate fields, and there's no contact actions or footer.

import { AttendeeList } from '@meetcard/deck'

Example

<AttendeeList attendees={[ { name: 'Ben Ackles', role: 'Product Marketing', company: 'MeetCard', companyHref: '/companies/meetcard', href: '/ben' }, ]} />

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 = () => <AttendeeList
    attendees={[
      {
        name: 'Ben Ackles',
        role: 'Product Marketing',
        company: 'MeetCard',
        companyHref: '/companies/meetcard',
        href: '/ben',
      },
    ]} />;

Several people. Each row stays one scannable line however long the role or company.

Multiple Attendees

Source

const MultipleAttendees = () => <AttendeeList
    attendees={[
      {
        name: 'Ada Lovelace',
        role: 'Head of Partnerships',
        company: 'MeetCard',
        companyHref: '/companies/meetcard',
        href: '/ada',
      },
      {
        name: 'Priya Shah',
        role: 'Sales',
        company: 'MeetCard',
        companyHref: '/companies/meetcard',
        href: '/priya',
      },
      { name: 'Jordan Reyes', role: 'Founder', company: 'Acme Robotics' },
    ]} />;

Attendees without a profile link render as plain, non-interactive rows.

Without Links

Source

const WithoutLinks = () => <AttendeeList
    attendees={[{ name: 'Jordan Reyes', role: 'Founder', company: 'Acme Robotics' }]} />;

Props

Prop	Type	Default	Description
`attendees`required	`EventAttendee[]`	—	—
`className`	`string`	—	—
`label`	`string`	`"Who's attending"`	Accessible name for the list region.