Components
Lorem ipsum dolor sit
Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.
Et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
Dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor.
Rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing.
Kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Features2
Feature-Liste mit Icons
Beispiel für die Features2-Komponente.
Codebeispiel
<Features2 title="Lorem ipsum dolor sit" subtitle="Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat." tagline="Components" items={[ { title: 'Lorem ipsum', description: 'Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.', icon: 'flat-color-icons:template', }, { title: 'Consetetur sadipscing', description: 'Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', icon: 'flat-color-icons:gallery', }, { title: 'Sed diam nonumy', description: 'Eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.', icon: 'flat-color-icons:approval', }, { title: 'Ut labore et dolore', description: 'Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.', icon: 'flat-color-icons:document', }, { title: 'Stet clita kasd', description: 'Gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.', icon: 'flat-color-icons:advertising', }, { title: 'At vero eos', description: 'Et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.', icon: 'flat-color-icons:currency-exchange', }, { title: 'Et justo duo', description: 'Dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor.', icon: 'flat-color-icons:voice-presentation', }, { title: 'Dolores et ea', description: 'Rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing.', icon: 'flat-color-icons:business-contact', }, { title: 'Rebum stet clita', description: 'Kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing elitr.', icon: 'flat-color-icons:database', }, ]}> <Fragment slot="bg"> <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div> </Fragment></Features2>Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| title | string | Titel der Komponente | - |
| subtitle | string | Untertitel der Komponente | - |
| tagline | string | Tagline über dem Titel | - |
| items | array | Liste von Elementen mit Titel, Beschreibung und optionalem Icon | [] |
| isDark | boolean | Dunkles Design | false |
| classes | object | Zusätzliche CSS-Klassen | {} |
Fragments
| Bezeichner | Beschreibung | Default |
|---|---|---|
| default | Standardinhalt |