Flexible Service Card Documentation

Written by Prince Suhagiya | Nov 11, 2025 10:47:26 AM

 

A dynamic and customizable solution for presenting your offerings with style and clarity. Whether you're showcasing products, features, or services, this module adapts to your needs with ease.

 

1. How to Use

Installation: Navigate to Marketing > File & Templates > Design Tools > @marketplace > Shunyavkash folder to find the Flexible Service Cards Module. Install it.



Integration: In the Marketing section, choose Website Menu > Website Pages and add the "Flexible Service Cards" module to the page you want.


 

2. Content Customization

  • Icon Selection: Decide whether to choose an icon from the HubSpot library or upload your own.

  • Choose Icon: Select an icon from the HubSpot icon library.

  • Upload Icon:Import your icon from your device.

  • Title:Enter the service title here.

  • Richtext:Describe the service in this section.

  • Link: Optionally, include a link to the flexible service card if desired.


 

 

3. Style Customization

Utilize the Style Group options to refine the Flexible Service Cards: Enhance Your Design: Customize Columns, Gap Spacing, Section Background, Flexible Service Card Colors, Elements Bottom Spacing, Flexible Service Card Spacing, Flexible Service Card Styling, Icon Appearance, Flexible Service Card Background, Icon Background, Round Corners, Shadow Effects, Border, Alignment, and Heading Style to perfect your unique aesthetic.

 

 

Animation Customization

Bring your Flexible Service Cards to life with smooth scroll animations. Customize how each card animates into view by adjusting:

 

Bring your Flexible Service Cards to life with smooth scroll animations. Customize how each card animates into view by adjusting:

  • Animation Type – Choose how the card appears (e.g., Fade Up, Slide In).

  • Data Easing – Control the animation's motion curve for smoother effects.

  • Duration – Set how long the animation lasts (in milliseconds).

  • Offset – Define how far the card should scroll into view before animating.

  • Delay – Add a delay before the animation starts.

  • Anchor Placement – Choose the trigger point for animation based on scroll position.

  • Anchor ID – Target a specific element as an animation anchor.

Use these settings to enhance user experience and make your services stand out with engaging, dynamic visuals. Add FeedBack