Alternating Rows Features Block for React

Each vignette is a small component (PermissionsCard, NotificationCard) passed as the children of a Row. Replace it with any card you like, and edit ROLES and PEOPLE at the top of the file to change what the two existing ones show. A Row supplies the heading, the sentence, the link and the tinted cell.

No. They are the catalog's Switch drawn at its small size, but the whole vignette is inert and hidden from assistive technology: it is a picture of the product, and the heading and sentence beside it say what it shows. Remove inert and aria-hidden from the cell if you want a working demo, and give each switch a real label.

Pass flip to a row to put its vignette at the start on wide screens. The copy always comes first in the reading order and on a phone, so the heading is never read after a picture.

Yes. The box, the tinted cells and the cards use theme tokens only, so they are light on a light page and dark on a dark one. The switches that are on use the foreground colour, so the primary colour stays free for a real button elsewhere on the page.

The header fades up once on load and the link arrows slide on hover. With reduced motion every transition is off and the section simply appears.

Each row stacks with its text first, then the tinted cell with its vignette centred. The shared hairlines and the single radius stay, and nothing scrolls sideways at 320 pixels.