Card Carousel Features Block for React

Each card is one Cell in the file: give it a tag, a text and a drawing as its children, and add its name to NAMES. Raise COUNT when you add one. The drawings are small components made of plain boxes and lines, so swap in a screenshot or an image if you prefer; keep the drawing's box aria-hidden, because the card's words say the same thing.

1.2 cards on a phone, 2.5 from md and 3.5 from lg, so there is always part of the next card in view. The cut-off card is out of the tab order and the reading order until you move on: only the whole cards are exposed. The last step stops at the end of the track rather than leaving it half empty.

The previous and next buttons move one card at a time and wrap from the last card back to the first, so they never disable under your focus. The left and right arrow keys do the same while focus is inside the carousel, and they follow the page direction in a right-to-left layout. A polite status line says which cards are showing. The carousel is Embla: the buttons call its scrollTo, and Embla also handles the arrow keys itself.

No. Nothing autoplays, so there is nothing to pause. The only motion is the track moving when you press a button or swipe, plus a one-time fade-up of the heading and the band when the page loads, which is off with reduced motion.

Yes. Every colour is a token and the drawings use only greyscale tones and your foreground colour for the one picked element in each, so the section is light on a light page and dark on a dark one, in any preset. The primary colour is not used.

A card takes about 83% of the width and the next one shows beside it. The buttons stay under the heading, and nothing scrolls the page sideways at 320 pixels.