Featured events

Use featured events when you need a compact list of priority or upcoming events.

AEM publisher guidelines

View the component in Figma

Live demo


No upcoming events at this time.

Use this when you want a small, curated set of events on a home page, landing page, or sidebar. Authors control how items are chosen (manual list, search, or advanced query), how many appear, and the layout (a horizontal row of cards versus a vertical stack). You can add a “more events” link, optional RSS, month headings for academic dates, and options to hide local-only events when the audience is broader.

Behaviour

  • Build list using switches which authoring tabs apply (manual paths, XPath search, or query builder).
  • Display as changes the list item template (featured cards, academic dates with optional month headings, or coloured vignettes).
  • Orientation chooses a row grid or stacked list (academic dates force vertical).

Anatomy

  1. Optional section header with a link to “more events” when configured.
  2. List of event items in the chosen layout.
  3. Pagination when the list supports it.

Featured events layouts (placeholder)

Replace with horizontal and vertical examples.

Content guidelines

  • Choose horizontal for wide promos with three cards per row on desktop; vertical for narrow sidebars or important dates lists.
  • Turn on month headings only for Academic dates when the list spans multiple months.

Best practices

Do

  • Prefer the Title component for the section heading on new pages; the legacy title field in this component is discouraged (see Code).

Don't

  • Don't rely on the legacy title field for new pages without checking template expectations.

When to use

  • Home or landing pages that promote a few upcoming events with a clear layout choice (cards versus vignettes versus academic dates).

When not to use

  • Full calendar; use Calendar.
  • News; use News list.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/news-events/list-featured-events/list-featured-events.jsp']

Design and layout options

These map to dialog.xml. The Build list using field controls which tabs are visible (Manual list, Search, Advanced search).

Build list using

Value Tab Behaviour
Manual list Manual list Pages multifield (paths under /content/shared).
Search Search Search query textarea: XPath executed against the repository; $now$ expands to today’s date-time for comparisons.
Advanced search Advanced search Query Builder predicate notation in savedquery (textarea).

Display as

Stored value Dialog label List item script Notes
featured_events Featured events listitem_featured_events.jsp Title size options apply (see below).
default_important_dates Academic dates (Default) listitem_default_important_dates.jsp Orientation is forced to vertical. Optional Show month headings groups items under MMMM yyyy headings.
vignettes Coloured vignettes listitem_vignettes.jsp Visual variant with coloured vignette styling.

The Display as dropdown is populated from displayoptions.json beside the dialog (same basename as the listitem_*.jsp files).

Orientation

Value Layout Markup (simplified)
horizontal Multi-column row on medium and up row no-gutter stack-tablet-1 stack-mobile-1 → inner row row-cols-1 row-cols-md-3 row-gap-4; each item uses cls = col-md-4 from session.
vertical Stacked list d-flex flex-column gap-4 (no row grid).

Academic dates (Default) always uses vertical regardless of the orientation field.

Title size

Value Applies to
default-text Baseline heading size.
large Larger title treatment.
xlarge Largest treatment.

Dialog field description: only applies to Featured events (featured_events).

Other display fields

Field Purpose
Limit Maximum number of items (default 4 in dialog).
More text / More link Optional heading link (h2.section-header) when title is set in properties (legacy field; comment in JSP suggests Title component).
Hide local events Skips pages where localEvent is true.

RSS feed (fieldset)

Field Purpose
Enable feed Emits Atom link (list-featured-events.xml) when true.
Show subtitle RSS feed content.
Hide address RSS feed content.
Show image RSS feed content.

Advanced settings

Field Purpose
CSS class additionalClass on the ul.c-eventbar (with list-unstyled).

Implementation anatomy

  1. Optional title row: h2.section-header with optional link to More link page.
  2. Feed: <link rel="alternate"> when Enable feed is on.
  3. List: ul.c-eventbar with role="menu", containing either a row grid or flex column.
  4. Items: <cq:include script="listitem_${type}.jsp"/> where type comes from the foundation List (list.getType() aligns with Display as).
  5. Pagination: pagination.jsp if list.isPaginating().

Instances in the codebase

Location Notes
apps/concordia/components/news-events/list-featured-events/list-featured-events.jsp Main script.
listitem_featured_events.jsp, listitem_default_important_dates.jsp, listitem_vignettes.jsp Templates (jcr:title on each script for dialog labels).
foundation/components/list Supertype; supplies init.jsp and List behaviour.
empty.jsp No results.
xml.jsp Feed when enabled.
Item Location
Component apps/concordia/components/news-events/list-featured-events/list-featured-events.jsp
Dialog apps/concordia/components/news-events/list-featured-events/dialog.xml
Supertype foundation/components/list ( init.jsp )