Skip to content

Perchford design system

Internal, noindex
EDU-01

Concise FAQ

Short answers to the questions that come up first. Disclosure via native details elements, so it works with no JavaScript.

Untriaged
Open isolated

Use it when

Short answers to the questions that come up first. Disclosure via native details elements, so it works with no JavaScript.

Category
Education and FAQ
Layout archetype
Held column
Page position
middle (derived)
Purpose
explain (derived)
Field
light (derived)
Interaction
accordion (derived)
Motifs
Held column, Quiet field

Content it requires

  • siteFaqs from src/data/homeManagement.ts, or four to eight custom entries

Do not use it when

  • The first entry is open by default so the section is never a wall of closed rows.
  • Answers over about 60 words belong in the decision FAQ instead.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/EduFaqConcise.astro

---
import EduFaqConcise from '../components/patterns/EduFaqConcise.astro';
---

<EduFaqConcise />

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.