Containers & Layout
Drei Layout-Container für flexible Seitenlayouts und ein Bildmodul für großflächige Bilder. Container nehmen ausgewählte sinnvolle Module als Kinder auf und steuern deren Anordnung: nebeneinander, als Karten oder mit aufklappbarem Bereich. Das eröffnet zusätzliche Flexibilität und macht ganz neue Modulkombinationen und Layouts möglich.
Two-Column Container
Der Two-Column Container ist eine flexible Möglichkeit, vorhandene Module zu kombinieren und so mehr Kreation und Vielfalt auf der Seite zu schaffen. Zwei Spalten (links/rechts) können mit ausgewählten Modulen befüllt werden: Intro, Text, Partner List, Accordion, Two-Column (verschachtelt), Overview (Tabs), Column Image und Pricing.
Über das Feld Mobile Layout lässt sich steuern, welche Spalte auf mobilen Endgeräten zuerst erscheint. Im Standard wandert die linke Spalte nach oben (top). Mit der Option bottom rückt stattdessen die rechte Spalte nach oben. Das ist praktisch, wenn auf Mobile etwa ein Text- oder CTA-Block über dem Bild stehen soll, der Desktop-Aufbau aber gespiegelt bleiben muss.
Cards Container im Two-Column
Der Cards Container kann innerhalb eines Two-Column Containers eingesetzt werden. Damit lassen sich Accordion- oder FAQ-Inhalte als visuell abgesetzte Karten direkt neben erklärenden Texten oder Bildern kombinieren.
Module kombinieren
Hier steht ein Intro-Modul in der linken Spalte neben einem Accordion rechts. So lassen sich erklärende Texte direkt neben interaktiven Inhalten platzieren.
Layout
Der Two-Column Container unterstützt Frame Classes (Ruler Before/After, Indent, 33/66% und 66/33% Aufteilung) und Space Before/After (Extra Small bis Extra Large) für feine Abstandssteuerung zwischen Sektionen.
Über die Frame Classes Indent 33/66% und Indent 66/33% lässt sich die Gewichtung der Spalten anpassen. Standard ist 50/50. So kann z.B. ein Column Image mehr Platz bekommen als der Text daneben.
Das Feld Mobile Layout steuert, welche der beiden Spalten auf mobilen Endgeräten zuerst erscheint. Im Standard (top) wandert die linke Spalte nach oben, die rechte folgt darunter.
Mit der Option bottom wird die Reihenfolge umgedreht: Die rechte Spalte rutscht auf Mobile nach oben, die linke folgt. Praktisch, wenn auf kleinen Bildschirmen ein Text- oder CTA-Block über dem Bild stehen soll. Der Desktop-Aufbau (links/rechts) bleibt davon unberührt.
Ab dem lg-Breakpoint (Desktop) hat das Feld keine Auswirkung; dann gilt immer die Reihenfolge links/rechts.
Kombinationen
Ja, z.B. Cards Container im Two-Column. Maximal 3 Ebenen empfohlen.
Column Image + Text ist der häufigste Einsatz: ein großes Bild neben erklärendem Text, als Ersatz-Hero.
Overview kombiniert mit Two-Columns-Modul
Durch Kombination bestimmter zugelassener Module können leicht Modul-Variationen gebaut werden ohne die Shared Codebase unnötig aufzublähen.
Tailwind CSS 4
Native CSS Layers, schnellere Build-Zeiten.
Expandable Container
Teilt Inhalte in einen sichtbaren und einen aufklappbaren Bereich. Per Klick auf den Button wird der versteckte Inhalt ein- und ausgeklappt. Ideal um lange Seiten kompakter zu halten.
Event Modules
Das Event-System ist das umfangreichste Modul-Set in corekit. Zwei Display Types (Bento und Grid), Filter nach Kategorie und Standort, ein Featured-Modul für Highlights und redaktionelle Detailseiten mit Event Selected Detail.
20 Events weltweit, 4 Hauptkategorien mit Subkategorien und ein FAQ mit 13 Fragen. Die interaktive Location Map mit Google Maps ist inzwischen ein eigenständiges Modul und hat einen eigenes Modul.
Häufige Fragen zu Containers & Layout
Alle Container unterstützen Layout (Default, Layout 1–3), Frame Class (Ruler Before/After, Indent, None) und Space Before/After (Extra Small bis Extra Large) für feine Abstandssteuerung.
Technisch ja, aber es wird nicht empfohlen. Ein Two-Column innerhalb eines Two-Column führt zu sehr schmalen Spalten. Besser: Container nur auf der obersten Ebene verwenden und die Kind-Module direkt darin platzieren.
Der Two-Column Container stapelt die Spalten auf Mobile untereinander. Der Cards Container wechselt zu einer einzelnen Spalte. Der Expandable Container funktioniert auf allen Viewports gleich. Der Button bleibt immer sichtbar.
Ein reines Bild-Helper-Modul das ausschließlich im Two-Column Container eingesetzt wird. Es zeigt ein einzelnes Bild ohne Headline, Text oder Intro. In Kombination mit einem Text-, Overview- oder Intro-Modul in der anderen Spalte entsteht ein flexibler Ersatz-Hero, großflächiges Bild neben Inhalt. Nicht als Standalone auf der Seite verwendbar.
Der Two-Column Container erlaubt gezielt ausgewählte Module: Intro, Text, Partner List, Accordion, Two-Column (verschachtelt), Overview (Tabs) und Column Image. Nicht alle Module sind erlaubt. Die Auswahl ist bewusst eingeschränkt, damit die Darstellung in zwei Spalten sauber funktioniert.
Der Cards Container und Expandable Container nehmen grundsätzlich alle Module als Kinder auf.
Two-Column teilt in zwei Spalten (links/rechts) für flexible Modul-Kombinationen. Cards Container ist ein Wrapper für Accordions. Er steckt sie in eine Card mit Shadow und erzeugt so eine optische Abgrenzung. Mehrere Accordions im Cards Container werden sauber voneinander getrennt dargestellt. Expandable Container hat einen sichtbaren und einen aufklappbaren Bereich mit konfigurierbarem Button.
Ja. Der Button Label ist frei konfigurierbar, z.B. „Mehr anzeigen“, „Weitere Details“, „Alles anzeigen“ oder jeder andere Text. Der Button wechselt automatisch zwischen Auf- und Zuklappen.
Alle Module können im sichtbaren und aufklappbaren Bereich platziert werden. Trotzdem sollte man mit Sinn und Verstand kombinieren: Ein Hero im Expandable Container ergibt wenig Sinn, aber ein längerer Text, eine Partner-Liste oder zusätzliche Features eignen sich ideal für den aufklappbaren Bereich.
Container schaffen mehr Kreation und Vielfalt auf der Seite, ohne dass neue Module entwickelt werden müssen. Durch die flexible Kombination vorhandener Module in verschiedenen Layouts, nebeneinander, als Karten oder mit aufklappbarem Bereich, entstehen individuelle Seitenlayouts, die weit über die Standard-Darstellung hinausgehen. Ein Column Image neben einem Text-Modul wird zum Ersatz-Hero, ein Accordion im Cards Container bekommt einen visuellen Kartenrahmen, ein Pricing neben einem Intro erhält Kontext. Die Container sind das Werkzeug, um aus wenigen Bausteinen viele verschiedene Seitenlayouts zu bauen.