Card Grid FAQ Block for React

Edit CELLS at the top of the file: each entry is an id, a topic for the tag, an icon from Lucide, the question and its answer, one to three sentences. Keep the count a multiple of six: the grid is three across on a desktop and two on a tablet, so six fills every row, and any other count leaves an empty cell where the border colour shows through.

The grid is the feature: every answer is on the page, so a visitor reads it without a click and a search engine sees it without any scripting. If your list is long or its answers run past three sentences, use one of the accordion FAQ blocks instead, which keep the page short.

The cells are a list, and each question is an h3 under the section's h2, so a headings list shows all six. The icon tiles are decorative and hidden from assistive technology; the topic tag is read as text. There are no controls, so Tab passes straight through.

Yes. Every colour is a theme token: the tiles are muted, the tags are outline badges and the cells are your background, so the grid is light on a light page and dark on a dark one, in every preset. Nothing uses the primary colour.

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

The cells stack in one column, divided by hairlines, with the same padding. Questions and answers wrap, and nothing scrolls sideways at 320 pixels.