Event List

An event list contains a repeating group of event items. To begin, wrap this module in a <section class="event-list">. Then use <article class="event-item"> to group each intividual event together.

An .event-item has the following primary child elements.

  • .title - A short title that is linkable to event detail
  • .description - A short summary or teaser for the event
  • .start-date - Date of the event

An event list can appear in location other than the main content area. The sidebar or inside of a panel for example. The markup in all cases will be exactly the same. NOTE: When used within the sidebar, the icons will be removed automatically.

Example:

Source Code:

NOTE: This module makes use of a datetime property set in the ISO 8601 format. Be sure to set the time correctly for each event-item.

Example of events in a panel:

Events can be included in a panel. See Panels with Photos.

Event in panel

Sidebar Example:

Latest Events