A filterable, tabbed event calendar module for HubSpot. Upcoming/past tabs, category filters, grid and list views, detail drawer, speaker info, location badges, and 70+ style controls. Zero jQuery, fully responsive, WCAG accessible.
Wide horizontal cards with image left and content right. Monochrome zinc palette, Inter throughout. Just tabs, no toolbar clutter.
Full-section warm ivory background with Libre Baskerville headings, Inter body, and brown #8b5e3c accent. Rounded filter pills, subtle card shadows, 2-column grid with thumbnails on all events.
Compact 4-column grid with no image inset, flush thumbnails. Source Serif 4 headings, Source Sans 3 body, cool slate-blue palette with teal #1a7f8a accent.
Full-width dark section. Cormorant Garamond headings, DM Sans body, warm gold #c9a45c accent. List view, no thumbnails, border-bottom divider style with search and filters.
Each event has the following fields:
Max width and horizontal padding for the entire section.
Vertical padding, horizontal padding, and border radius for the date badge element.
Filter pill radius, filter vertical/horizontal padding, and toolbar gap.
Tab border radius, tab vertical/horizontal padding, and gap between tabs.
Section padding top/bottom, header-to-tabs gap, and toolbar-to-cards gap.
Tablet breakpoint (grid collapses to 2 columns) and mobile breakpoint (grid collapses to 1 column).
focus-visible styling.#09090b / #71717a / #e4e4e7). Overlay view, 3-column grid, 8 events across Conference, Workshop, Webinar, and Product Launch. 5 upcoming + 3 past. No border, no shadow. CTA as text link.#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 text link.#f0f2f5 cool grey wrapper. Teal #1a7f8a accent with slate palette. 4-column grid with flush thumbnails (no image inset). 8 tech events across Conference, Workshop, and Talk. Compact card padding, small font sizes for dense layout.#0b0b0b dark background. Warm gold #c9a45c accent. Full container width. Default list view, no thumbnails. Border-bottom divider style (radius 0, gap 0). 6 events across Summit, Keynote, and Panel. Search + filters + view toggle visible. CTA as text link in gold.