FAQ (Accordion) — UI-Kit-Galerie

Beispiele

Fragen-Accordion (native details/summary, kein JS)

FAQs

Du hast Fragen. Hier sind Antworten.

Was unterscheidet das Produkt vom Wettbewerb?

Es arbeitet mit dem vollen Kontext deiner Arbeit statt mit leeren Prompts.

Werden meine Daten für Training verwendet?

Nein. Deine Daten trainieren keine Dritt-Modelle.

Was kostet es?

Ein Abo, alle Modelle — Details auf der Preisseite.

Eigenschaften

Prop	Typ	Default	Builder-Label
tone	string: dark \| gray \| light	"light"	Ton (Theme liefert die Werte)
kicker	string	""	Kicker (Mono-Sektionslabel)
title	string	""	Titel
questions *	array	—	Fragen
subtitle	string	""	Untertitel

* Pflicht-Prop

Genutzte Design-Tokens

border.hairlinecolor.accentcolor.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.band.graycolor.band.gray-mutedcolor.band.gray-textcolor.text.defaultcolor.text.mutedcontainer.lgcontainer.mdfont.family.defaultfont.family.displayfont.family.monofont.leading.displayfont.size.displaylayout.containerleading.loosesize.4size.5size.6text.readingtext.smtext.xltracking.wideweight.boldweight.semibold

LLM-Notizen

section.faq

Fragen-Accordion auf nativen details/summary — KEIN JavaScript nötig.

Wichtige Props

tone (dark|gray|light), kicker (Akzent-Sektionslabel), title, subtitle, questions = [{question, answer}].

Beispiel-Node


{
  "definition": "section.faq",
  "props": {
    "tone": "light",
    "kicker": "FAQ",
    "title": "Häufige Fragen",
    "questions": [{"question": "Was kostet es?", "answer": "Ein Abo, alle Funktionen."}]
  }
}