Event Listing Pro for HubSpot

Features

• Upcoming / Past Tabs — Automatic date-based classification into upcoming and past events. Configurable tab labels and a combined “All Events” view. Default tab is selectable.
• Category Filtering — Auto-generated filter pills from event categories. Click to filter instantly with smooth transitions. Works independently within the active tab.
• Live Search — Real-time search across event titles, descriptions, speakers, and locations. Debounced input with configurable placeholder text.
• Grid & List Views — Toggle between card grid and compact list layouts. Default view is configurable. Both views respond to the same filters, search, and active tab.
• Date Handling — Events are automatically sorted by date. Multi-day events display date ranges. Past events show a configurable CTA override (e.g., “Watch Recording”).
• Detail Drawer — Click any event card to open a right-side slide-in panel with full event details, rich text description, speaker info, location, and registration CTA.
• Card Click Action — Choose what happens when a user clicks a card: open the detail drawer, navigate directly to the registration URL, or disable click entirely (CTA-only).
• Location Badges — Visual indicators for Virtual, In-Person, and Hybrid events. Each type has independently configurable background and text colors.
• Category Badges — Displays the event category as a styled badge. Colors configurable independently from location badges.
• Featured Events — Mark events as featured to display them with a distinct border color, drawing attention to priority events.
• Speaker Info — Optional comma-separated speaker names displayed on each card. Toggle visibility globally.
• Thumbnails — Optional images per event with configurable height and border radius. Toggle globally or leave individual events without images for mixed layouts.
• CTA Styles — Display the call-to-action as a text link with arrow or a filled button with configurable padding.

Content Fields

Header

• Eyebrow — Small uppercase label above the heading.
• Heading — Main section heading with configurable heading tag (H1–H4).
• Subtitle — Descriptive text beneath the heading.
• Header Alignment — Left, center, or right alignment for all header content.

Events (Repeater, 1–50 items)

Each event has the following fields:

• Title — Event name displayed as the card heading.
• Description — Short summary text for the event card.
• Drawer Details (Rich Text) — Extended description shown in the detail drawer. Supports headings, lists, images, and links. Falls back to the short description if left empty.
• Event Date — Format: YYYY-MM-DD. Used for sorting and upcoming/past classification.
• Event Time — Free text field for time display (e.g., “2:00 PM EST”, “9:00 AM - 5:00 PM”).
• End Date — Optional. For multi-day events. Format: YYYY-MM-DD.
• Location Type — Dropdown: Virtual, In-Person, or Hybrid. Drives the location badge color.
• Location — Free text for venue name, city, or platform (e.g., “Zoom”, “Austin, TX”, “NYC / Livestream”).
• Category — Free-text field used for filter grouping. Events with the same category text are grouped together.
• Speakers — Comma-separated speaker names.
• Thumbnail — Image field with src and alt. Leave empty for text-only cards.
• Registration URL — Link field for the event registration or detail page.
• CTA Text — Custom button/link text per event (e.g., “Register”, “Save Your Seat”, “Watch Recording”).
• Featured Event — Boolean toggle. When true, displays the event with a distinct border color.

Settings

• Default Tab — Upcoming, Past, or All Events. Controls which tab is active on page load.
• Show Past Events Tab — Toggle the Past events tab on/off.
• Show Category Filters — Toggle filter pills on/off.
• Show Search — Toggle the search input on/off.
• Show View Toggle — Toggle the grid/list switcher on/off.
• Default View — Grid or List. Controls which layout appears on page load.
• Show Thumbnails — Toggle thumbnail images on/off globally.
• Show Speakers — Toggle speaker names on/off globally.
• Show Location Badge — Toggle location type badges (Virtual/In-Person/Hybrid) on/off.
• Show Category Badge — Toggle category badges on/off.
• Show Time — Toggle event time display on/off.
• Show Description — Toggle event descriptions on/off.
• Tab Labels — Customize the text for Upcoming, Past, and All Events tabs.
• No Results Text — Message displayed when no events match the current filters or search.
• Search Placeholder — Placeholder text inside the search input.
• Past Event CTA Override — Custom CTA text that replaces individual event CTA text for past events (e.g., “Watch Recording”).
• Card Click Action — Choose behavior when a card is clicked: “drawer” opens the detail panel, “link” navigates to the registration URL, “none” disables card click.
• CTA Style — Display the call-to-action as a “link” (text with arrow) or “button” (filled button with configurable padding).

Style Controls (70+)

Container (2)

Max width and horizontal padding for the entire section.

Colors (34)

• Section — Background color with opacity control.
• Header — Heading, eyebrow, and subtitle colors.
• Cards — Card background, border, hover border, title, and description colors.
• Date Badge — Background and text colors for the date display.
• Location Badges — Virtual (bg + text), In-Person (bg + text), Hybrid (bg + text) — each independently configurable.
• Category Badge — Background and text colors.
• Featured Border — Border color for featured events. Inherits from theme accent by default.
• Search — Background, border, focus border, and text colors.
• Filters — Default bg, active bg, text, active text, and border colors.
• Tabs — Default bg, active bg, text, and active text colors.
• CTA, Shadow, Speaker, Time — CTA color, card shadow color, speaker text color, and time text color.

Typography (14)

• Font Pickers — Separate heading and body font pickers (inherit from theme or override).
• Font Sizes — Independent control for heading, subtitle, eyebrow, card title, card description, date, time, speaker, filter, badge, and CTA text sizes.
• Title Font Weight — Regular, Medium, Semibold, or Bold.

Card (13)

• Layout — Padding, border radius, border width, gap between cards.
• Shadow — Card shadow and hover shadow (none, sm, md, lg, xl).
• Thumbnail — Image height, image border radius, and list view thumbnail width.
• Badge — Badge padding (vertical/horizontal) and border radius.
• CTA Button Padding — Vertical and horizontal padding when CTA style is set to button.

Date Badge (3)

Vertical padding, horizontal padding, and border radius for the date badge element.

Toolbar (4)

Filter pill radius, filter vertical/horizontal padding, and toolbar gap.

Tabs (4)

Tab border radius, tab vertical/horizontal padding, and gap between tabs.

Spacing (4)

Section padding top/bottom, header-to-tabs gap, and toolbar-to-cards gap.

Responsive (2)

Tablet breakpoint (grid collapses to 2 columns) and mobile breakpoint (grid collapses to 1 column).

Accessibility

• Semantic HTML — Section, heading hierarchy, and list structure for screen readers.
• Keyboard Navigation — All interactive elements (search, filters, tabs, view toggle, event cards, drawer) are keyboard accessible.
• ARIA Labels — Search input, filter buttons, tab buttons, view toggle, and drawer have descriptive ARIA labels and roles.
• Focus Management — Opening the detail drawer traps focus within the panel. Closing returns focus to the triggering card.
• Focus Indicators — Visible focus rings on all interactive elements with focus-visible styling.
• Live Regions — Event count updates and tab changes announced to assistive technology.
• Color Contrast — Default color combinations meet WCAG 2.1 AA contrast requirements.

Responsive Behavior

• Desktop — Full grid layout with automatic column sizing based on container width. Search, tabs, and filters on a single toolbar row.
• Tablet — Grid collapses to 2 columns at the configurable tablet breakpoint (default 768px). Filters and tabs wrap naturally.
• Mobile — Single column layout at the configurable mobile breakpoint (default 480px). Search, tabs, and filters stack vertically. Cards fill full width. Detail drawer becomes full-screen overlay.
• List View — Adapts gracefully at all breakpoints, with thumbnail and content stacking on smaller screens.

Demo Notes

• Demo 1 (Monochrome Minimal) — Inter throughout on white. Zinc color scale (#09090b / #71717a / #e4e4e7). 3-column grid, 8 events across Conference, Workshop, Webinar, and Product Launch. 5 upcoming + 3 past. Border-only cards with no shadow, 8px radius. Location badges: Virtual indigo, In-Person emerald, Hybrid amber. CTA as text link. 4 events with thumbnails, 4 without.
• Demo 2 (Warm Editorial) — Libre Baskerville + Inter on #f7f4f0 warm ivory section wrapper. Module bg is transparent to blend with wrapper. Brown #8b5e3c accent. Rounded filter pills and tabs (50px radius). 2-column grid with card shadows. All 6 events have thumbnails. Categories: Roundtable, Masterclass, Exhibition. CTA as filled button.
• Demo 3 (Dark Premium) — Cormorant Garamond + DM Sans on #0b0b0b dark background. Gold #d4a853 accent. Default list view, no thumbnails. Border-bottom divider style (radius 0, gap 0). 6 events across Summit, Keynote, and Panel. Location badges use subtle white-opacity backgrounds. CTA as text link in gold.