List multiple events with the Events List component

A clear list of upcoming events supports planning, drives attendance, and builds engagement. The Events List component provides a reliable way to show upcoming events using consistent formatting that updates automatically.

Sample Upcoming Events List

This list pulls events entered into your website and displays them in a scannable layout, no extra formatting needed.

Using Events List in your pages

Best for

Displaying 3–10 upcoming events in a consistent, automated format.

Component used

Events List

What It does

Shows a list of events entered using the Events content type. Each item includes the title, date, summary, and link. Events expire automatically after the date of the event passes.

Setup tips

  • Use a Section Heading component above the Events List to frame the content clearly (e.g., “Upcoming Events”).
  • Limit results to the next 3–5 items to avoid overwhelming users.
  • Keep summaries short and scannable. Describe the event in 1–2 short sentences.
  • Use clear, informative event titles (avoid “Event #4” or something similar).
  • Events will stack (display on top of another) on mobile view, check that titles and times are visible "above the fold."

Pros & cons

Added benefit

  • Pulls content automatically, no need for manual updates anywhere the event is displayed.
  • Works with taxonomy (tagging and filters) for a filtered (curated) list of events.
  • Accessible and responsive by default.

Potential drawbacks

  • Doesn’t allow for custom ordering, displays events by alphabetical order or date only.
  • May look sparse if only 1–2 events are published.
  • Less effective for visually promoting a single event (we recommend using the 50/50 Card component for that).
See also: