Events List Premium

A feature-rich, responsive event listing system designed to give users a seamless way to explore upcoming happenings. Perfect for organizations, communities, and brands that run multiple events across locations and timeframes.

Key Features of a Events List Premium Module :

🧩4 Layout Options

• Choose from four professionally designed layouts.

• Tailored for different use cases — from compact card views to full-detail layouts.

🎯 Advanced Filtering

Each layout includes built-in filters for:

• Location – Narrow events by city, region, or venue.

• Month – View events based on upcoming or specific months.

• Category – Filter by event types (e.g., Webinar, Workshop, Conference).

• Tab Option – Choose tabbed filtering for clean, fast navigation between categories.

📱 Fully Responsive

• Mobile-first design adapts beautifully across devices.

• Ensures touch-friendly interaction and smooth filtering on smaller screens.

How to Set Up the Events List Premium Module in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Events List Premium" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Event list, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3 or Layout 4). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading and description, along with both filter and tab options, displayed in a three-column format.
• Layout 2 : The layout features a subheading, heading, and description, with both filter and tab options, displayed in a three-column format enhanced by hover content effects.
• Layout 3 : The layout includes a heading and description, with both filter and tab options presented in a two-column format for clear and organized content display.
• Layout 4 : The layout features a heading and description, along with both filter and tab options, arranged in a clean single-column format for streamlined content presentation.

You can easily update the heading and description, customize the column content to match your needs, and choose between tab or filter options for a more dynamic and user-friendly content display.

• Update the heading and description
• Customize the column content (text, images, CTAs, etc.)
• Choose between tab or filter options to display content
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Heading & Description Setting :

In this module, you have full flexibility to customize the heading and description to perfectly align with your design vision. You can easily adjust the spacing around the text, apply text transformations such as uppercase or lowercase, define the maximum width for better content flow, and set the alignment (left, center, or right) to create the ideal layout. These options ensure your content remains visually balanced and responsive across all devices.

• Text Styling Options
  Set font size, color, spacing, and apply text transforms like uppercase or capitalize.
• Responsive Alignment
  Align your content (left, center, or right) for both desktop and mobile devices.
• Max Width Control
  Limit the width of the heading and description to maintain clean, readable layouts.
• Spacing Adjustments
  Add padding or margins around your content to create visual balance.

Search Filter Or Tab Setting :

You can fully customize the typography for your tabs or search elements to create a seamless design that matches your brand. This feature gives you the flexibility to control various typographic styles and ensure your content is both visually appealing and easy to read across all devices.

• Typography Control
  Adjust font styles, sizes, weights, and colors to ensure consistency with your overall design.
• Spacing Options
  Modify line height, and padding around text to improve readability and enhance the layout.
• Hover & Active States
  Customize hover effects and active tab states with different styles, colors, or underlines for a dynamic user experience.
• Font Transformations
  Apply text transforms (uppercase, lowercase, capitalize) for added emphasis and style consistency.

Column Setting :

You have full control over customizing the column box to align with your design preferences. Adjust the background, spacing, border, corners, and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color, gradient, or even an image background for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Styling
  Set borders with customizable width, color, and style to frame your content attractively.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Box Shadow
  Add depth with a box shadow to make your content appear elevated or to create a subtle floating effect.

Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, fine-tune icon colors, and style the Call-to-Action (CTA) elements to make them stand out. Whether you’re updating typography, adding backgrounds, or configuring borders and hover effects, every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon Color
  Customize the icon color to match your brand’s color palette and enhance the overall design.
• CTA Styling
  Tailor the appearance of your Call-to-Action buttons, including typography, background color, border, corner radius, and hover effects to make them more engaging and interactive.

We hope you enjoy using our events list premium module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.