Content Basics & Eyecatcher
Die Basis-Bausteine für jeden Webauftritt: Richtext und Text/Image für Fließtexte, das Intro für Sektions-Einstiege, Accordion für aufklappbare Inhalte, Topic List für strukturierte Themenlisten und der Eyecatcher / CTA Section als visuelles Hinweis-Banner zwischen Modulen.
Richtext
Das Richtext Module ist der vielseitigste Textbaustein — ideal für lange, textlastige Seiten wie Blog-Beiträge, Event-Beschreibungen, Impressum oder Datenschutzerklärungen. Es bietet einen vollständigen Richtext-Editor mit Formatierungen, Listen, Links, Tabellen und Blockquotes. Lässt sich ideal mit der Image Gallery und dem Contact Author Module kombinieren — z.B. Text, Bildergalerie und Autorenangabe als typisches Blog-Layout.
Hier ein Beispiel für verschiedene Elemente im Richtext:
- Aufzählungspunkt eins
- Aufzählungspunkt zwei
- Aufzählungspunkt drei
Ein Blockquote im Richtext — für Hervorhebungen und Zitate ohne eigenes Modul.
Button & Link Klassen
Alle verfügbaren CTA-Styles im Überblick:
Intro Module
Das Intro Module ist der Einstieg für jede Sektion: Headline (h1–h4), Subline, Richtext und optionale CTAs mit frei wählbarer Button-Klasse. Die Intro Alignment steuert ob der Text links oder zentriert steht. Viele andere Module (Features, Pricing, Topic List etc.) bringen ein identisches Intro bereits integriert mit.
Text/Image — Bild rechts
Das Text/Image Module kombiniert Richtext mit einem Bild im Split-Layout. Vier Layout-Optionen steuern die Bild-Position: top-left, top-right, bottom-left, bottom-right (erste Angabe Mobile, zweite Desktop). Dazu Headline (h1–h4), Subline, Intro Alignment (links/center) und optionale CTAs mit frei wählbarer Button-Klasse. Hier: Bild oben auf Mobile, rechts auf Desktop.
Text/Image — Bild links
Gleicher Modultyp mit Layout top-left: Bild oben auf Mobile, links auf Desktop. Das Bild nutzt Art Direction — je nach Viewport wird ein optimierter Ausschnitt geladen. Ideal für Seiten wie die Showcases-Übersicht, wo Text und visueller Teaser nebeneinander stehen sollen.
Accordion
Das Accordion Module zeigt Inhalte in aufklappbaren Bereichen. Optionen: Initially open first element und Allow multiple open elements. Bringt ein integriertes Intro mit Headline, Subline, Richtext und Alignment. Jedes Element hat einen Titel und Richtext-Inhalt.
Accordion — Beispiel
Topic List
Die Topic List organisiert Inhalte in benannte Gruppen (Topic Collections) mit einzelnen Themen-Einträgen. Ideal für Leistungsübersichten, Skill-Listen oder strukturierte Inhaltsverzeichnisse. Bringt ein integriertes Intro mit.
Backend
- Zod Schemas
- REST API
- PHP
- TYPO3 CMS
Frontend
- Storybook
- TypeScript
- Tailwind CSS 4
- React & Next.js
So sieht der Eyecatcher aus — ganzflächiges Banner mit Richtext und CTAs zwischen anderen Modulen.
Download
CoreKit bietet ein Download-System mit Proxy-Route, Loading-State und Toast-Benachrichtigungen. Ein Link wird automatisch zum Download, wenn das download-Attribut gesetzt ist. Der Proxy unter /api/download sorgt dafür, dass auch Cross-Origin-Dateien korrekt heruntergeladen werden. Zwei Varianten: DownloadButton mit Loading-Spinner während des Downloads und DownloadLink ohne visuellen Loading-State für Ghost- und Link-Varianten.