Lorem ipsum
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 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, consetetur sadipscing elitr, sed diam nonumy

FlexContentBlock

Flexibler Content-Block

Die FlexContentBlock-Komponente zeigt flexiblen Content mit Bild in einem anpassbaren Layout an. Das Bild kann links oder rechts positioniert werden.

Codebeispiel

<FlexContentBlock
tagline="Lorem ipsum"
title="Dolor sit amet, consetetur"
subtitle="Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
image={{
src: "~/assets/images/default.png",
alt: "Lorem ipsum",
width: "1/2"
}}
imageRight={false}
isDark={false}
classes={{
container: "py-16 max-w-7xl mx-auto",
image: "rounded-lg shadow-lg",
content: "prose prose-lg dark:prose-invert"
}}
>
<h3 class="mb-4 text-2xl font-bold">Lorem ipsum dolor</h3>
<p class="mb-4">
Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</FlexContentBlock>

Parameter

BezeichnerTypBeschreibungDefault
titlestringHauptüberschrift-
subtitlestringUnterüberschrift-
taglinestringKleine Überschrift-
imageobjectBild-Konfiguration mit src, alt, width-
imageRightbooleanBild rechts positionierenfalse
isDarkbooleanDunkles Designfalse
classesobjectCSS-Klassen-Overrides{}

Fragments

BezeichnerBeschreibungDefault
defaultInhalt wird über den Default-Slot übergeben