Card Inset Benefits Stack CTA Block for React

Edit BENEFITS at the top of the file: each entry has an icon, a title and one line of detail, and the deck is built from the first three. The line under the buttons reads MIGRATION_MINUTES, so the figure lives in one place. Keep the details to a sentence: the cards are narrow, and they grow in height together when one wraps.

The three cards sit in three grid columns at all times, so the section never changes height. They are the last thing in the panel, after the actions. At rest, a CSS transform slides the outer cards toward the middle one, tilts them a few degrees and scales them down; hovering the panel or focusing anything inside it sets the transforms back to nothing over half a second. The deck works from the md breakpoint up.

Yes. Every card is real content in a list, in reading order, and a screen reader reads all three whatever the deck looks like. The cards themselves aren't focusable, so the deck opens when focus reaches one of the two buttons in the same panel, which is where a keyboard user ends up next anyway.

The deck is only drawn when the screen is at least md wide, the visitor hasn't asked for reduced motion and the device can hover. Otherwise the cards are an open list: stacked on a phone, in a row on a wider touch screen. Nothing is hidden behind a hover on those devices.

Yes. The tilt and the slide use a direction variable that flips in a right-to-left page, so the first benefit stays at the start of the row and the deck mirrors. The migration line is wrapped so its number and unit keep their order.

Both are links (href="#"): point the Shine Button at your migration flow and the outline button at a plan comparison. The Shine Button sweeps a band of light across itself once on hover and keyboard focus. Each button renders the link it's given with render, with nativeButton={false}.