FAQ

자주 묻는 질문

Questions divided by thin lines. accordion is folded with a chevron on the right to open, while open shows every answer expanded.

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 four bold question lines under an “FAQ” title, separated by lines, with the chevron at the far right. open shows each question like a bold heading, the answer in the same dark body text, and lines between questions.

Choose accordion to keep the article short and open when you want the questions visible to search. In the folded state the answers are hidden but the content is the same.

accordion opens and closes on click, and an underline appears when the pointer hovers a question.

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