Masonry FAQ Block for React

Edit TILES at the top of the file: each entry is an id, the question and its answer, with featured: true on the one that should stand out. Keep one featured tile, first in the list: it opens the first column. Six tiles pack well into three columns, two to a column; the columns balance themselves, so any count from six to nine works.

CSS columns fill the first column from top to bottom, then the second, then the third, and the markup follows the same order, so a screen reader reads the questions in the order the eye does. A reader skimming across the top row sees the first tile of each column, not the first three questions.

The tiles are a list of articles, and each question is an h3 under the section's h2, so the headings list shows all six. There are no controls, so Tab passes straight through.

Yes. The tiles are card-coloured with a faint foreground ring, the featured tile takes a muted tint and a stronger ring, and the frame's lines are your border colour, so it is light on a light page and dark on a dark one, in every preset.

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

The tiles stack in one column inside the frame, with the featured tile first. Questions and answers wrap, and nothing scrolls sideways at 320 pixels.