EDU-13
Under review Long-form FAQ accordion
The whole question set inside one large rounded container, at a scale meant to be the page rather than a block on one.
Use it when
The whole question set inside one large rounded container, at a scale meant to be the page rather than a block on one.
- Category
- Education and FAQ
- Layout archetype
- Inset panel
- Page position
- middle
- Purpose
- explain
- Field
- light
- Interaction
- accordion
- Motifs
- Quiet field, Margin note
Content it requires
- Six or more questions in the words a reader would use
- An answer of 20 to 45 words each
- A review commitment for the note
Do not use it when
- Below about six questions this is mostly container. Use EDU-01, which pairs a short excerpt with a held intro column.
- Answers are hidden by default, so nothing a reader needs before deciding may live only here.
- All rows closed on load by design. Opening one first suggests a most-asked ranking that has not been measured.
- Shares the inset archetype with CTA-04, TRU-04, and EDU-07.
Variants
None. Colour swaps and mirrored alignment do not count as variants.
Implementation
src/components/patterns/EduFaqPanel.astro
---
import EduFaqPanel from '../components/patterns/EduFaqPanel.astro';
---
<EduFaqPanel />Import directly. Do not route production through patternComponents.
Production usage
Not yet used on a production page. Nothing here has been proven in front of a customer.
Accessibility
- Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
- Interactive. Native elements only, operable by keyboard, with a visible 3px focus ring.
- Colour never carries meaning alone: every state marker is paired with text.
- Motion respects prefers-reduced-motion.