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.

Steps

Prozessschritte

Die Steps-Komponente visualisiert Abläufe oder Prozesse in mehreren Schritten. Sie eignet sich besonders für die Darstellung von Arbeitsabläufen, Prozessen oder Anleitungen.

Codebeispiel

<Steps
title="Lorem ipsum dolor"
subtitle="Sit amet, consetetur sadipscing elitr"
tagline="Lorem ipsum"
items={[
{
title: 'Lorem ipsum',
description: 'Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
icon: 'tabler:bulb',
},
{
title: 'Consetetur sadipscing',
description: 'Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
icon: 'tabler:target',
},
{
title: 'Sed diam nonumy',
description: 'Eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.',
icon: 'tabler:rocket',
},
{
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: 'tabler:chart-line',
},
]}
isDark={false}
classes={{
container: "max-w-6xl mx-auto"
}}
/>

Parameter

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