FAQ

자주 묻는 질문

Each question row has a thin rule above and a chevron at the right; opened answers keep a right margin. There is also an all-open two-column Q&A.

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

Also known as: FaqAccordion

···

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 shows each question as one row of thin type with a chevron at the right. Hovering changes the background, and an opened answer leaves the right 25% empty. It opens and closes on click. open shows everything expanded: on wide screens the question sits in bold on the left, the answer on the right, with a rule above each row.

With many questions and long answers, accordion saves space; with four or five short ones you want everyone to read, open is better, and it shows answers right away. At four questions, open is a little over twice as tall as accordion in the demo.

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