Build / Molecules

EventMetaList

molecule

A row of read-only facts about an event — date, time, location, attendee count — each as its own small card.

A list rather than a description list: an icon sits alongside the label/value pair, and <dl>'s content model doesn't allow a sibling element next to the dt/dd pair inside its wrapping div (the same reason BookingSummary uses one). Unlike BookingSummary, these items are display-only with no edit affordance — this is a fact sheet for a page a visitor lands on, not a recap of choices they're still mid-flow on.

import { EventMetaList } from '@meetcard/deck'

Example

<EventMetaList items={[ { icon: <CalendarIcon />, label: 'Dates', value: 'May 4–8, 2026' }, { icon: <PinIcon />, label: 'Location', value: 'Boulder, Colorado' }, ]} />

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.

A multi-day event: dates, place, attendance.

Multi Day Event

Source

const MultiDayEvent = () => <EventMetaList
    items={[
      { icon: <CalendarIcon />, label: 'Dates', value: 'May 4–8, 2026' },
      { icon: <PinIcon />, label: 'Location', value: 'Boulder, Colorado' },
      { icon: <PeopleIcon />, label: 'Attendees', value: '1 attending' },
    ]} />;

A single evening — date and time get a line each.

Single Day Event

Source

const SingleDayEvent = () => <EventMetaList
    items={[
      { icon: <CalendarIcon />, label: 'Date', value: 'Tue, Jul 21, 2026' },
      { icon: <CalendarIcon />, label: 'Time', value: '5:30 PM – 7:00 PM' },
      { icon: <PinIcon />, label: 'Location', value: 'Number Thirty Eight, Denver' },
    ]} />;

Without icons, where the list sits in dense copy and glyphs would be noise.

Without Icons

Source

const WithoutIcons = () => <EventMetaList
    items={[
      { label: 'Dates', value: 'May 4–8, 2026' },
      { label: 'Location', value: 'Boulder, Colorado' },
    ]} />;

Props

Prop	Type	Default	Description
`items`required	`EventMetaItem[]`	—	—
`className`	`string`	—	—