FAQ

자주 묻는 질문

Question rows stacked inside a bordered box that open with a chevron. The all-open variant puts a blue "Q" and a grey "A" in front.

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 is bold question lines inside a rounded bordered box; pressing the chevron at the right opens the answer. open has every answer expanded, a blue Q before each question and a dark A before each answer, with grey rules between pairs.

With many questions accordion stays short; if the answers matter or should be readable at a glance, open fits. open is the same tone as government-site FAQ pages.

accordion follows the KRDS accordion.

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