CBK-033 Group Container
Wann wird die Komponente verwendet?
Der Group Container ist eine Komponente, die dabei hilft, zusammengehörige Komponenten zu organisieren. Im Gegensatz zu anderen Komponenten hat der Group Container keine anpassbaren Einstellungen.
Der Group Container sorgt dafür, dass die Komponenten gut angeordnet bleiben und auf verschiedenen Bildschirmgrößen gleich aussehen, ohne dass das Layout durcheinander gerät und beeinträchtigt wird.
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
- ID kann vergeben werden für einen Anchor-Link
- Weitere Einstellungen sind nicht notwendig
Beispiele
Dies ist eine Headline in einem Group Container
- Die ist eine Textkomponente. Sie ist in der Group Container Komponente platziert.
- Der Group Container hat keine weiteren Einstellungen und sitzt wiederum in einem Structure Container mit eingefärbter Hintergrundfarbe.
- Der Structure Container ist auf das gesamte Layout von 12 Spalten gezogen. Entsprechend viel Raum nimmt auch der Group Container ein.
Dies ist eine Headline in einem Group Container
- Die ist eine Textkomponente. Sie ist in der Group Container Komponente platziert.
- Der Group Container sitzt wiederum in einem Structure Container mit eingefärbter Hintergrundfarbe.
- Der Group Container hat eine Breite von 6 Spalten, der Structure Container eine Breite von 10 Spalten im Layout.
Die ist eine Textkomponente. Sie ist in der Group Container Komponente platziert. Der Group Container hat keine weiteren Einstellungen und sitzt wiederum in einem Structure Container mit eingefärbter Hintergrundfarbe.
Der Structure Container ist auf das gesamte Layout von 12 Spalten gezogen. Entsprechend viel Raum nimmt auch der Group Container ein.
Dies ist eine Headline in einem Group Container
- Die ist eine Textkomponente. Sie ist in der Group Container Komponente platziert.
- Der Group Container sitzt wiederum in einem Structure Container mit eingefärbter Hintergrundfarbe.
- Der Group Container hat eine Breite von 6 Spalten, der Structure Container eine Breite von 6 Spalten im Layout.
Die ist eine Textkomponente. Sie ist in der Group Container Komponente platziert. Der Group Container hat keine weiteren Einstellungen und sitzt wiederum in einem Structure Container mit eingefärbter Hintergrundfarbe.
Der Structure Container ist auf das gesamte Layout von 12 Spalten gezogen. Entsprechend viel Raum nimmt auch der Group Container ein.