Thinkport

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

Bezeichner	Typ	Beschreibung	Default
title	string	Hauptüberschrift für das Accordion	-
tagline	string	Kleine Überschrift über dem Titel	-
items	array	Array von Accordion-Einträgen mit title und content	[]

Wiki-Dokumentation Quellcode