Docs Links FAQ Block for React

Every guide is a real link with href="#": point each at its article. Edit the guides of each question in QUESTIONS: a title and the minutes it takes to read. The "4 min read" is typed, so keep it honest when an article changes.

The two columns swap sides, the hairline between them moves with them, and the arrow at the end of each guide flips to point the other way. The minutes are wrapped so a number and its unit stay in order.

Add an entry to QUESTIONS with an id, the question, its answer and its guides. Two guides fit well; more make the list taller than the answer. OPEN_QUESTION names the one that's open on load. One answer is open at a time.

Each question is a button inside its own h3. The open answer has an h4, "Read more in the docs", over a list of links, and each link is read as its title and its length. Tab moves from a question into its guides and on to the next question.

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

Below the lg breakpoint the guides stack under the answer behind a hairline, and the rows run from rail to rail. A long title wraps inside its row, and nothing scrolls sideways at 320 pixels.