Teaserbox

Eines der vielfältigsten und am häufigsten genutzten Module. Zur Darstellung von Überschrift, Text, Bild Inhalten welche meist als Teaser verlinkt werden.

Variante 1

In dieser Variante wird die Textbox um einen Link in Form eines CTA erweitert. Die Darstellung mit Hintergrund und Schatten dient nur zur Veranschaulichung und wird beim produktiven Einsatz dann durch den globale Look definiert. Eine manuelles Überschreiben individueller Boxen bleibt jedoch weiterhin möglich.

Ich bin der h3 Titel der Box

Bei dieser Variante sind Titel und Beschreibung zentriert sowie die Verlinkung mittels CTA realisiert. Dies ist die einfachste Form einer "Teaserbox"

Ich bin der h3 Titel der Box

Zur Veranschaulichung wurde bei dieser Box auch ein Rahmen sowie Schatten und Hintergrund eingebunden. In der Regel durch den Look definiert.

Variante 2

In dieser Variante wird die Textbox um einen Link in Form eines Textlinks erweitert. Die Darstellung mit Hintergrund und Schatten dient nur zur Veranschaulichung und wird beim produktiven Einsatz dann durch den globale Look definiert. Eine manuelles Überschreiben individueller Boxen bleibt jedoch weiterhin möglich.

Ich bin der h3 Titel der Box

Bei dieser Variante sind Titel und Beschreibung zentriert sowie die Verlinkung mittels CTA realisiert. Dies ist die einfachste Form einer "Teaserbox"

Mehr erfahren

Ich bin der h3 Titel der Box

Zur Veranschaulichung wurde bei dieser Box auch ein Rahmen sowie Schatten und Hintergrund eingebunden. In der Regel durch den Look definiert.

Mehr erfahren

Variante 3

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Verlinkung ist hier mittels einfachem Textlink unterhalb der Beschreibung realisiert.

Ich bin der h3 Titel der Box

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Verlinkung ist hier mittels einfachem Textlink unterhalb der Beschreibung realisiert.

Mehr erfahren

Ich bin der h3 Titel der Box

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Verlinkung ist hier mittels einfachem Textlink unterhalb der Beschreibung realisiert.

Mehr erfahren

Variante 4

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Verlinkung ist hier mittels CTA-Buton unterhalb der Beschreibung realisiert.

Ich bin der h3 Titel der Box

Natürlich kann diese Variante wie alle anderen auch zentriert gesetzt werden. Zudem lässt sich auch hier der Link in Form eines CTAs statt Links umsetzen. DIese Option haben ebenfalls alle Varianten.

Ich bin der h3 Titel der Box

Natürlich kann diese Variante wie alle anderen auch zentriert gesetzt werden. Zudem lässt sich auch hier der Link in Form eines CTAs statt Links umsetzen. DIese Option haben ebenfalls alle Varianten.

Variante 5

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Besonderheit ist, dass das Icon den Rahmen der Box überlagert. Rahmen und Schatten sind hier zur Veranschaulichung und werden in der Regel durch den Look definiert.

Ich bin der h3 Titel der Box

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Verlinkung ist hier mittels einfachem Textlink unterhalb der Beschreibung realisiert.

Mehr erfahren

Ich bin der h3 Titel der Box

Bei dieser Variante wird die Box durch ein Icon über Titel und Beschreibung ergänzt. Die Verlinkung ist hier mittels einfachem Textlink unterhalb der Beschreibung realisiert.

Mehr erfahren

Variante 6

Bei dieser Variante wird die Box durch ein Bild über Titel und Beschreibung ergänzt. Das Bild lässt sich nicht im Modul beschneiden. Zur Veranschaulichung wurde in den Modul-Einstellungen (Erweiterte > CSS) das Bild per CSS beschnitten. Im produktiven Einsatz sollten Bildformat und Innenabstand im Look definiert sein.

pexels-nubia-navarro-(nubikini)-386020

Ich bin der h3 Titel der Box

Dies ist eine Standard Textbox. Die Verlinkung der ganzen Box wurde per CSS realisiert, ebenso das Content-Padding.

Ich bin der h3 Titel der Box

Dies ist eine Standard Textbox. Die Verlinkung der ganzen Box wurde per CSS realisiert, ebenso das Content-Padding.

Mehr lesen

Hinweise für Entwickler:

.arc-teaserbox | Generische Klasse für alle Varianten der Teaserboxen

.arc-teaserbox--var-{n} | {n} wird hier jeweils durch die Nummer der Variante ersetzt.

Nach oben scrollen