Lorem ipsum
Lorem ipsum dolor sit
Amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet?
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr?
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Sed diam nonumy eirmod?
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
Ut labore et dolore magna?
Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum
Lorem ipsum dolor sit
Amet, consetetur sadipscing elitr in einer Spalte
Lorem ipsum dolor sit amet?
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr?
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
Sed diam nonumy eirmod tempor?
Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Ut labore et dolore magna aliquyam?
Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
At vero eos et accusam et justo?
Duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
FAQs
Häufig gestellte Fragen
Beispiel für die FAQs-Komponente mit allen wichtigen Props.
Codebeispiel
<FAQs title="Lorem ipsum dolor sit" subtitle="Amet, consetetur sadipscing elitr" tagline="Lorem ipsum" items={[ { title: 'Lorem ipsum dolor sit amet?', description: 'Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.', icon: 'tabler:info-circle' }, { title: 'Consetetur sadipscing elitr?', description: 'Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', icon: 'tabler:map-pin' }, { title: 'Sed diam nonumy eirmod?', description: 'Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.', icon: 'tabler:cloud' }, { title: 'Ut labore et dolore magna?', description: 'Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.', icon: 'tabler:mail' } ]} columns={3} isDark={false} id="faqs-demo" classes={{ container: 'my-8', panel: 'rounded-lg' }}/>Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| title | string | Titel der FAQ-Sektion | - |
| subtitle | string | Untertitel der FAQ-Sektion | - |
| tagline | string | Kurze Tagline über dem Titel | - |
| items | array | Array aus FAQ-Objekten mit title, description, icon etc. | [] |
| columns | number | Anzahl der Spalten | 2 |
| isDark | boolean | Dunkles Farbschema | false |
| id | string | ID der Komponente | - |
| classes | object | CSS-Klassen für Container und Panel | {} |
| iconUp | string | Icon für aufgeklappte Panels | - |
| iconDown | string | Icon für zugeklappte Panels | - |
Fragments
| Bezeichner | Beschreibung | Default |
|---|---|---|
| default | Standardinhalt der FAQs |