Grids
The grid elements can be used to display content in one to four columns, including configuration options for different breakpoints. The alignment can also be determined, as the following elements show.
One Column with Centered Contents with 50 % Width
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Two Columns with Vertically Centered Contents
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
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.
Three Columns with left-aligned Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Four Columns
Highlight Box Success
Highlight Box Info
Highlight Box Warning
Highlight Box Danger
More information about the Highlight Boxes can be found on the Boxes & Cards page.
Areas
Areas can be filled with almost any other content elements. The section headers on this page are already in the area with dark background. The text you are reading here is in the area with a light background.
Area with Background Image (Dark)
Alternatively, an area can also be highlighted with an image.
Area with Background Image
Alternatively, an area can also be backed with an image without an additional overlay. Instead, a box has been added to this area to highlight the text.
Area with Background Image (Bright) + scrolling Image
Alternatively, an area can also be highlighted with an image.
Here you can also set the image to scroll.