EventCard

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Avatar, AvatarGroup } from '@nizivo/react/avatar';
import { EventCard } from '@nizivo/react/unstable/event-card';

export function EventCardExample(): JSX.Element {
  return (
    <div style={{ maxInlineSize: 440 }}>
      <EventCard
        title="Autumn collection live drop"
        date="2026-11-16T18:00:00Z"
        timeZone="UTC"
        when="18:00 – 19:00 · Instagram Live"
        attendees={
          <AvatarGroup total={7} size="md">
            <Avatar name="Maya Rao" />
            <Avatar name="Jonah Okafor" />
            <Avatar name="Priya Raman" />
          </AvatarGroup>
        }
      />
    </div>
  );
}

ImportCopy Anchor Link

import { EventCard } from '@nizivo/react/unstable/event-card';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/event-card.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript. How to choose.

The dateCopy Anchor Link

date is a Date or an ISO 8601 string. The block shows the weekday and the day; it is presentational, and the full date is a <time datetime> read with the details. locale formats it and timeZone sets the zone: pass one, so the server's date and the browser's agree.

ContentCopy Anchor Link

title is the card's heading (headingLevel, 3 by default), when the time and place, and attendees who is going, best an AvatarGroup, followed by "going".

PropsCopy Anchor Link

Other exportsCopy Anchor Link

EventCardLabels type

import type { EventCardLabels } from '@nizivo/react/unstable/event-card'

EventCard's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
goingrequired	string	'going'	After the attendees.

EventCardProps type

import type { EventCardProps } from '@nizivo/react/unstable/event-card'

The props of EventCard, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-event-card, .nz-event-card-date, .nz-event-card-day, .nz-event-card-details, .nz-event-card-icon, .nz-event-card-month, .nz-event-card-people, .nz-event-card-title, .nz-event-card-when.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.