<EventPreview
  event={{
    tag: 'Webinar',
    title: (
      <Heading as="h1" mb={3}>
        Vestibulum proin eu mi nulla ac enim in tempor turpis
      </Heading>
    ),
    date: 'October 14, 1983, 1:30 PM EDT (60 minutes)',
    speakers: <Names values={['Willow Rangall', 'Suzy Cahan']} mb={3} />,
    href: '/events/vestibulum-proin-eu',
    registrationLink: '/register',
  }}
  m={2}
/>

<EventPreview
  event={{
    tag: 'Webinar',
    title: (
      <Heading as="h1" mb={3}>
        Vestibulum proin eu mi nulla ac enim in tempor turpis
      </Heading>
    ),
    date: 'October 14, 1983, 1:30 PM EDT (60 minutes)',
    speakers: <Names values={['Willow Rangall', 'Suzy Cahan']} mb={3} />,
    href: '/events/vestibulum-proin-eu',
    registrationLink: '/register',
  }}
  m={2}
/>

In this example we render speakers with Avatars and add a description:

Webinar

Vestibulum proin eu mi nulla ac enim in tempor turpis

Willow Rangall (Moderator)

Suzy Cahan

Sandra Abramovici

October 14, 1983, 1:30 PM EDT (90 minutes)

Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum. In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.

<EventPreview
  event={{
    tag: 'Webinar',
    title: (
      <Heading as="h1" mb={3}>
        Vestibulum proin eu mi nulla ac enim in tempor turpis
      </Heading>
    ),
    date: 'October 14, 1983, 1:30 PM EDT (90 minutes)',
    speakers: (
      <Avatars
        values={[
          {
            id: 'a6b4babd-6b11-4b81-8ac0-73cefb040cb7',
            avatar: (
              <Image
                alt="Portrait of Willow Rangall"
                sx={{ borderRadius: '50%', height: 64, width: 64 }}
                src="/avatar0.png"
              />
            ),
            name: (
              <Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>
                Willow Rangall (Moderator)
              </Heading>
            ),
            href: '/profiles/willow-rangall',
          },
          {
            id: '561285d3-4eed-473c-baba-6b3564f4e6a7',
            avatar: (
              <Image
                alt="Portrait of Suzy Cahan"
                sx={{ borderRadius: '50%', height: 64, width: 64 }}
                src="/avatar1.png"
              />
            ),
            name: (
              <Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>
                Suzy Cahan
              </Heading>
            ),
            href: '/profiles/suzy-cahan',
          },
          {
            id: '453d9d8a-b1e6-4cac-9fdd-b6c354fa3262',
            avatar: (
              <Image
                alt="Portrait of Sandra Abramovici"
                sx={{ borderRadius: '50%', height: 64, width: 64 }}
                src="/avatar2.png"
              />
            ),
            name: (
              <Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>
                Sandra Abramovici
              </Heading>
            ),
            href: '/profiles/sandra-abramovici',
          },
        ]}
        align="start"
        mb={3}
      />
    ),
    description: (
      <Text as="p" variant="text.default" mb={3}>
        Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed
        interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu
        massa. Donec dapibus. Duis at velit eu est congue elementum. In hac
        habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis,
        diam erat fermentum justo, nec condimentum neque sapien placerat ante.
        Nulla justo.
      </Text>
    ),
    registrationLink: '/register',
  }}
  m={2}
/>

<EventPreview
  event={{
    tag: 'Webinar',
    title: (
      <Heading as="h1" mb={3}>
        Vestibulum proin eu mi nulla ac enim in tempor turpis
      </Heading>
    ),
    date: 'October 14, 1983, 1:30 PM EDT (90 minutes)',
    speakers: (
      <Avatars
        values={[
          {
            id: 'a6b4babd-6b11-4b81-8ac0-73cefb040cb7',
            avatar: (
              <Image
                alt="Portrait of Willow Rangall"
                sx={{ borderRadius: '50%', height: 64, width: 64 }}
                src="/avatar0.png"
              />
            ),
            name: (
              <Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>
                Willow Rangall (Moderator)
              </Heading>
            ),
            href: '/profiles/willow-rangall',
          },
          {
            id: '561285d3-4eed-473c-baba-6b3564f4e6a7',
            avatar: (
              <Image
                alt="Portrait of Suzy Cahan"
                sx={{ borderRadius: '50%', height: 64, width: 64 }}
                src="/avatar1.png"
              />
            ),
            name: (
              <Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>
                Suzy Cahan
              </Heading>
            ),
            href: '/profiles/suzy-cahan',
          },
          {
            id: '453d9d8a-b1e6-4cac-9fdd-b6c354fa3262',
            avatar: (
              <Image
                alt="Portrait of Sandra Abramovici"
                sx={{ borderRadius: '50%', height: 64, width: 64 }}
                src="/avatar2.png"
              />
            ),
            name: (
              <Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>
                Sandra Abramovici
              </Heading>
            ),
            href: '/profiles/sandra-abramovici',
          },
        ]}
        align="start"
        mb={3}
      />
    ),
    description: (
      <Text as="p" variant="text.default" mb={3}>
        Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed
        interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu
        massa. Donec dapibus. Duis at velit eu est congue elementum. In hac
        habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis,
        diam erat fermentum justo, nec condimentum neque sapien placerat ante.
        Nulla justo.
      </Text>
    ),
    registrationLink: '/register',
  }}
  m={2}
/>

This is an example of an event without speakers:

Webinar

Vestibulum proin eu mi nulla ac enim in tempor turpis

14–15 Oct 1983, 12:00–13:30 EDT

Details Register

<EventPreview
  event={{
    tag: 'Webinar',
    title: (
      <Heading as="h1" mb={3}>
        Vestibulum proin eu mi nulla ac enim in tempor turpis
      </Heading>
    ),
    date: '14–15 Oct 1983, 12:00–13:30 EDT',
    href: '/events/vestibulum-proin-eu',
    registrationLink: '/register',
  }}
  m={2}
/>

<EventPreview
  event={{
    tag: 'Webinar',
    title: (
      <Heading as="h1" mb={3}>
        Vestibulum proin eu mi nulla ac enim in tempor turpis
      </Heading>
    ),
    date: '14–15 Oct 1983, 12:00–13:30 EDT',
    href: '/events/vestibulum-proin-eu',
    registrationLink: '/register',
  }}
  m={2}
/>

System props

EventPreview supports space props and color props from Styled System.

Component props

Name	Type	Default	Required	Description
event	Object		✓	See below.

Event

Name	Type	Required	Description
tag	String		Tag that is dispalyed at the top.
title	Node	✓	Component that renders a title (composition pattern).
speakers	Node		Component that renders speakers (composition pattern).
date	String	✓	Formatted event date.
description	Node		Component that renders a description (composition pattern).
href	String		Link to event page. Triggers rendering of details button when present.
registrationLink	String		Link to registration page. Triggers rendering of registration button.

title, speakers and description are React components that give you flexibility in how to render an EventPreview without making its component API too complicated. But this flexibility comes with the responsiblity to manage margins. Generally, you should use bottom margins only and no top margins:

title may not have a top margin, only a bottom margin. The bottom margin spaces it from what follows, either speakers or the date.
speakers may not have a top margin, only a bottom margin. The bottom margin spaces it from the date.
description may not have a top margin, only a bottom margin. The bottom margin should be zero if it is not followed by a button.

Variants

You can customize EventPreview by defining the following variants in your theme:

Key	Description
`event-preview.badge`	Customize optional tag.
`event-preview.buttons.event`	Customize optional event button.
`event-preview.buttons.registration`	Customize optional registration button.

In this example we define above variants in a ThemeProvider to customize the look of the tag and buttons (you would normally do this in your theme):

Webinar

Vestibulum proin eu mi nulla ac enim in tempor turpis

Willow Rangall, Suzy Cahan

October 14, 1983, 1:30 PM EDT (60 minutes)

Details Register

<ThemeProvider
  theme={{
    buttons: {
      default: {
        fontSize: 2,
        fontWeight: 'bold',
        borderRadius: 0,
      },
    },
    'event-preview': {
      badge: {
        borderRadius: 0,
        bg: 'secondary',
      },
      buttons: {
        event: {
          variant: 'buttons.default',
          bg: 'secondary',
        },
        registration: {
          variant: 'buttons.default',
          boxShadow: '0 0 0 2px inset',
          color: 'secondary',
          bg: 'inherit',
        },
      },
    },
  }}
>
  <EventPreview
    event={{
      tag: 'Webinar',
      title: (
        <Heading as="h1" mb={3}>
          Vestibulum proin eu mi nulla ac enim in tempor turpis
        </Heading>
      ),
      date: 'October 14, 1983, 1:30 PM EDT (60 minutes)',
      speakers: <Names values={['Willow Rangall', 'Suzy Cahan']} mb={3} />,
      href: '/events/vestibulum-proin-eu',
      registrationLink: '/register',
    }}
    m={2}
  />
</ThemeProvider>

<ThemeProvider
  theme={{
    buttons: {
      default: {
        fontSize: 2,
        fontWeight: 'bold',
        borderRadius: 0,
      },
    },
    'event-preview': {
      badge: {
        borderRadius: 0,
        bg: 'secondary',
      },
      buttons: {
        event: {
          variant: 'buttons.default',
          bg: 'secondary',
        },
        registration: {
          variant: 'buttons.default',
          boxShadow: '0 0 0 2px inset',
          color: 'secondary',
          bg: 'inherit',
        },
      },
    },
  }}
>
  <EventPreview
    event={{
      tag: 'Webinar',
      title: (
        <Heading as="h1" mb={3}>
          Vestibulum proin eu mi nulla ac enim in tempor turpis
        </Heading>
      ),
      date: 'October 14, 1983, 1:30 PM EDT (60 minutes)',
      speakers: <Names values={['Willow Rangall', 'Suzy Cahan']} mb={3} />,
      href: '/events/vestibulum-proin-eu',
      registrationLink: '/register',
    }}
    m={2}
  />
</ThemeProvider>

Visual regression testing

The following URLs can be used for visual regression testing:

Edit this page on GitHub

1 contributor

Last edited by maiertech on November 30, 2020