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

Ein 1-Spalter mit zentriertem Inhalt und 50 % Breite eignet sich ideal für schlichte, klare Layouts. Diese Gestaltung sorgt dafür, dass der Inhalt fokussiert und gut lesbar bleibt, ohne den gesamten Bildschirm einzunehmen. Sie wird häufig verwendet, um kurze, prägnante Botschaften oder zentrale Elemente hervorzuheben, während der Rest der Seite frei bleibt, um Ablenkungen zu minimieren. Die Zentrierung verstärkt die visuelle Wirkung des Inhalts und zieht die Aufmerksamkeit direkt darauf.

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.

Bild zum Demo-Inhalt: Bereich mit Hintergrundbild (dunkel)

Bereich mit Hintergrundbild (dunkel)

Alternativ kann ein Bereich auch mit einem Bild hinterlegt werden.

Bild zum Demo-Inhalt: Bereich mit Hintergrundbild

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.

Bild zum Demo-Inhalt: Bereich mit Hintergrundbild (hell) & scrollendes Bild

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.