FAQ

자주 묻는 질문

Question rows stack in a bordered box and open with a chevron on the right. The all-open version drops the box: a bold question with its answer right beneath.

RuleThe questions on screen and the ones handed to search engines must be the same.

Also known as: Faq

···

usage (Astro)

---
// src/pages/[post].astro
import { Faq } from '../components/registry';
---
<Faq items={post.data.faq} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Faq": "accordion" }
}

props (TypeScript)

export interface FaqProps {
  items: FaqItem[];
  variant?: VariantOf<'Faq'>;
}

accordion stacks question rows inside a box with lines between; the question row turns grey when opened. open drops the box: the question reads like a bold heading, the answer is body text under it, and each pair has a line below.

With many questions and limited space use accordion; to be searchable or read in one go, open. accordion looks tidy folded but hides answers behind a click.

Use it when — Variants 2

accordionAccordion When there are more than five questions or the answers are long.Used by 4: babyplay, babysleep, birthprep, toddlerfood
openOpen When there are three or four short answers — every Q&A stays open.Used by 7: babyfood, babysick, feeding, milestone, newborn, vaccination, 허브

Same component, other packs

16FAQ자주 묻는 질문

16FAQ자주 묻는 질문

16FAQ자주 묻는 질문

Use it when — Variants 2