FAQ design template
Pick the layout first, write answers second. These notes cover structure and spacing, not policy wording.
Layout patterns
- Accordion when you have 8 or more questions on one screen.
- Card grid next to feature lists or pricing tables.
- Two columns for legal, finance, or consulting sites.
- Simple stack when you want zero JavaScript.
Spacing and type
On mobile, 17px questions and 16px answers at 1.6 line height is a sane default. Leave 14px between Q and A, 28px between pairs. (Adjust to your type scale; do not chase pixel perfection on v1.)
Mobile checks
- Accordion headers at least 44px tall.
- Visible focus rings, not hover-only hints.
- Opening one item should not lock page scroll.