Version: latest

Server Component

Teaser is best rendered on the server. Use the standard import (e.g. @prokodo/ui/teaser) — the library detects the runtime automatically.

Teaser

Teaser is the primary marketing card component. It combines an image, category label, headline, body copy, and a call-to-action link into a single, composable unit. Used extensively in landing pages and section grids.

Live demo →

Overview

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	Type	Default	Required	Description
`title`	`TeaserHeadline`	—	✅	Headline config: `{ content: string } & HeadlineProps`.
`content`	`string`	—	—	Body copy text.
`image`	`ImageProps`	—	—	Teaser image props.
`color`	`TeaserVariant`	—	—	Accent color variant.
`align`	`"left" \| "center" \| "right"`	`"left"`	—	Text alignment.
`lineClamp`	`boolean`	`false`	—	Clamp body text to a fixed number of lines.
`animation`	`string`	—	—	Animation name/class override.
`redirect`	`TeaserRedirect`	—	—	Link config: `LinkProps & { label?: string; icon?: IconProps }`.
`onClick`	`() => void`	—	—	Click handler on the teaser.
`className`	`string`	—	—	CSS class on root element.

See src/components/teaser/Teaser.model.ts for the full TeaserProps type.

Design Tokens

Teaser does not define component-specific CSS custom properties. Override appearance by customising the following global design-system tokens on :root or a scoped ancestor:

Token	Description
`--pk-space-xs`	Link icon right margin
`--pk-space-sm`	Image caption padding and offset
`--pk-space-lg`	Card content padding

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.3.2	Meaningful Sequence (A)	🔍 Manual review	Content reading order in the DOM must match the intended visual presentation order.
1.4.3	Contrast (Minimum) (AA)	🔍 Manual review	Text must have a contrast ratio of at least 4.5:1 (3:1 for large text). Verify against the final product theme.
2.4.6	Headings and Labels (AA)	🔍 Manual review	Headings and labels must describe the topic or purpose of their associated content.
4.1.2	Name, Role, Value (A)	🔍 Manual review	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 2 jest-axe assertion(s) across 1 test file(s) · 0 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Teaser in Storybook

Source

src/components/teaser/Teaser.model.ts