---
title: Smart Animated Cards Documention
description: Smart Animated Cards Documention
---

[Skip to content](https://www.modfrybus.shop/smart-animated-cards-documention#main-content)

[![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=90&height=52&name=Modfrybus-logo.png)](https://www.modfrybus.shop/?hsLang=en)

- [Home](https://www.modfrybus.shop/)
- [About](https://www.modfrybus.shop/about-us)
- [Services](https://www.modfrybus.shop/services)
- [Pricing](https://www.modfrybus.shop/pricing)
- [Blog](https://www.modfrybus.shop/modfrybus-blog)
- [Contact](https://www.modfrybus.shop/contact-us)

Open main navigation

Close main navigation

- [Home](https://www.modfrybus.shop/)
- [About](https://www.modfrybus.shop/about-us)
- [Services](https://www.modfrybus.shop/services)
- [Pricing](https://www.modfrybus.shop/pricing)
- [Blog](https://www.modfrybus.shop/modfrybus-blog)
- [Contact](https://www.modfrybus.shop/contact-us)
- [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus)

[Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus)

#### Smart Animated Cards Documention

## 1. Introduction (Overview)

**Smart Animated Cards** lets you showcase multiple cards with bold oversized hover text or numbers. Add icons optionally, choose two-column or full-width layouts, and customize corner radius, spacing, and styles. Fully responsive and interactive for a dynamic, modern presentation.

## 2. Key Features

- **Multiple Cards:** Add more than one card to showcase content.
- **Oversized Text & Numbers:** Display bold text or numbers on each card.
- **Clickable Cards:** Add heading, description, and make the full card clickable.
- **Custom Layout Widths:** Choose full-width or custom-width layout sections.
- **Custom Card Height:**  Set the card height as needed.
- **Fully Customizable:** Adjust spacing, colors, fonts, buttons, and ribbon styles.
- **Responsive Design:** Works perfectly on desktop, tablet, and mobile devices.

## 3. Installation – Downloading the Module from HubSpot Marketplace

- Log in to your HubSpot account.
- Go to the **Marketplace** from the main navigation menu.
- Search for your module by name.
- Find the module in the results and click **Install**.
- If it’s a paid module, you can also click **Buy Now** to purchase and install directly.

## 4. How to Use – Adding the Module to Your Page

- Open your HubSpot page editor.
- Click on **Add Module**.
- Search for your module by name.
- Drag and drop the module into the desired section of your page.
- **Smart Animated Cards** lets you showcase multiple cards with bold oversized hover text or numbers. Add optional icons, choose two-column, full-width, or 2–3 box layouts, and customize corner radius, spacing, and styles. Fully responsive and interactive for a modern, dynamic display.

## 5. Module Settings Guide

**1. Content Tab** 

- **Add Multiple Cards:** Easily add or update as many cards as you need.
- **Flexible Text & Number Options:** Use text, numbers, or both inside each card.
- **Custom Card Colors:** Select separate colors for each cardhover and non-hover states.

![Group 1000002164](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002164.png?width=1000&height=699&name=Group%201000002164.png)

**2. Style Tab**

- **Module Width:** Choose full width or custom width.
- **Cards per Row:** Display 1, 2, 3, or 4 cards per row.
- **Column Gap:** Adjust spacing between columns.
- **Title, Description & Icon:** Customize color, font size, and line height.
- **Card Height:** Set minimum or fixed height for cards.
- **Card Spacing:** Control spacing between individual cards.
- **Fully Customizable -** Adjust card colors, typography, shadows, and spacing.

![Group 1000002159](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002159.png?width=1000&height=753&name=Group%201000002159.png)

## 6. Examples / Demo Preview

View the module in action:[https://www.modfrybus.shop/smart-animated-cards](https://www.modfrybus.shop/smart-animated-cards?hsLang=en)<https://www.modfrybus.shop/ribbon-cards?hsLang=en><https://www.modfrybus.shop/hero-with-video-popup-divider?hsLang=en>

## 7. Support & Contact

For questions or support, contact us at [productqueriemodfrybus@outlook.com](mailto:productqueriemodfrybus@outlook.com) We’re happy to help!

[![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=150&height=87&name=Modfrybus-logo.png "Modfrybus-logo")](https://www.modfrybus.shop/?hsLang=en)

[Privacy Policy](https://www.modfrybus.shop/privacy-policy?hsLang=en)

[Terms and Conditions](https://www.modfrybus.shop/terms-and-conditions?hsLang=en)

[Refund Policy & Support](https://www.modfrybus.shop/modfrybus-refund-policy-support?hsLang=en)

 Copyright © 2025, Modfrybus