Grids & Highlight Boxes
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
Contents are in Highlight Boxes Primary
In the realm of web design or development, it often happens that the design is ready while the text is still pending. To prevent the layout from appearing incomplete and empty, the placeholder text steps in. As a faithful companion, always in the shadow of its well-known brother Lorem Ipsum, I am delighted every time a few lines of my text are viewed. Because in the realm of online design, being perceived is essential.
Lorem ipsum may serve as a placeholder, but meaningful content tailored to the audience's needs is what truly captivates and drives engagement on a website.
Three Columns with left-aligned Text
User experience is paramount in frontend design. Through intuitive and appealing design, users can interact more efficiently and grasp content better.
Programming requires precise logic and structured code. A well-documented implementation not only facilitates maintenance, but also teamwork.
Planning is essential in both programming and frontend design. A thoughtful approach ensures smooth development and a compelling UX.
Four Columns
Filled with highlight boxes
Highlight Box Success
Highlight Box Info
Highlight Box Warning
Highlight Box Danger
In addition to the 'Highlight Box' mask element, there are other content elements for displaying information in containers. On the Boxes & Cards page, we present the 'Card' mask element and the 'Box' grid element.
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.