CBK-032 Structure Container
Wann wird die Komponente verwendet?
Die Container-Komponente erlaubt die Erstellung eines Containers, der wiederum für weitere Komponenten auf einer Seite verwendet werden kann.
Die Container-Komponente dient dazu die Seite zu strukturieren als auch Komponenten in eben diesem Container zu gruppieren. Durch diese Gruppierung in einem Container wird die Darstellung vereinfacht und vereinheitlicht.
Der Structure Container richtet sich dabei nach dem Layout der Seite und an wie vielen Spalten (Englisch Columns) er ausgerichtet ist. Das Maß von 12 Columns ist dabei fix.
Werden mehrere Structure Container mit weniger Columns platziert, rutschen sie in der Desktop-Ansicht nebeneinander (siehe Beispiel C unten auf der Seite)
Layout
Im technischen Hintergrund der Seite sind 12 Spalten (Englisch columns) gegeben. Dieses Muster ist fix und gilt auch für alle Viewports. Das heißt, wenn auf der Desktop-Ansicht 12 Columns im Hintergrund sind, gelten die 12 Columns auch für Ansichten auf Tablet oder Smartphone.
- Bestimmt per Columns die grundlegende Gesamtstruktur der Seite
- Layout ist keine Komponente
- Layout Columns sind nicht veränderbar
- Layout ist einmalig
Structure Container
Der Structure Container dient als Rahmen für weitere Komponenten. Standardmäßig umfasst der Structure Container 12 Columns. In der Layout-Ansicht kann der Structure Container angepasst werden, z.B. auf 8 Columns. Alle weiteren Komponenten in diesem Structure Container bewegen sich dann auf 8 Columns. Ebenso ist es möglich mehrere Structure Container nebeneinander zu platzieren, etwa 2 Structure Container à je 6 Columns.
- Eine eigenständige Komponente
- Dient als unsichtbarer Rahmen für weitere Komponenten
- Kann auf dem Layout anhand der Columns größer oder kleiner gesetzt werden
- Mehrere Structure Container auf einer Seite möglich, auch nebeneinander
- Structure Container können nicht ineinander platziert werden
Group Container
Der Group Container verhält sich ähnlich zum Structure Container. Er breitet sich initial über 12 Columns aus und lässt sich in der Größe anpassen. Der Group Container dient dazu weitere Komponenten untereinander zu gruppieren und so die gesamte Darstellung zu vereinfachen, beispielsweise Title, Text, CTA. Wenn der Group Container in einem Structure Container sitzt, nimmt er dessen Größe an.
- Eine eigene Komponente, die keine weiteren Einstellungen hat
- In einigen Komponenten funktioniert nur der Group Container, wie z.B. im Akkordeon
- Kann auf dem Layout anhand der Columns größer oder kleiner gesetzt werden
- Mehrmalig pro Seite möglich
- In einem Group Container kann kein Structure Container gesetzt werden
Über den Content Tree wird das Kaskaden-System und Zusammenspiel von Layout, Structure Container und Group Container noch einmal deutlich:
Dialogfelder
Konfiguration Properties
Background Color
- Hintergrundfarbe lässt sich per HEX-Schieberegeler einstellen, alternativ als rgb eingeben im Format (rgb,r,g,b)
- ein starker Kontrast zum Text ist verpflichtend für die Barrierefreiheit, d.h. kein Hellgrau auf Weiß
Background Image
- Hintergrundbild lässt sich aus den AEM Assets auswählen oder per Drag & Drop einfügen
- Wichtig ist der richtige Größenzuschnitt je nach Größe des Structured Containers, um Unschärfe im Bild zu vermeiden
Structure Container Beispiel A
- Structure Container A über 12 Spalten Layout
- Hintergrund ist #e6e6e6
- Befüllt mit Title H2
- Befüllt mit Text und Aufzählugszeichen
Structure Container Beispiel B
Titel
- Lorem ipsum dolor sit amet
- Structure Container B über 8 Spalten Layout
- Hintergrundbild ist gesetzt
- Die Höhe des Structure Containers passt sich automatisch der Höhe des Hintergrundbildes an
- Die Breite des Structure Containers bleibt gleich und passt sich nicht der Breite des Hintergrundbildes an
- Befüllt mit Title H2
- Befüllt mit Text und Aufzählugszeichen
Wichtig!
Bei einem Hintergrundbild muss der Text darauf weiterhin leserlich sein, d.h. ein guter Kontrast muss gegeben sein. Das Beispielhintergrundbild mit den Tomaten ist als Hintergrund für einen Text nicht weiter geeignet.
Structure Container Beispiel C
Dies ist ein eigener Structure Container
- Structure Container C mit 4 Spalten Layout
- Hintergrund ist #e6e6e6
- Befüllt mit Title H2
- Befüllt mit Text und Aufzählugszeichen
Dies ist ein eigener Structure Container
- Structure Container C mit 4 Spalten Layout
- Hintergrund ist rgb(225,219,230)
- Befüllt mit Title H2
- Befüllt mit Text und Aufzählugszeichen
Dies ist ein eigener Structure Container
- Structure Container C mit 4 Spalten Layout
- Hintergrund ist #e6e6e6
- Befüllt mit Title H2
- Befüllt mit Text und Aufzählugszeichen