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
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| title | string | Titel der Komponente | - |
| subtitle | string | Untertitel der Komponente | - |
| tagline | string | Tagline über dem Titel | - |
| items | array | Liste von Schritten mit title, description und optionalem icon | [] |
| isDark | boolean | Dunkles Design | false |
| classes | object | Zusätzliche CSS-Klassen | {} |