Event Module
Bento Box, Grid List, Featured Event und Selected Detail: das umfangreichste Modul-Set in corekit. Zum Event Modul
Modules
Media Cards
Karten-Module mit Bild und Text, als Carousel, Grid oder mit Aufklapp-Details. Drei Module, ein Ziel: Inhalte visuell ansprechend präsentieren.
Components
Image Cards: mit Bildern
Bildkarten mit Titel und Beschreibung (Richtext) im Carousel-Format. Jede Karte zeigt ein quadratisches Bild mit Hover-Zoom-Effekt. Jede Karte kann über ein eigenes Link-Feld als Ganzes verlinkt werden; alternativ lassen sich Links direkt im Richtext setzen, diese haben dann Vorrang.
News Module
News als Carousel mit Kategorien, Detail-Seite und konfigurierbarer Darstellung. Zum News Modul
Quote Module
Einzelzitate und Zitat-Sammlungen als Grid oder Carousel mit Avatar- und Image-Varianten. Zum Quote Modul
Contact Module
Contact Teaser, Detail, List und Author: Kontaktpersonen professionell darstellen. Zum Contact Modul
Media Module
Video Player, Image Gallery und Carousel: drei Module für Medieninhalte. Zum Media Modul
Image Cards: ohne Bilder
Die gleichen Karten ohne gepflegte Bilder. Der Bildbereich entfällt, nur Titel und Beschreibung (Richtext) werden angezeigt. Funktioniert, sieht aber visuell nicht ideal aus. Bilder sollten immer gepflegt werden.
Event Module
Bento Box, Grid List, Featured Event und Selected Detail: das umfangreichste Modul-Set in corekit. Zum Event Modul
News Module
News als Carousel mit Kategorien, Detail-Seite und konfigurierbarer Darstellung. Zum News Modul
Media Module
Video Player, Image Gallery und Carousel: drei Module für Medieninhalte. Zum Media Modul
Quote Module
Einzelzitate und Zitat-Sammlungen als Grid oder Carousel mit Avatar- und Image-Varianten. Zum Quote Modul
Contact Module
Contact Teaser, Detail, List und Author: Kontaktpersonen professionell darstellen. Zum Contact Modul
Karte ohne Bild C
Karte ohne Bild B
Karte ohne Bild A
Grid
Image Cards: Grid-Layout mit Karten-Links
Image Cards lassen sich jetzt auch als Grid darstellen. Statt im Carousel werden alle Karten gleichzeitig in einem zentrierten Raster angezeigt. Das ist ideal, wenn alle Inhalte auf einen Blick sichtbar sein sollen, ohne dass der Nutzer scrollen muss.
Eine unvollständige letzte Reihe wird dabei mittig ausgerichtet statt linksbündig. So bleibt das Raster optisch ausbalanciert, egal wie viele Karten gepflegt sind.
Neu ist außerdem das Karten-Link-Feld: Jede Karte kann als Ganzes verlinkt werden, ein Klick irgendwo auf der Karte führt zum Ziel. Setzt der Redakteur stattdessen einen Link direkt im Richtext, hat dieser Vorrang, das Karten-Link-Feld wird dann ignoriert.
Karten mit Beschreibung und Detail-Text
Card Carousel: mit Bildern
Karten-Slider mit Bild (16:9), Beschreibungstext (Richtext), Detail-Text (Richtext) und Verlinkung pro Karte. Die Karten sind angeschnitten (Peek-Effekt): die nächste Karte ragt rechts ins Bild und signalisiert, dass weitere Inhalte folgen.
Card Carousel: ohne Bilder
Die gleichen Karten ohne gepflegte Bilder. Der Peek-Effekt und alle Carousel-Optionen bleiben erhalten. Beschreibungstext (Richtext), Detail-Text (Richtext) und Link pro Karte werden weiterhin angezeigt.
Visuelle Teaser im Portrait-Format
Portrait Teaser: Carousel
Teaser-Karten mit Portrait-Bild (3:4), Headline, Text (Richtext) und Link im Carousel-Modus. Die Karten sind nicht angeschnitten und passen vollständig in den sichtbaren Bereich.
Carousel-Optionen: Navigation, Dots und Autoplay. Als einziges der drei Module bietet der Portrait Teaser zusätzlich eine Grid-Darstellung.
Visuelle Teaser im Portrait-Format
Portrait Teaser: Grid
Die gleichen Teaser-Karten in der Grid-Darstellung, ein responsives Raster statt Carousel. Mobil eine Spalte, ab Tablet zwei Spalten, ab Desktop vier Spalten nebeneinander.
Alle Inhalte (Portrait-Bild, Headline, Text, Link) bleiben identisch, nur das Layout ändert sich.
FAQ
Häufige Fragen zu Media Cards
Image Cards sind stark visuell: große quadratische Bilder mit kurzem Richtext, optionalem Karten-Link, nicht angeschnitten, wahlweise als Carousel oder Grid. Card Carousel ist das flexibelste Modul: Bild (16:9), Richtext-Beschreibung plus Detail-Text, Link pro Karte, Karten sind angeschnitten (Peek). Portrait Teaser kombiniert Portrait-Bilder (3:4) mit Headline und Text, hat Link pro Karte und bietet, wie Image Cards, sowohl Carousel- als auch Grid-Darstellung. Alle drei Module bringen ein eigenes Intro mit Headline, Subline, Introtext (Richtext) und CTAs mit.
Teaser-Karten mit Portrait-Bild (3:4), Title (Kicker), Headline, Copytext (Richtext) und Link. Zwei Display-Varianten: Carousel oder Grid. Im Carousel sind die Karten nicht angeschnitten. Carousel-Optionen: Navigation, Dots und Autoplay. Bilder sollten immer gepflegt werden.
Ein Karten-Slider mit Bild (optional), Titel, Beschreibungstext (Richtext), Detail-Beschreibung (Richtext) und Link pro Karte. Die Karten sind angeschnitten (Peek-Effekt). Die nächste Karte ragt rechts ins Bild. Es gibt nur den Carousel-Modus, keine Grid-Variante. Carousel-Optionen: Navigation, Dots und Autoplay.
Bildkarten mit quadratischem Bild, Titel und Richtext-Beschreibung. Darstellung wahlweise als Carousel oder als Grid. Karten sind nicht angeschnitten (kein Peek-Effekt), Bilder haben einen Hover-Zoom-Effekt.
Jede Karte kann über ein eigenes Link-Feld als Ganzes verlinkt werden. Setzt der Redakteur stattdessen einen Link direkt im Richtext, hat dieser Vorrang. Das Karten-Link-Feld wird dann ignoriert. Carousel-Optionen: Navigation, Dots und Autoplay.
Technisch ja. Alle drei Module rendern auch ohne gepflegte Bilder. Die Karten zeigen dann nur die Text-Inhalte. Aber: Die Module sind für die Darstellung mit Bildern konzipiert. Ohne Bilder geht der visuelle Charakter verloren und das Ergebnis sieht unfertig aus. Bilder sollten daher immer gepflegt werden. Besonders beim Portrait Teaser fällt ein fehlendes Bild auf: Dort wird ein grauer Platzhalter angezeigt, der deutlich unfertig wirkt. Einträge ohne Bild sollten hier vermieden werden.
Bildformate: Image Cards nutzen quadratische Bilder mit Zoom-Effekt. Card Carousel zeigt Bilder im 16:9-Format (aspect-video). Portrait Teaser verwendet 3:4-Portrait-Bilder mit Art-Direction-Support.
Image Cards: Zwei Display-Modi: Carousel oder Grid. Karten sind nicht angeschnitten. Sie passen vollständig in den sichtbaren Bereich. Im Grid wird eine unvollständige letzte Reihe mittig ausgerichtet. Optionen: Navigation, Dots, Autoplay.
Card Carousel: Immer Carousel, keine Grid-Variante. Karten sind angeschnitten (Peek-Effekt). Die nächste Karte ragt rechts ins Bild und signalisiert, dass weitere Inhalte folgen. Optionen: Navigation, Dots, Autoplay.
Portrait Teaser: Zwei Display-Modi: Carousel oder Grid. Im Carousel sind die Karten nicht angeschnitten. Im Grid werden die Karten in einem responsiven Raster dargestellt (1 Spalte mobil, 2 Spalten Tablet, 4 Spalten Desktop). Carousel-Optionen: Navigation, Dots, Autoplay.
Was bedeutet angeschnitten? Bei angeschnittenen Carousels ragt die nächste Karte am rechten Rand teilweise ins Bild. Das zeigt dem Nutzer visuell, dass er weiterscrollen kann. Module ohne Anschnitt zeigen nur vollständige Karten im sichtbaren Bereich.
Ja. Jede Image Card hat ein eigenes Link-Feld. Damit wird die gesamte Karte klickbar, nicht nur ein Wort im Text. Ein Klick irgendwo auf der Karte führt zum hinterlegten Ziel (interne Seite, externe URL oder Datei).
Wichtige Vorrang-Regel: Setzt der Redakteur einen Link direkt im Richtext der Beschreibung, hat dieser Inline-Link Vorrang. Das Karten-Link-Feld wird dann ignoriert, damit keine verschachtelten Links entstehen. Pro Karte sollte daher entweder das Link-Feld oder ein Richtext-Link genutzt werden. Die Entscheidung liegt in der Verantwortung des Redakteurs.