Alternating Code Block Rows Features Block for React Aria

Edit the line lists at the top of the file: CALL_LINES, CONFIG_LINES and OUTPUT_LINES. Each line is a string, and the text between two tildes is drawn in the strong weight while the rest stays quiet. Set marked on a line to tint it and rule its start, as in the config window. Keep a line under about 40 characters so it fits a phone without clipping.

Yes. The windows are plain markup inside the frame, so replace the body of a window with the output of your highlighter. This block draws code as a picture of the product, so it is hidden from assistive technology; if the snippet is the content you want people to copy, render it as real text in a labelled region instead.

Each row ends in a text link (href="#"): point it at the matching docs page. The arrow slides on hover and mirrors in a right-to-left layout. Nothing on the page is a button, so there is no primary control and no Shine Button.

Yes. The window, its tinted body and the marked line use theme tokens only, so they are light on a light page and dark on a dark one, in any preset. The selected suggestion in the popover is the one element drawn in the foreground colour.

The header fades up once on load with a CSS transition, and the link arrows slide on hover. Nothing loops. With reduced motion every transition is off and the section just appears.

Each band stacks with the text first. The window drops to a fixed height and fades out at its foot, so a long file reads as continuing rather than cut off. The window clips its lines instead of scrolling, and nothing scrolls sideways at 320 pixels.