Skip to content

EventPreview

Experimental

An EventPreview is used to display an event in a list of events, e.g., on an overview page, or as header of an event page.

Examples

In this example we render speakers with Names:

Webinar

Vestibulum proin eu mi nulla ac enim in tempor turpis

Willow Rangall, Suzy Cahan
DetailsRegister

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

Webinar

Vestibulum proin eu mi nulla ac enim in tempor turpis

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.

Register

This is an example of an event without speakers:

Webinar

Vestibulum proin eu mi nulla ac enim in tempor turpis

DetailsRegister

System props

EventPreview supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
eventObjectSee below.

Event

NameTypeDefaultRequiredDescription
tagStringTag that is dispalyed at the top.
titleNodeComponent that renders a title (composition pattern).
speakersNodeComponent that renders speakers (composition pattern).
dateStringFormatted event date.
descriptionNodeComponent that renders a description (composition pattern).
hrefStringLink to event page. Triggers rendering of details button when present.
registrationLinkStringLink 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:

KeyDescription
event-preview.badgeCustomize optional tag.
event-preview.buttons.eventCustomize optional event button.
event-preview.buttons.registrationCustomize 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
DetailsRegister

Visual regression testing

The following URLs can be used for visual regression testing: