Content Basics & Eyecatcher
The basic building blocks for every web presence: Richtext and Text/Image for body text, the Intro for section entries, Accordion for expandable content, Topic List for structured topic lists and the Eyecatcher / CTA Section as a visual callout banner between modules.
Richtext
The Richtext Module is the most versatile text building block, ideal for long, text-heavy pages such as blog posts, event descriptions, legal notices or privacy policies. It offers a full richtext editor with formatting, lists, links, tables and blockquotes. Combines perfectly with the Image Gallery and Contact Author Module, e.g. text, image gallery and author details as a typical blog layout.
Here is an example of various elements in richtext:
- List item one
- List item two
- List item three
A blockquote in richtext, for highlights and quotes without a dedicated module.
Button & Link Classes
Overview of all available CTA styles:
Intro Module
The Intro Module is the opener for every section: headline (h1–h4), subline, richtext and optional CTAs with a freely selectable button class. The Intro Alignment controls whether the text is left-aligned or centred. Many other modules (Features, Pricing, Topic List etc.) already include an identical integrated intro.
Text/Image: Image Right
The Text/Image Module combines richtext with an image in a split layout. Four layout options control the image position: top-left, top-right, bottom-left, bottom-right (first value mobile, second desktop). Also headline (h1–h4), subline, intro alignment (left/centre) and optional CTAs with a freely selectable button class. Here: image on top on mobile, right on desktop.
Text/Image: Image Left
Same module type with layout top-left: image on top on mobile, left on desktop. The image uses Art Direction: an optimised crop is loaded depending on the viewport. Ideal for pages like the Modules overview, where text and visual teaser should sit side by side.
Accordion
The Accordion Module displays content in expandable sections. Options: Initially open first element and Allow multiple open elements. Includes an integrated intro with headline, subline, richtext and alignment. Each element has a title and richtext content.
Accordion: Example
Unlimited. In practice 5–10 elements are ideal for a clear presentation.
Yes. The Cards Container was specifically designed as a wrapper for accordions. It gives the accordion a card frame with shadow.
Yes. Every accordion element supports the full richtext editor with formatting, lists, links and tables.
For FAQs, guides, legal notices or any content that should save space. The page stays compact, details are just one click away.
Topic List
The Topic List organises content into named groups (Topic Collections) with individual topic entries. Ideal for service overviews, skill lists or structured tables of contents. Includes an integrated intro.
Backend
- Zod Schemas
- REST API
- PHP
- TYPO3 CMS
Frontend
- Storybook
- TypeScript
- Tailwind CSS 4
- React & Next.js
This is how the Eyecatcher looks, a full-width banner with richtext and CTAs between other modules.
Download
Corekit provides a download system with proxy route, loading state and toast notifications. A link automatically becomes a download when the download attribute is set. The proxy at /api/download ensures that cross-origin files are also downloaded correctly. Two variants: DownloadButton with loading spinner during download and DownloadLink without visual loading state for ghost and link variants.
Frequently Asked Questions about Content Basics & Eyecatcher
Richtext, Intro and Accordion are allowed in the Two-Column Container. The Accordion can additionally be placed in the Cards Container for a card frame with shadow. Text/Image, Topic List and Eyecatcher / CTA Section are used standalone on the page only.
The Eyecatcher (also CTA Section) is a full-width announcement banner that visually stands out from the content flow. Use cases: announcements, event notices, campaigns or important updates. It supports richtext and optional CTAs.
The Topic List organises content into topic collections (named groups) with individual topics (entries) beneath them. Each collection has a title, each topic has a title. The module includes an integrated intro. Ideal for service overviews, technology stacks or structured lists.
Initially open first element: the first element is open on load. Allow multiple open elements: multiple elements can be open at the same time. Plus an integrated intro with headline, subline, richtext and alignment.
The Intro is suitable as a section opener: centred or left-aligned, with subline and CTAs. Many modules already include an identical integrated intro. In that case no separate intro module is needed in front of them. Richtext is intended for longer body texts, instructions or editorial content.
Richtext displays plain text with headline and subline. Text/Image adds an image in a split layout with four layout options (image position mobile/desktop). Text/Image additionally has intro alignment and optional CTAs.
A CTA or link becomes a download when the download attribute is set. The proxy at /api/download loads the file server-side and delivers it with the correct Content-Disposition header. The DownloadButton shows a loading spinner during download, the DownloadLink remains visually unchanged. Both show toast notifications on success or error. On iOS Safari the file is opened in a new tab.