Version: latest

Works everywhere

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

PostWidget

PostWidget renders a compact sidebar panel listing recent or related posts. Each entry shows a thumbnail, title, and date.

Live demo →

Overview

import { PostWidget } from "@prokodo/ui/post-widget"
;<PostWidget title="Recent posts" posts={latestPosts} />

Live PreviewOpen in Storybook ↗

Import

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

CSS:

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

Props

Prop	Type	Default	Required	Description
`items`	`PostWidgetItem[]`	—	—	Array of post items.
`title`	`PostWidgetHeadline`	—	—	Widget heading: `{ content: string } & HeadlineProps`.
`fullWidth`	`boolean`	`false`	—	Stretch card to full container width.
`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/PostWidget.model.ts for the full PostWidgetProps type.

Color

The color prop colors the entire widget with a shared accent from the design-system palette:

Value	Card border / shadow	Widget title	Item headlines
`"primary"`	Brand blue (30 % tint border + glow)	Brand blue	Brand blue
`"secondary"`	Accent cyan (30 % tint border + glow)	Accent cyan	Accent cyan
`"success"`	Green indicator	Green	Green
`"warning"`	Amber indicator	Amber	Amber
`"error"`	Red indicator	Red	Red
`"info"`	Neutral fg tint	Muted	Muted
`"white"`	Default white card, no shadow	`inherit` (dark auto-contrast)	`inherit`

When no color is passed, both the widget title and item headlines fall back to "inherit" (default text color), keeping a neutral appearance.

Live PreviewOpen in Storybook ↗

Design Tokens

PostWidget 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-lg`	List item top spacing and column gap
`--pk-space-md`	Thumbnail right margin
`--pk-color-muted`	Date text colour
`--pk-radius-md`	Thumbnail image corner radius

AIC Note

Use the standard import path in application code:

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

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.
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)	✅ Fulfilled	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 4 test file(s) · 3 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open PostWidget in Storybook

Source

src/components/post-widget/PostWidget.model.ts