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.

Lorem ipsum

Consetetur sadipscing

HeroSlim

Kompakte Hero-Variante

Die HeroSlim-Komponente ist eine kompakte Variante des Hero-Widgets mit reduziertem Padding, ideal für Seiten mit weniger vertikalem Platz.

Codebeispiel

<HeroSlim
id="webinar-hero"
tagline="Lorem ipsum"
backgroundImage="~/assets/images/webinar-bg.svg"
classes={{
  container: "max-w-7xl mx-auto",
  wrapper: '!py-8',
  title: 'dark:text-slate-800 text-4xl md:text-5xl',
  subtitle: 'dark:text-slate-800 text-lg',
  tagline: "text-orange-600 font-bold",
  content: "text-center"
}}
actions={[
  {
    text: "Lorem ipsum",
    href: "/webinare/registrierung",
    variant: "primary",
    icon: "tabler:calendar"
  }
]}
>
<Fragment slot="title">
  Lorem ipsum dolor sit amet
</Fragment>
<Fragment slot="subtitle">
  Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</Fragment>
</HeroSlim>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Hauptüberschrift (Slot)	-
subtitle	string	Unterüberschrift (Slot)	-
tagline	string	Kleine Überschrift über dem Titel	-
backgroundImage	string	Hintergrundbild-URL	-
actions	string \| CallToAction[]	Call-to-Action Buttons (Slot)	-
classes	object	CSS-Klassen-Overrides	{}
id	string	Widget-ID für Anchors	-

Fragments

Bezeichner	Beschreibung	Default
title	Slot für den Titel
subtitle	Slot für den Untertitel
actions	Slot für Call-to-Action Buttons

Wiki-Dokumentation Quellcode