Components

Lorem ipsum dolor sit

Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Lorem ipsum

Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

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.

Stet clita kasd

Gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.

At vero eos

Et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

Et justo duo

Dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor.

Dolores et ea

Rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing.

Rebum stet clita

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

BezeichnerTypBeschreibungDefault
titlestringTitel der Komponente-
subtitlestringUntertitel der Komponente-
taglinestringTagline über dem Titel-
itemsarrayListe von Elementen mit Titel, Beschreibung und optionalem Icon[]
isDarkbooleanDunkles Designfalse
classesobjectZusätzliche CSS-Klassen{}

Fragments

BezeichnerBeschreibungDefault
defaultStandardinhalt