Version: latest

Server-Komponente

Teaser wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/teaser) — die Library erkennt die Umgebung automatisch.

Teaser

Teaser ist die primäre Marketing-Karten-Komponente. Sie kombiniert Bild, Kategorien-Label, Überschrift, Beschreibungstext und Call-to-Action-Link in einer einzigen, flexibel kombinierbaren Einheit. Wird häufig in Landingpages und Section-Grids verwendet.

Übersicht

import { Teaser } from "@prokodo/ui/teaser"
;<Teaser
  headline="Build faster with prokodo UI"
  body="A fully typed component library built for Next.js App Router."
  image={{ src: "/teaser.jpg", alt: "prokodo UI" }}
  cta={{ label: "Get started", href: "/docs/intro" }}
  category="Library"
/>

Live PreviewOpen in Storybook ↗

Import

import { Teaser } from "@prokodo/ui/teaser"

CSS:

import "@prokodo/ui/teaser.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`title`	`TeaserHeadline`	—	✅	Headline-Konfiguration: `{ content: string } & HeadlineProps`.
`content`	`string`	—	—	Textkörper.
`image`	`ImageProps`	—	—	Teaser-Bild-Props.
`color`	`TeaserVariant`	—	—	Akzentfarbe.
`align`	`"left" \| "center" \| "right"`	`"left"`	—	Textausrichtung.
`lineClamp`	`boolean`	`false`	—	Textkörper auf feste Zeilenanzahl begrenzen.
`animation`	`string`	—	—	Animations-Name/-Klassen-Override.
`redirect`	`TeaserRedirect`	—	—	Link-Konfiguration: `LinkProps & { label?: string; icon?: IconProps }`.
`onClick`	`() => void`	—	—	Klick-Handler des Teasers.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/teaser/Teaser.model.ts für den vollständigen TeaserProps-Typ.

Design-Tokens

Teaser definiert keine komponentenspezifischen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:

Token	Beschreibung
`--pk-space-xs`	Rechter Abstand des Link-Icons
`--pk-space-sm`	Padding und Versatz der Bildunterschrift
`--pk-space-lg`	Content-Padding der Karte

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	🔍 Manuell prüfen	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.3	Kontrast (Minimum) (AA)	🔍 Manuell prüfen	Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich.
2.4.6	Überschriften und Bezeichnungen (AA)	🔍 Manuell prüfen	Überschriften und Labels müssen das Thema oder den Zweck des zugehörigen Inhalts beschreiben.
4.1.2	Name, Rolle, Wert (A)	🔍 Manuell prüfen	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 1 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Teaser in Storybook öffnen

Quellcode

src/components/teaser/Teaser.model.ts