Expanding Step Cards

A row of numbered cards where the hovered card expands to show its image and the others shrink to a slim text column. It's built for "how it works" and process sections, and switches to a stacked layout on smaller screens.

Features

• Hover to expand. The active card grows with a spring animation to reveal its image while the rest shrink.

• Numbered steps. Each card has a number, title, text and image, all edited in the properties panel.

• Choose the starting card. Pick which card is open before anyone interacts.

• Reset or keep. When the cursor leaves, the row either goes back to the starting card or keeps the last one open.

• Stacked mode for mobile. One card per row, with every image visible and placed on the right or on top.

• Full style control. Set the card and image sizes, padding, gaps, radius, colours and fonts for the number, title and text.

• Custom motion. Tune the spring or easing from Framer's transition control.

• Keyboard friendly. Tabbing to a card opens it, just like hovering.

What's Included

• Expanding Step Cards code component

• Demo steps section with 3 sample cards (badge, heading and subtext)

• Layouts for desktop, laptop, tablet and phone

Custom Code Components

• ExpandingStepCards

Support: Need help setting up? Reach out to us at: hello@pixels71.com