Containers & Layout
Three layout containers for flexible page layouts and an image module for large-scale images. Containers accept selected modules as children and control their arrangement: side by side, as cards or with an expandable area. This opens up additional flexibility and enables entirely new module combinations and layouts.
Two-Column Container
The Two-Column Container is a flexible way to combine existing modules and create more creativity and variety on the page. Two columns (left/right) can be filled with selected modules: Intro, Text, Partner List, Accordion, Two-Column (nested), Overview (Tabs), Column Image and Pricing.
The Mobile Layout setting controls which column appears first on mobile devices. By default, the left column moves to the top (top). With the bottom option, the right column moves up instead, which is useful when a text or CTA block should sit above the image on small screens while the desktop arrangement (left/right) remains mirrored.
Cards Container in Two-Column
The Cards Container can be embedded inside a Two-Column container. This allows accordion or FAQ content to be presented as visually separated cards right next to explanatory text or imagery.
Combining Modules
An Intro Module is placed in the left column next to an Accordion on the right. This allows explanatory texts to be placed directly next to interactive content.
Layout
The Two-Column Container supports frame classes (Ruler Before/After, Indent, 33/66% and 66/33% split) and Space Before/After (Extra Small to Extra Large) for fine-grained spacing control between sections.
Via the frame classes Indent 33/66% and Indent 66/33% the weighting of the columns can be adjusted. The default is 50/50. This allows, for example, a column image to get more space than the text beside it.
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.
Combinations
Yes, e.g. Cards Container inside a Two-Column. A maximum of 3 levels is recommended.
Column Image + Text is the most common use: a large image next to explanatory text, as a replacement hero.
Overview Combined with Two-Column Module
By combining certain permitted modules, module variations can be easily built without unnecessarily bloating the shared codebase.
Tailwind CSS 4
Native CSS layers, faster build times.
Expandable Container
Splits content into a visible and an expandable section. A click on the button expands and collapses the hidden content. Ideal for keeping long pages more compact.
Event Modules
The event system is the most comprehensive module set in corekit. Two display types (Bento and Grid), filtering by category and location, a featured module for highlights and editorial detail pages with Event Selected Detail.
20 events worldwide, 4 main categories with subcategories and a FAQ with 13 questions. The interactive Location Map with Google Maps is now a standalone module with its own module.
Frequently Asked Questions about Containers & Layout
All containers support Layout (Default, Layout 1–3), Frame Class (Ruler Before/After, Indent, None) and Space Before/After (Extra Small to Extra Large) for fine-grained spacing control.
Technically yes, but it is not recommended. A Two-Column inside a Two-Column leads to very narrow columns. Better: use containers only at the top level and place child modules directly within them.
The Two-Column Container stacks its columns vertically on mobile. The Cards Container switches to a single column. The Expandable Container works the same on all viewports. The button remains always visible.
A pure image helper module used exclusively inside the Two-Column Container. It shows a single image without headline, text or intro. Combined with a text, overview or intro module in the other column it creates a flexible replacement hero, a large image next to content. Not usable as a standalone element on the page.
The Two-Column Container allows a specifically selected set of modules: Intro, Text, Partner List, Accordion, Two-Column (nested), Overview (Tabs) and Column Image. Not all modules are allowed. The selection is deliberately limited so that the display in two columns works cleanly.
The Cards Container and Expandable Container accept all modules as children.
Two-Column splits into two columns (left/right) for flexible module combinations. Cards Container is a wrapper for accordions. It places them in a card with shadow, creating a visual separation. Multiple accordions in a Cards Container are displayed cleanly separated from each other. Expandable Container has a visible and an expandable section with a configurable button.
Yes. The button label is freely configurable, e.g. "Show more", "Further details", "Show all" or any other text. The button automatically toggles between expand and collapse.
All modules can be placed in the visible and expandable sections. That said, combinations should be made with purpose. A hero in the expandable container makes little sense, but a longer text, a partner list or additional features are ideal for the expandable section.
Containers create more creativity and variety on the page without the need to develop new modules. By flexibly combining existing modules in different layouts, side by side, as cards or with an expandable section, individual page layouts emerge that go far beyond standard presentation. A column image next to a text module becomes a replacement hero, an accordion in a cards container gets a visual card frame, a pricing module next to an intro gets context. Containers are the tool to build many different page layouts from just a few building blocks.