FAQ with Contact Card Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that's open on load. The three contact rows are written in the markup under the card: change the address in the mailto: link, the number in the tel: link and the hours beside it. The live chat line is plain text with a green dot, so it says "Online" whether or not anyone is; connect it to your chat provider's status, or remove the row, before you ship.

From the lg breakpoint the card's box is position: sticky with a small offset, so it holds still while the questions scroll past and stops at the end of the block. Sticky stops working if a parent of the block has overflow set to hidden or auto, so don't wrap the section in one (overflow-x: clip on the section is fine). Below lg it isn't sticky: it sits after the last question.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match.

Each question is a button inside its own h3 under the section's h2, and the card's title is an h3 too. Tab moves from question to question, then through the email, chat and phone rows and on to the button; Enter or Space opens and closes a question, and the button says whether it's expanded. The three contact rows are a real list. Tab alone moves between questions on this library: its accordion doesn't take arrow keys.

Start a chat is the block's one Shine Button, a link (href="#"): point it at your chat page or open your widget from it. The email and phone rows are plain links (mailto: and tel:), and the phone number keeps its digits in order in right-to-left pages. The button renders the link it's given with render, with nativeButton={false}.

Below the lg breakpoint the header and the rows run rail to rail, the card follows the last question under its own rule with + marks, and the Shine Button fills the card's width. Nothing scrolls sideways at 320 pixels, and long email addresses wrap instead of overflowing.