# Interactive Cards Widget

> Image-stack card display where the active card rotates / expands on hover, revealing details. Multiple cards displayed; one focused at a time.

**Class file:** `includes/Elements/Interactive_Card.php` (2,345 lines)
**Slug:** `interactive-cards` (widget id `eael-interactive-cards`) ⚠ widget class is `Interactive_Card` (singular) but slug is plural
**Public docs:** <https://essential-addons.com/elementor/docs/interactive-cards/>
**Pro-shared:** Pro-only.

## Overview

Card-stack interactive display. Multiple cards (Repeater) shown in a row; the focused card rotates / scales / expands while siblings remain flat. Hover or click switches focus. Different from a carousel — all cards always visible.

## Pro vs Lite

Pro-only.

## File Map

| File | Role |
| --- | --- |
| `includes/Elements/Interactive_Card.php` | Widget class (2,345 lines) |
| `src/css/view/interactive-cards.scss` → `assets/front-end/css/view/interactive-cards.min.css` | Card layout + transform styling |
| `src/js/view/interactive-cards.js` → `assets/front-end/js/view/interactive-cards.min.js` | Focus switch handler |
| `config.php` entry `'interactive-cards'` | Self CSS + self JS |

## Architecture

- **Composes Lite's `Helper`** (line 13).
- **Repeater of cards** — image / title / description / button per card.
- **Single template, CSS-driven variations** — focused card uses `.active` class with CSS transforms.
- **2,345 lines** — most are per-card style controls (image / title / description / button styling each with own section).

## Render Output

```html
<div class="eael-interactive-cards">
  <div class="eael-interactive-card active" data-card-id="0">
    <img src="{image}" />
    <div class="eael-card-content">
      <h3>{title}</h3>
      <p>{description}</p>
      [?] <a class="eael-card-button">{button}</a>
    </div>
  </div>
  <div class="eael-interactive-card" data-card-id="1">...</div>
  ...
</div>
```

## Controls Reference

| Control id | Tab → Section | Type | Purpose |
| --- | --- | --- | --- |
| Cards Repeater | Content → Cards | REPEATER | Per-card data |
| (Per-card) image / title / desc / button label / button link | Inside Repeater | various | Card content |
| Trigger (hover / click) | Content → Settings | CHOOSE | Focus mechanism |
| Initial active card | Content → Settings | NUMBER | Default focused index |
| Per-card / focused-state styling | Style → ... | various | Heavy style control set |

## Conditional Dependencies

```text
trigger = 'click' → click-handler JS branch
per-card button enabled → button styling controls visible
```

## JavaScript Lifecycle

```js
$cards.on( 'mouseenter click', function() {
    $cards.removeClass( 'active' );
    $( this ).addClass( 'active' );
} );
```

## Hooks & Filters

Standard.

## Common Issues

| Symptom | Cause | Fix |
| --- | --- | --- |
| All cards same size (no focus effect) | `.active` CSS rule missing | Verify Pro CSS loaded |
| Cards stack vertically on desktop | Container flex broken | Inspect `.eael-interactive-cards` |
| Click trigger doesn't work on touch | jQuery `click` works on touch via WP polyfill | Should work; verify event binding |

## Known Limitations

- **2,345 lines** — heavy controls bloat
- **No `prefers-reduced-motion`**
- **Card heights uneven** without manual control — depends on content lengths
- **No keyboard nav** between cards

## Cross-References

- Sibling: [`interactive-promo.md`](interactive-promo.md), [`stacked-cards.md`](stacked-cards.md) (verify exists in B7)
- Shared patterns: [`_patterns.md`](_patterns.md)