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.
![Bereich mit Hintergrundbild (dunkel) Bild zum Demo-Inhalt: Bereich mit Hintergrundbild (dunkel)](/fileadmin/_processed_/e/a/csm_PANO_20170306_080733_ff08269e3f.webp)
Bereich mit Hintergrundbild (dunkel)
Alternativ kann ein Bereich auch mit einem Bild hinterlegt werden.
![Bild zum Demo-Inhalt: Bereich mit Hintergrundbild](/fileadmin/_processed_/d/9/csm_PANO_20170309_121600_e8b897b527.webp)
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 Bild zum Demo-Inhalt: Bereich mit Hintergrundbild (hell) & scrollendes Bild](/fileadmin/_processed_/e/a/csm_PANO_20170306_080733_ff08269e3f.webp)
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.