Documentation

Fancy Card

 

Display essential information about an event, product, or article using a clean and professional card layout.Engage users by animating the card and its contents as they hover over it, providing more information in an interactive way.Make the design visually appealing with smooth transitions and effects like image zoom and content.

Dynamic Hover Reveal Fancy Card orange-2-1

What is the Fancy Card module?

A fancy card is a visually appealing and interactive design component commonly used in web design to present content in a structured, aesthetically pleasing way. These cards typically feature modern design elements images,text,hover effects,smooth transition

How does the Fancy Card functionality work?

When the user hovers over the card, both the image and background expand to reveal hidden content smoothly. As soon as the cursor exits, the card collapses back, hiding the content and restoring the image and background to their original state.

What customization options are available with the Fancy Card Module?

Below is a list of all the customization options available for the Fancy Card

Content

Drag and drop the Fancy Card into your desired location on the page.

standimg

The drag and drop the module default show background color with image to change the content.
backstyleimg

 

Ideal for  show image with background color.

carddesc

 

another option for give title and description, button title to show hover with inside the card.
animate

The user can select the card image alignment animation likes in zoom out left and right movement. Either zoom in left and right movement.

 

What customization styles options are available with the Fancy Card Module?

below list of customization style options are available for fancy card.

backstyleimgusers can change the background color for image before hover effect.

 

title_style

users can change title font size, colors and spacing.

desc_style

Users can set the description width and spacing.

btn_style

Users can change button styles such as font and color, spacing.

imagealign

User can Adjust the space between card corners and images as per responsive size.

How can I get support?

If you're still having trouble or have any questions or feedback, contact at  hello@amwhiz.com

Fancy Card Module for HubSpot | Documentation