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.

  • At vero eos et accusam et justo duo dolores
  • Stet clita kasd gubergren, no sea takimata sanctus
  • Est Lorem ipsum dolor sit amet
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 et ea rebum
  • Stet clita kasd gubergren, no sea takimata sanctus est
  • Lorem ipsum dolor sit amet, 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 et ea rebum
  • Stet clita kasd gubergren, no sea takimata sanctus est
  • Lorem ipsum dolor sit amet
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
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  • Sed diam nonumy eirmod tempor invidunt

Accordion

Aufklappbare Bereiche

Die Accordion-Komponente zeigt aufklappbare Bereiche mit Fragen und Antworten an. Sie eignet sich besonders für FAQs oder strukturierte Inhalte.

Codebeispiel

<Accordion
tagline="Lorem ipsum"
title="Dolor sit amet, consetetur sadipscing elitr"
items={[
{
title: 'Lorem ipsum',
content: `
<p class="mb-2">Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<ul class="list-disc list-inside space-y-1">
<li>At vero eos et accusam et justo duo dolores</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus</li>
<li>Est Lorem ipsum dolor sit amet</li>
</ul>
`
},
{
title: 'Consetetur sadipscing',
content: `
<p class="mb-2">Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<ul class="list-disc list-inside space-y-1">
<li>At vero eos et accusam et justo duo dolores et ea rebum</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus est</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
</ul>
`
}
]}
/>

Parameter

BezeichnerTypBeschreibungDefault
titlestringHauptüberschrift für das Accordion-
taglinestringKleine Überschrift über dem Titel-
itemsarrayArray von Accordion-Einträgen mit title und content[]