Tagline

Title

Subtitle

Lorem ipsum

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.

Hero

Introduction to Topics

The Hero section is a prominent area at the top of a webpage, often containing striking images or graphics along with a short message or headline. It grabs visitors' attention and provides a first impression of the company.

Codebeispiel

<Hero
title="Title"
subtitle="Subtitle"
tagline="Tagline"
content="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."
actions={<Button variant="primary" href="#">Lorem ipsum</Button>}
>
<Fragment slot="image">
  <img src="/assets/images/default.png" alt="Lorem ipsum" class="mx-auto w-full rounded-lg bg-gray-500 shadow" />
</Fragment>
<Fragment slot="actions">
  <Button variant="primary" href="#">Lorem ipsum</Button>
</Fragment>
 <Fragment slot="bg">
    <div class="absolute inset-0 bg-slate-100 dark:bg-transparent"></div>
</Fragment>
</Hero>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Titel der Hero Sektion	-
subtitle	string	Untertitel der Hero Sektion	-
tagline	string	Tagline über dem Titel	-
content	string	Inhaltsbereich (Vorsicht: Länge beachten!)	-
actions	ReactNode	Call-to-Action Buttons	-
id	string	ID für das Inhaltselement	-

Fragments

Bezeichner	Beschreibung	Default
default	Standardinhalt
image	Slot für das Bild

Wiki-Dokumentation Quellcode