Spotlight

 Relevant data

 Background

Festivals & Events calendar requires a space on their page to feature 1-5 upcoming events. This replaces a carousel. Carousels are not recommended due to digital accessibility and usability. The recommended approach is to create a component that will show all 5 events at the same level on Desktop. On mobile, this would show a single event with a swipe through.

This leads to a new component.

Example Sites

Description	Example

Description	Example
Shows one large featured event with 2 smaller event spaces All have: Image Title Date Location   Selecting an event expands it into a carousel like feature with more details Description Google Map (broken) Contact details Add to calendar	Open Events | City of New York (nyc.gov) Open
Eventbrite Cards for featured events Image Title Time Location
Current Festivals & Events is a carousel Auto rotates with pause, and arrows to navigate Photo Title Date Description Dots indicating number of events
Inspiration for new “spotlight tiles” from 311 Image space Text below

Recommendation

When to Use

Spotlight is a component designed for use with Festivals & Events calendar. It is used in place of a banner to highlight 4 or more upcoming events.

Description

• An individual event consists of a tile with a photo with down-arrow, a header (define level) and sub-text. define text limit.

• Minimum 4 events, no maximum

Desktop considerations

• If more than 4 events, there will be a horizontal scroll

• Arrows are used to indicate scroll

• Dots are not used

Mobile considerations

• Fixed height with vertical scroll - tiles do not stack

  • On tablet - will show 2 - 2.5 events

  • On phone, will show 1 event

Backend

How are events added to component?

 Options considered

 Action items

 Outcome