Works everywhere

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

RichText

RichText renders sanitised HTML or Portable Text / structured content from a CMS. Applies prokodo typography styles to all child elements (<h2>–<h6>, <p>, <a>, <ul>, <ol>, <blockquote>).

Live demo →

---

Overview

import { RichText } from "@prokodo/ui/rich-text"
;<RichText html={article.content} />

Live PreviewOpen in Storybook ↗

---

Import

import { RichText } from "@prokodo/ui/rich-text"

CSS:

import "@prokodo/ui/rich-text.css"

---

Props

Prop	Type	Default	Required	Description
children	ReactNode	—	✅	Rich text content (React nodes).
animated	boolean	false	—	Enable entrance animation.
animationProps	AnimatedProps	—	—	Entrance animation config.
color	Variants	—	—	Accent color for links and headings.
schema	boolean	false	—	Emit JSON-LD schema markup.
itemProp	string	—	—	Schema.org itemprop attribute.
linkComponent	ComponentType	—	—	Custom link component for internal links.
linkPolicy	string	—	—	Policy applied to link rendering.
overrideParagraph	boolean	false	—	Replace <p> elements with custom rendering.
className	string	—	—	CSS class on root element.

See src/components/rich-text/RichText.model.ts for the full RichTextProps type.

---

Design Tokens

RichText 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-color-brand	Link color and ordered list marker fill
--pk-color-muted	Paragraph and code text color
--pk-color-fg	List item text color
--pk-color-border	Code block and blockquote border color
--pk-color-surface-raised	Code block and blockquote background
--pk-space-lg	Blockquote horizontal padding
--pk-space-sm	List icon right margin
--pk-space-xs	List item bottom gap
--pk-radius-sm	Code block corner radius
--pk-radius-md	Inline image corner radius
--pk-palette-white	Ordered list marker text color

---

AIC Note

Use the standard import path in application code:

import { RichText } from "@prokodo/ui/rich-text"

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

Storybook

👉 Open RichText in Storybook

---

Source

src/components/rich-text/RichText.model.ts