Animated Card Documentation

Possible Layouts

Layout Options: Welcome to the "Animated Cards" module, using which you can improve a number of things that adds up to better potential leads. This can be achieved by giving the website visitors a glimpse and short description of your products or services in a structured, organised and expressive way, giving them a better understanding of your services in a single page and guiding them to the service/product page they wish to explore. With range of customisation options, this module offers multiple designs and animations to keep the user engaged and hence improve the user experience.

• Engage and Persuade: Animated Cards showcases your services in engaging card formats with well-crafted designs and 3D animations. These user-friendly cards help showcase the glimpse of your services/products in an engaging way and persuade the visitor indirectly to engage in your website and hence increasing chances of them becoming a lead.
• Garner more leads: Animated Cards module gives you a much-needed option especially if you wish to showcase multiple services in a single page. It increases the engagement rate of your website by captivating the visitor’s attention by showcasing your services in a structured, organised, and beautiful way. It improves website ranking and helps increase leads.
• Responsive and mobile-friendly: The "Animated Cards" module is designed to provide optimal viewing experiences on various devices, including desktops, tablets, and mobile phones. With its responsiveness, your page will adapt seamlessly, ensuring a consistent and engaging experience across all platforms.
• Customisation: The “Animated Cards” module comes with a bunch of customisations, all of which you can control to give the user a seamless experience in tandem with your website’s colours and design philosophy.

Content features:

In Section title setting, you can edit the title, heading and description. You can edit the title, heading and the description

You can add multiple cards and indulge in further content customisation features under the Content tab. 

Each card has options to add an Image or icon, a heading, a description and a CTA individually.

You can edit Alt text of the image, size of the image and width and height of the image. For icon (SVG) there are no extra customisation options required.

You can customise the heading type and design. and edit the description.

You can edit the CTA label, CTA URL along with other functionalities. You also get the option to use HubSpot CTAs along with their own functionalities. 

Card Slider:

You can multiple cards in the loop. and showcase your service with slider.

You can customise the
Card icon, heading, Description, and Card Image.

Style features:

You can show/hide the title, when shown you can customise the title with its title font type, style, and size, edit headline font type, style and size, and description font type, style size and alignment. You can also customise above and below margins and padding.

Module Settings :- 

There are several options available to style the Accordion module. These are- Module Setting, Heading and Content (written as Accordion area here) elaborated below.

In module setting you can customise the spacing and background. In spacing settings, you can edit the above and below margins and paddings from all 4 sides. You also get an option to show or hide the module. 

In background settings, you can choose the background style whether you want a solid colour background or an image. Both these background styles have their own customisation options. 

Title Settings :- 

Card Settings :-

You get 2 type of cards available for you to use. 

The module setting gives you options of changing the background type, colour and spacing/padding.

In card 1 settings, you can customise the number of columns of cards you want to have on your page, their background colour, image overlay and animations, border style, colour, width, corner radius, alignment, spacing and padding.

In image or icon settings you can customise the image and icon whichever you chose to add in the card. 

In heading settings, you can customise the heading font style, size along with responsive options.  and In description settings, you can change the font style, size along with responsive options. 

In CTA settings, you can customise the CTA type, font style, size, background colour, corner radius, border style, colour, width, spacing and padding. You can also choose to show or hide the CTA. 

Card Slider :

You can choose the cards slider.

In the card type 3 you can customize the Cards background color, Spacing  Dots color,  box icon size, Heading font and color,  Slider Number font and color,  description font and color.