Works everywhere

PostWidgetCarousel works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/post-widget-carousel) — the library detects the runtime automatically.

PostWidgetCarousel

PostWidgetCarousel renders a horizontally scrollable strip of post cards — the carousel variant of PostWidget. Suitable for "more articles" sections between page content.

Live demo →

---

Overview

import { PostWidgetCarousel } from "@prokodo/ui/post-widget-carousel"
;<PostWidgetCarousel title="You might also like" posts={relatedPosts} />

Live PreviewOpen in Storybook ↗

---

Import

import { PostWidgetCarousel } from "@prokodo/ui/post-widget-carousel"

CSS:

import "@prokodo/ui/post-widget-carousel.css"

---

Props

Prop	Type	Default	Required	Description
items	PostWidgetCarouselItem[]	—	—	Array of carousel items.
title	PostWidgetCarouselHeadline	—	—	Section heading: { content: string } & HeadlineProps.
autoplay	number	—	—	Autoplay interval in ms (0 or undefined disables autoplay).
color	Variants	—	—	Accent color (extends CardProps).
structuredData	boolean	false	—	Emit JSON-LD structured data.
className	string	—	—	CSS class on root element.

See src/components/post-widget-carousel/PostWidgetCarousel.model.ts for the full PostWidgetCarouselProps type.

---

Color

The color prop propagates a shared accent through every visual layer of the carousel:

Value	Card border / shadow	Title headline	Item headlines	Nav buttons
"primary"	Brand blue (30 % tint border + glow)	Brand blue	Brand blue	Primary
"secondary"	Accent cyan (30 % tint border + glow)	Accent cyan	Accent cyan	Secondary
"success"	Green indicator	Green	Green	Success
"warning"	Amber indicator	Amber	Amber	Warning
"error"	Red indicator	Red	Red	Error
"info"	Neutral fg tint	Muted	Muted	Info
"white"	Default white card, no shadow	inherit (dark auto-contrast)	inherit	Primary fallback

When no color is passed, headlines fall back to "inherit" and nav buttons default to "primary".

Live PreviewOpen in Storybook ↗

---

Design Tokens

PostWidgetCarousel 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-sm	Navigation button row gap
--pk-space-md	Navigation button row bottom offset
--pk-space-lg	Carousel wrapper bottom padding
--pk-space-xl	Top margin for the carousel area
--pk-radius-md	Slide image corner radius

---

AIC Note

Use the standard import path in application code:

import { PostWidgetCarousel } from "@prokodo/ui/post-widget-carousel"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

---

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.
2.1.1	Keyboard (A)	🔍 Manual review	All functionality must be operable via keyboard alone, without requiring specific timing.
2.2.2	Pause, Stop, Hide (A)	🔍 Manual review	Animations or auto-rotating content lasting more than 5 s must provide a pause/stop control.
2.4.3	Focus Order (A)	🔍 Manual review	The keyboard focus sequence must preserve meaning and operability in the complete page integration context.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

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

Storybook

👉 Open PostWidgetCarousel in Storybook

---

Source

src/components/post-widget-carousel/PostWidgetCarousel.model.ts