Fancy Clip Card

The Fancy Clip Card Module transforms ordinary content into eye-catching visual experiences with unique clip-style card designs and smooth animation effects. Whether you're highlighting services, features, products, or company information, this module helps organize content in an attractive and engaging format. With responsive layouts, flexible customization options, and HubSpot-friendly controls, it's an ideal solution for creating modern content showcases that capture attention and drive user interaction. 

Key Features Fancy Clip Card Module :

1. Responsive Design: Adjusts seamlessly across devices, from desktops to mobile screens.

2. Hover Effects: Visual feedback when users hover over cards, such as scaling, highlighting, or revealing additional information.

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

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

5.  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 Fancy Clip Card 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 "Fancy Clip Card" and drag and drop the module into the desired location on your page.

Module Defaults Options:

Layout ID :

Layout Options :  

For Fancy Clip Card, choose a layout (e.g., Layout 1 or Layout 2) and rearrange the cards to achieve the desired content flow and visual arrangement.

Sub Heading, 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.

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.

Column Section Setting :