Highlighted Question FAQ Block for Ark UI

The featured question and its answer are written in the markup of the card, so edit them there. Each highlighted phrase is a Marked component with its text; the words around them are plain. Keep to three or four short phrases that someone skimming would want to catch: marking half the sentence marks nothing. The five rows below come from QUESTIONS at the top of the file.

The marker is the theme's foreground colour at 12%, so it's a light grey wash in a light theme and a lighter one in a dark theme, and the marked text switches to full foreground. Contrast stays well above the AA minimum in every preset and the page's text selection and find in page work as usual: the marked words are real text. It draws across each phrase once, a short moment after the page loads.

The highlight is simply there, with no drawing, and the entrances are off, so the first screen shows the finished card. The rows' plus turns into a cross as a row opens, without animating. The answers also open and close at once, with no height animation.

The featured answer is always on the page. For the rows below: the Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens, and search engines and server rendering see all six questions.

The featured question is an h3 with its answer as a paragraph, and the link after it is the first stop for Tab. Each row below is a button inside its own h3, Enter or Space opens and closes one, and one answer is open at a time. The Up and Down arrows also move between the rows, and Home and End jump to the first and last.

The card keeps its padding and its margin from the rails, the highlighted phrases wrap across lines with a mark on each line, and the rows below run from rail to rail. The question starts within the first screen, and nothing scrolls sideways at 320 pixels.