Raster & Highlight Boxen

Mit den Raster-Elementen kann Inhalt in ein bis vier Spalten angezeigt werden, inklusive Konfigurationsmöglichkeiten für verschiedene Breakpoints. Dabei lässt sich auch die Ausrichtung bestimmen, wie die folgenden Elemente zeigen.

1-Spalter mit zentriertem Inhalt mit 50% Breite

Ü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.

2-Spalter mit vertikal zentriertem Inhalt

Inhalt befindet sich in Highlight Boxen Primary

Im Bereich des Webdesigns oder der Entwicklung kommt es oft vor, dass das Design bereits steht, während der Text noch auf sich warten lässt. Um zu verhindern, dass das Layout unvollständig wirkt und leer erscheint, tritt der Blindtext in Aktion. Als treuer Begleiter, stets im Schatten seines bekannten Bruders Lorem Ipsum, freue ich mich jedes Mal darauf, wenn ein paar Zeilen meiner Texte betrachtet werden. Denn im Bereich des Online-Designs ist es essenziell, dass das Sein mit Wahrnehmung einhergeht.

Lorem Ipsum mag als Platzhalter dienen, aber bedeutungsvolle Inhalte, die auf die Bedürfnisse des Publikums zugeschnitten sind, sind es, die wirklich fesseln und die Interaktion auf einer Website vorantreiben.

3-Spalter mit linksbündigem Text

Beim Frontend-Design ist die Benutzererfahrung von zentraler Bedeutung. Durch eine intuitive und ansprechende Gestaltung können Nutzer effizienter interagieren und Inhalte besser erfassen.

Die Programmierung erfordert präzise Logik und strukturierten Code. Eine gut dokumentierte Implementierung erleichtert nicht nur die Wartung, sondern auch die Zusammenarbeit im Team.

Bei Programmierung und beim Frontend-Design ist eine gründliche Planung unerlässlich. Ein guter Ansatz gewährleistet eine reibungslose Entwicklung und ein überzeugendes Benutzererlebnis.

4-Spalter

Gefüllt mit Highlight Boxen

Highlight Box Success

Highlight Box Info

Highlight Box Warning

Highlight Box Danger

Neben dem Mask Element ‘Highlight Box’ gibt es weitere Inhaltselemente, um Informationen in Containern darzustellen. Auf der Seite Boxen & Karten stellen wir das Mask Element ‘Karte’ und das Raster-Element ‘Box’ vor.

Bereiche

Bereiche können mit nahezu beliebigen anderen Inhaltselementen befüllt werden. Die Überschriften der Abschnitte auf dieser Seite befinden sich bereits im Bereich mit dunklem Hintergrund. Der Text, den Sie hier lesen, befindet sich im Bereich mit hellem Hintergrund.

Bereich mit Hintergrundbild (dunkel)

Alternativ kann ein Bereich auch mit einem Bild hinterlegt werden.

Bereich mit Hintergrundbild

Alternativ kann ein Bereich auch mit einem Bild ohne zusätzlichem Overlay hinterlegt werden. In diesem Bereich wurde stattdessen eine Box eingefügt, die den Text hervorhebt.

Bereich mit Hintergrundbild (hell) + scrollendes Bild

Alternativ kann ein Bereich auch mit einem Bild hinterlegt werden.
Hierbei lässt sich auch einstellen, dass das Bild mitscrollt.