Skip to content
English - India
  • There are no suggestions because the search field is empty.

Interactive Feature Cards

The Interactive Feature Cards Module helps you showcase your products, services, features, or key highlights in a dynamic horizontal sliding layout. Present important information through engaging, interactive cards that encourage users to explore more.

Fully responsive and highly customizable, this module is designed to enhance user engagement, improve content presentation, and deliver a modern browsing experience across all devices.

Key Features Interactive Feature Cards Module :

  1.  Interactive Horizontal Card Layout: Present your features in a sleek horizontal sliding layout that creates a modern, engaging browsing experience for visitors. 

  2.  Smooth Slide Animations: Capture user attention with fluid horizontal card transitions and interactive animations that enhance engagement. 
  3. Responsive Design: Adjusts seamlessly across devices, from desktops to mobile screens.

  4. Customizable Styles: Fully customizable with CSS variables for themes, fonts, colors, and animations.

  5. Performance Optimization: Lightweight animations optimized to ensure smooth interactions without lag.

  6. CTA Button Support: Drive more conversions by adding customizable call-to-action buttons to each feature card. 

How to Set Up the Interactive Feature Cards Module in HubSpot :

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

nav-timeline

Select the page where you want to apply the module.

Screenshot (20)

Search for "Interactive Feature Cards" and drag and drop the module into the desired location on your page.

ss733

Module Defaults Options:

Layout ID :

To enable smooth scrolling for a CTA, assign an ID to the target element, reference that ID in the anchor link's href, and clicking the CTA will smoothly scroll the page to the section.

ss734

 

Sub Heading, Heading & Description : 

Easily customize the content in your module by modifying the "Sub Heading", "Heading," "Description. You can also choose to hide the section if desired, giving you complete control over the presentation and functionality of your content.

Options : 

  • Heading/Description & Sub Heading Show/Hide Toggle

ss735

Content Columns :

Users can customize each column by adding a icon, title, a description to convey key information, an image for visual appeal, and CTA text with a link to drive engagement. Additionally, they can replicate columns as needed to match their content requirements, creating a flexible and visually cohesive layout suitable for various purposes such as showcasing features, services, or products. And you can add minimum 3 and maximum 5 cards.

ss736

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to customize the module's appearance. This flexibility lets you refine the layout and aesthetics, creating a visually appealing, functional, and user-friendly design.

ss737

Sub Heading, Heading & Description Setting :

Users can customize the spacing of the heading, as well as adjust the typography for the sub heading, heading and description. This includes modifying the color, font size, weight, and line height for both mobile and desktop views, allowing for a personalized and visually cohesive design across all devices.

ss738

Column Section Setting :

Users can customize column spacing and adjust the background, border, border radius to create their desired design style.

ss739
 

Column Content Setting :

Users can customize the icon, title, description, and CTA typography by adjusting font size, line height, and spacing for both mobile and desktop views. They can also modify text transform and alignment. For the CTA.

ss740

We hope you enjoy using interactive feature cards 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.