Minimal FAQ Block for React

Edit ENTRIES at the top of the file: each entry is an id, the question and its answer, one to three sentences. Six to eight suit the layout. With no lines between them, more than about eight start to read as a wall of text, and an accordion serves a longer list better.

Every answer is on show, which is what a definition list is for: each question is a term and its answer is the description, so a screen reader pairs them. HTML doesn't allow headings inside a term, so the questions don't appear in a headings list; the section's h2 still does.

It is a ghost button with an arrow (href="#"): point Write to the studio at your contact page or a mailto: address. The block has no other button. The button renders the link it's given with render, with nativeButton={false}.

Yes. It uses only your foreground, muted foreground and border colours, so it is light on a light page and dark on a dark one, in every preset.

The header and the list fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off and the section simply appears.

The column keeps its padding from the rails and the type steps down a size. Questions and answers wrap, and nothing scrolls sideways at 320 pixels.