# FAQ two-column search > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A docs FAQ for **Kestrel**, an HTTP API product. Eight numbered questions sit in two columns under a 44px search field. Typing filters rows by question and answer text (case-insensitive). A live “**N** of 8 topics” count updates on every keystroke. If the filter matches nothing, both columns hide their rows and an empty state appears: “No topics match that filter” plus a Clear filter button. Each row is an accordion that opens with `grid-template-rows: 0fr → 1fr` over 280ms; several may be open at once. This is a swiss index, not a paper one-column FAQ. ## Reference behaviour 1. Initial state: 52px nav (8px rotated-square mark + Kestrel + Guides / API / Changelog in Geist Mono + “docs 2.4.1”). Lead: kicker “DOCS · FAQ”, 32px heading “Questions the API desk hears”, search on the right with placeholder “Filter by topic — auth, webhook, region…”. Count reads **8** of 8 topics. Eight rows in two columns (odd numbers left, even right). Question 01 is open (`aria-expanded="true"`), its plus icon rotated 45°, text navy. The other seven are closed. 2. Click a closed question: that row opens over 280ms; its plus rotates 45° to a close mark; question text turns `--navy`. Other open rows stay open. 3. Click an open question: it closes on the same clock; icon returns to +; colour returns to `--ink`. 4. Type `auth` in the search field: rows whose haystack contains “auth” stay; the rest get `hidden`. Count becomes **2 of 8** (01 rotate key, 06 signed requests). Open/closed state of survivors is unchanged. 5. Type a string with no hit (e.g. `banana`): count **0 of 8**, `#empty` gets `.show`, the two columns look vacant. Empty copy offers `auth`, `webhook`, `region` as examples. 6. Click **Clear filter**: input value is emptied, all eight rows unhide, count returns to 8, focus returns to the search field. 7. Clearing the field with the input’s native clear control (type=search) also runs the same `input` handler. 8. Reduced motion: panel and icon transitions become 1ms. Filter still works. ## Structure ``` 1280 × 800 +----------------------------------------------------------------------+ | * Kestrel Guides API Changelog docs 2.4.1 | 52 | DOCS · FAQ [ Filter by topic -- auth... ] | | Questions the API desk hears 8 of 8 topics | 44 |----------------------------------------------------------------------| ink rule | 01 How do I rotate an API key... + | 02 Why is my webhook... + | | (answer open on 01) | 04 What does the 429... + | | 03 Which regions can a project...+ | 06 How do signed requests... + | | 05 Can I replay a failed event...+ | 08 Where do I file a... + | | 07 Is the sandbox key billed? + | | +----------------------------------------------------------------------+ pad 56 columns 1fr 1fr, gap 48 row pad 14 0 ``` - `