Text-Bild

Klassische Bild-Text Section bei der beide Abschnitte auf unterschiedliche Art und Weise kombiniert werden.

Variante 1

Einfachste Kombination von Bild und Text. Eine einfache Überschrift mit Text auf der einen und ein einfaches Bild auf der anderen Seite. Die Spalten gleichen sich nicht autom. in der Höhe an. Ebenso das Bild.

Ich bin eine h2 Überschrift

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.

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.

Variante 2

Bei dieser Variante ist der Textblock um eine Sub-Heading + Separator und einen CTA-Button ergänzt.

Ich bin eine h2 Überschrift

Ich bin eine Sub-Heading

Jetzt anmelden

Variante 3

Bei dieser Variante wird statt einem Bild eine Galerie mit 4 Bildern im gleichen Format genutzt.

Ich bin eine h2 Überschrift

Ich bin eine Sub-Heading

Jetzt anmelden

Variante 4

Hier wird der Hintergrund der Section vollflächig eingefärbt. Das Bild ist ein Hintergrund und covert eine der beiden Spalten (skaliert nicht proportional). Die Section hat min. 50% Viewport-Höhe und ist auf eine Breite von 2048px begrenzt. Die Höhe der Spalten gleichen sich autom. an.

Ich bin eine Sub-Heading

Ich bin eine h2 Überschrift

Jetzt anmelden

Variante 5

Hier wird der Hintergrund der Section vollflächig eingefärbt. Das Bild ist ein Hintergrund und covert eine der beiden Spalten (skaliert nicht proportional). Zudem wird diese Hälfte mittels Verlauf Overlay in die Farbfläche verblendet. Mobil wird der Verlauf entfernt. Kann aber manuell per CSS vertikal ausgerichtet werden. Die Section hat min. 50% Viewport-Höhe und ist auf eine Breite von 2048px begrenzt. Die Höhe der Spalten gleichen sich autom. an.

Ich bin eine Sub-Heading

Ich bin eine h2 Überschrift

Jetzt anmelden

Variante 6

Bei dieser Variante erstreckt sich ein Hintergrundbild,vorzugsweise mit einem Motiv rechts oder links, über den gesamten Hintergrund. Der Text wird auf einer Hälfte passend zum Motiv in einer von zwei Spalten platziert. Zur besseren Lesbarkeit ist der Hintergrund mit einem halbtransparenten Overlay versehen. Mobil sollte im Zweifel das Hintergrundbild oder zumindest dessen Position zur optimalen Lesbarkeit des Textes angepasst werden.

Ich bin eine Sub-Heading

Ich bin eine h2 Überschrift

Jetzt anmelden

Variante 7

Für diese Variante wird statt einem Bild eine Galerie aus vier Bildern genutzt. Die Bilder müssen hoch- wie quer das gleiche Format haben. Beispiel wäre 2 Fotos mit 3:4 Format und zwei mit 4:3 Format.

Ich bin eine Sub-Heading

Ich bin eine h2 Überschrift

Jetzt anmelden

Variante 8

Für diese Variante wird statt einem Bild eine Galerie aus sieben Bildern genutzt. Die Bilder müssen hoch- wie quer das gleiche Das Layout setzt sich auch zwei UABB Galerie-Modulen zusammen. Das erste mit 2 Bilder im Format 2:3 + 4:3 wobei diese mittels CSS angepasst ist.

Das zweite Galerie-Modul nutzt vier Bilder im quadratischen Format sowie eines im Format 1:2.

Ich bin eine Sub-Heading

Ich bin eine h2 Überschrift

Jetzt anmelden

Variante 9

Diese Variante besteht aus zwei überlagerten Spalten mit ihrem jeweiligen Content bzw. Hintergrundbild. Für einen Layer-Effekt hebt sich die Spalte mit Text vom Hintergrund ab. Das Bild ist hier links als Hintergrund in einer Spalte mit einem Aspect-Ratio von 1 (quadratisch) positioniert.

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.

Hier klicken

Variante 10

Diese Variante besteht aus zwei überlagerten Spalten mit ihrem jeweiligen Content bzw. Hintergrundbild. Für einen Layer-Effekt hebt sich die Spalte mit Text vom Hintergrund ab. Das Bild ist hier rechts als Hintergrund in einer Spalte mit einem Aspect-Ratio von 1 (quadratisch) positioniert. Die Spaltenreihenfolge wird mobile umgekehrt und im CSS der Spalte ist ein Z-Index von 10 angegeben.

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.

Hier klicken

Hinweise für Entwickler:

.arc-text-image | Allg. Klasse für alle Variationen dieser Section.

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

Hinweis: Variante 7 enthält Modul CSS im ersten UABB-Gallery Modul, welches extrahiert werden muss.