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 Components-Ü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
Unbegrenzt. In der Praxis sind 5–10 Elemente ideal für eine übersichtliche Darstellung.
Ja. Der Cards Container wurde speziell als Wrapper für Accordions konzipiert. Er gibt dem Accordion einen Karten-Rahmen mit Shadow.
Ja. Jedes Accordion-Element unterstützt den vollen Richtext-Editor mit Formatierungen, Listen, Links und Tabellen.
Für FAQs, Anleitungen, rechtliche Hinweise oder jeden Inhalt der Platz sparen soll. Die Seite bleibt kompakt, Details sind nur einen Klick entfernt.
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: ein 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.
Häufige Fragen zu Content Basics & Eyecatcher
Richtext, Intro und Accordion sind im Two-Column Container erlaubt. Das Accordion kann zusätzlich in den Cards Container gesteckt werden für einen Karten-Rahmen mit Shadow. Text/Image, Topic List und Eyecatcher / CTA Section werden nur standalone auf der Seite verwendet.
Der Eyecatcher (auch CTA Section) ist ein ganzflächiges Hinweis-Banner das visuell aus dem Content-Flow herausfällt. Einsatzbeispiele: Ankündigungen, Event-Hinweise, Aktionen oder wichtige Updates. Er unterstützt Richtext und optionale CTAs.
Die Topic List organisiert Inhalte in Topic Collections (benannte Gruppen) mit einzelnen Topics (Einträgen) darunter. Jede Collection hat einen Titel, jedes Topic einen Titel. Das Modul bringt ein integriertes Intro mit. Ideal für Leistungsübersichten, Technologie-Stacks oder strukturierte Listen.
Initially open first element: das erste Element ist beim Laden geöffnet. Allow multiple open elements: mehrere Elemente können gleichzeitig offen sein. Dazu ein integriertes Intro mit Headline, Subline, Richtext und Alignment.
Das Intro eignet sich als Sektions-Einstieg: zentriert oder linksbündig, mit Subline und CTAs. Viele Module bringen ein identisches Intro bereits integriert mit. Dann braucht man kein separates Intro-Modul davor. Richtext ist für längere Fließtexte, Anleitungen oder redaktionelle Inhalte gedacht.
Richtext zeigt reinen Text mit Headline und Subline. Text/Image ergänzt das um ein Bild im Split-Layout mit vier Layout-Optionen (Bildposition Mobile/Desktop). Text/Image hat zusätzlich Intro Alignment und optionale CTAs.
Ein CTA oder Link wird zum Download, wenn das download-Attribut gesetzt ist. Der Proxy unter /api/download lädt die Datei serverseitig und liefert sie mit korrektem Content-Disposition Header aus. Der DownloadButton zeigt einen Loading-Spinner während des Downloads, der DownloadLink bleibt visuell unverändert. Beide zeigen Toast-Notifications bei Erfolg oder Fehler. Auf iOS Safari wird die Datei im neuen Tab geöffnet.