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

BezeichnerTypBeschreibungDefault
titlestringTitel der FAQ-Sektion-
subtitlestringUntertitel der FAQ-Sektion-
taglinestringKurze Tagline über dem Titel-
itemsarrayArray aus FAQ-Objekten mit title, description, icon etc.[]
columnsnumberAnzahl der Spalten2
isDarkbooleanDunkles Farbschemafalse
idstringID der Komponente-
classesobjectCSS-Klassen für Container und Panel{}
iconUpstringIcon für aufgeklappte Panels-
iconDownstringIcon für zugeklappte Panels-

Fragments

BezeichnerBeschreibungDefault
defaultStandardinhalt der FAQs