Vertical Sticky Service Cards

The Vertical Sticky Service Cards Module helps you showcase your services in an interactive and visually engaging scrolling experience. Highlight key offerings, features, benefits, and solutions through smooth sticky card animations that capture visitor attention.

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

Key Features Vertical Sticky Service Cards Module :

1.  Vertical Sticky Scroll Experience : Create an engaging scrolling journey with service cards that remain sticky and reveal content progressively. 

2.  Smooth Card Stacking Animation : Showcase services with seamless stacking and transition effects that add depth and visual appeal. 

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.  Multiple Card Support : Display multiple feature cards, service highlights, team members, or product showcases in a clean and organized layout. 

How to Set Up the Vertical Sticky Service 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.

Select the page where you want to apply the module.

Search for "Vertical Sticky Service Cards" and drag and drop the module into the desired location on your page.

Module Defaults Options:

Layout ID :

Heading & Description : 

Content Columns :

Users can customize each column by adding a 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.

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.

Heading & Description Setting :

Users can customize the spacing of the heading, as well as adjust the typography for the 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.

Column Section Setting :