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
A 1-column with centered content and 50 % width is ideal for simple, clear layouts. This design ensures that the content remains focused and easy to read without taking up the entire screen. It is often used to highlight short, concise messages or central elements while leaving the rest of the page clear to minimize distractions. Centering enhances the visual impact of the content and draws attention directly to it.
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.
You can also set the image to scroll with the content.