Zum Inhalt springen
UI Kit
Accent

FAQ Sections mit Accordion und Schema

Häufige Fragen als natives Akkordeon, Raster, Reiter und Suche, auf Wunsch mit FAQPage-Daten.

7 Variants
Kategorie wechseln

Akkordeon, Raster oder Suche

Ein FAQ-Bereich räumt die letzten Zweifel aus, direkt vor dem Call to Action. Jede Variante hier baut auf dem nativen details-Element auf, die Antworten stehen also im HTML, öffnen sich mit der Tastatur und sind ohne JavaScript lesbar. Suchmaschinen sehen jede Antwort, und die optionalen FAQPage-Daten zeichnen sie als Fragen aus.

Das Akkordeon ist der Standard für fünf bis zwölf Fragen. „Zwei Spalten“ und das offene Raster zeigen kurze Antworten sofort und passen zu Seiten mit wenigen, wichtigen Fragen. „Mit Themen“ gliedert ein langes FAQ nach Themen, „Mit Suche“ hilft ab etwa zwanzig Fragen. „Überschrift seitlich“ stellt den Titel auf dem Desktop neben die Liste, „Mit Kontaktkarte“ endet mit einer Person für alles, was noch offen ist.

Schreib die Fragen so, wie Kunden sie stellen, in ihren Worten. Zwei bis drei Sätze je Antwort reichen, für Details verlinkst du die passende Seite. FAQPage-Daten gehören nur zu Fragen, die sichtbar auf der Seite stehen, die Components schreiben sie genau für die Fragen, die sie zeigen.

Fragen

Akkordeon

Eine mittige Spalte. Öffnet ohne JavaScript, immer eine Antwort zugleich.

Im Studio öffnen

Zwei Spalten

Die Fragen in zwei Spalten unter einer geteilten Überschrift.

Im Studio öffnen

Offenes Raster

Jede Antwort sichtbar, nummeriert, in einem Haarlinien-Raster.

Im Studio öffnen

Mit Themen

Reiter je Thema mit Symbolen, Pfeiltasten wechseln zwischen ihnen.

Im Studio öffnen

Überschrift seitlich

Die Überschrift bleibt links stehen, rechts laufen die Fragen.

Im Studio öffnen

Mit Kontaktkarte

Fragen mit einer Karte daneben, um einen Menschen zu erreichen.

Im Studio öffnen

Details

Was Fragen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
7
Version
1.0.0 · seit 1.0.0
Datei
components/ui/faq.tsx
Bringt mit
utilskitbuttoniconrevealsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 8 eigene Texte
Studio
Alle 7 Variants bearbeitbar
In Sammlungen
SaaS-LandingpageArztpraxisEvent
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle FaqProps aus components/ui/faq.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    FaqVariant

    accordiontwo-columngridwith-categorieswith-searchside-headingwith-contact-card

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • itemsPflicht
    FaqItem[]
  • categoriesoptional
    { name: string; icon?: IconName }[]

    with-categories: order and icons of the tabs. Without it the order of appearance is used.

  • contactoptional
    FaqContact

    Contact card (with-contact-card) or the line under search results (with-search)

  • defaultOpenoptional
    number

    Index of the item that starts open, e.g. 0 for the first. Without it every item starts closed.

  • schemaoptional
    boolean

    Adds FAQPage structured data for search engines

Eingebaute Texte

Diese Texte schreibt Fragen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 8 Texte anzeigen
searchEnglisch Search questionsDeutsch Fragen durchsuchen
placeholderEnglisch Search, e.g. “export”Deutsch Suchen, etwa „Export“
resultsEnglisch {n} answersDeutsch {n} Antworten
resultEnglisch 1 answerDeutsch 1 Antwort
noneEnglisch No answer for “{q}” yet.Deutsch Zu „{q}“ gibt es noch keine Antwort.
noneHintEnglisch Write to us, we usually reply within a few hours.Deutsch Schreib uns, wir antworten meist innerhalb weniger Stunden.
clearEnglisch Clear searchDeutsch Suche leeren
categoriesEnglisch TopicsDeutsch Themen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Fragen reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
  • Setzt aria-controls, aria-describedby, aria-label, aria-labelledby, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen search, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 10 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Fragen?

Mit aiw add @ai-website/faq. Der Befehl legt die Datei components/ui/faq.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Fragen?

7 Varianten, Akkordeon, Zwei Spalten, Offenes Raster, Mit Themen, Mit Suche, Überschrift seitlich und Mit Kontaktkarte. Du wählst sie mit der Prop variant, zum Beispiel variant="two-column".

Kann ich die Texte von Fragen übersetzen?

Ja. Fragen bringt 8 eigene Texte auf Deutsch und Englisch mit, etwa „Fragen durchsuchen“, „Suchen, etwa „Export““ und „1 Antwort“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Fragen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Fragen mit aiw_components und installieren sie mit aiw_add @ai-website/faq. Nenn im Prompt die Variante, etwa variant="accordion", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Fragen ohne Code anpassen?

Ja, im Studio. Alle 7 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Faq-Code zum Kopieren.

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben FAQ stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert