Skip to main content

Banner

Hier findest du Banner.

Main container banner

Beschreibung .multilayer-banner.main-container-banner

Fixed image banner

Beschreibung .banner-vh-{ ... }

Size 1 (full height)

Beschreibung .banner-vh-1

Size 2

Beschreibung .banner-vh-2

Size 3

Beschreibung .banner-vh-3


Banner mit echtem Bild (nicht Background-Image)

Dieser Baustein besteht aus einem .multilayer-banner. Sofern dieser das erste Element auf der Seite ist und sich somit mit dem Menü überlagert, kann auf .multilayer-static-layer zusätzlich die Klasse .below-navbar-content gesetzt werden (im Beispiel nicht vorhanden).

Die Klassen .banner-3 (Mindesthöhe für den Banner), .py-5 (Innenabstand oben und unten) und .display-2 sind optional und können geändert werden.


Fullwidth-Banner mit überlagerndem Logo

Dieser Baustein besteht aus zwei Geschwisterelementen; einem .multilayer-banner sowie einem .banner-logo-container. Auf ersteres kann, sofern es das erste Element auf der Seite ist und sich somit mit dem Menü überlagert, auf .multilayer-static-layer zusätzlich die Klasse .below-navbar-content gesetzt werden (im Beispiel nicht vorhanden).

Die Klassen .banner-3 (Mindesthöhe für den Banner), .py-5 (Innenabstand oben und unten) und .display-3 sind optional und können geändert werden.


Fixed image banner with overlay (Full height)

Beschreibung .class

Code

Fixed image banner with overlay (Medium device relative height)

Beschreibung .class

Code

Fixed image banner with overlay (Smaller device relative height)

Beschreibung .class

Code


Fixed image banner with overlay

Beschreibung .class


Static image banner with overlay

Beschreibung .class


Fixed image banner with column-row

Beschreibung .class

Code


Fixed image banner with tab links

Beschreibung .class

Code


Fixed image banner with tab links

Beschreibung .class

Code


Bottom rounded banner

Beschreibung .class

Lorem ipsum dolor sit amet

Code