# Interactive Cards

Reusable Magento Page Builder cards with optional carousel, hover overlay and click side-pull behavior.

## Page Builder usage

1. Drag **Interactive Cards** from the Media section into a CMS Page.
2. Open its settings and choose desktop/tablet columns, card height, gap and interaction options.
3. Use **Add Card** from the component toolbar for every card.
4. Open each card and maintain its desktop image, optional mobile image, title and detailed description.
5. Optionally enter a Magento product SKU. Product image, name, price and cart/product action are loaded from the catalog on click.

## Product Cards

Use **Product Cards** when the card should be maintained entirely from Magento catalog data.

1. Drag **Product Cards** onto the Page Builder stage.
2. Set the desktop, tablet and mobile cards-per-row values.
3. Use **Add Product Card** for each product.
4. Enter the product SKU and comma-separated tags.

The storefront automatically loads the product image and name. **Explore All** links to the product URL for the active store view.
6. Drag a card by its image area to reorder it.

When carousel is disabled, cards wrap into a normal grid. Clicking a card only expands its own row. When carousel is enabled, arrows, dots, autoplay and swipe follow the parent settings, and clicking expands the current visible group only.

## Deployment

```bash
php bin/magento module:enable Esun_InteractiveCards
php bin/magento setup:upgrade --keep-generated
php bin/magento cache:flush
```