Rich Text Component — Feature Showcase

Welcome to the Rich Text playground! Everything you see below is rendered by one component. Each example demonstrates a specific capability or edge‑case the component handles in production.

Inline Typography

This sentence shows bold, italic, underlined, ~~strikethrough~~, and inline code styles.

You can also combine sub‑ and super‑script values like H₂O or E = mc².

Text Alignment

Centered text

Right Aligned text

The Rich Text component supports justified alignment with full typographic integrity—preserving kerning, managing spacing, and adapting cleanly across all screen sizes. As you resize the window, notice how the line breaks and word spacing are recalculated to maintain the evenness of both left and right margins without introducing awkward whitespace or layout shifts.

Headings

Below are all six HTML heading levels, styled by our design tokens and generated from the same underlying headingnode:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

Unordered

Item One
Item Two
Item Three

Ordered (with deep nesting)

First
Second
1. Nested
  1. Deeper
Third

Task List with Checkboxes:

Task One
Task Two (completed)
Task Three

Blockquote

“Typography is the craft of endowing human language with a durable visual form.” — Robert Bringhurst

Code Block

export function helloWorld() {
  console.log('👋  Hello from the Rich Text demo!')
}

Horizontal Rule

Links

Internal content

Open the Rich Text component page

Link to deleted document: Link To Delete Document

Internal redirects (prefetch‑safe)

For any link whose linkType is custom and uses a relative path, the component assumes you’re linking to a redirect. In that case it deliberately renders a plain <a> element so Next.js won’t prefetch the eventual destination.

Regex redirect ^/test-.*(asd)$ → Click Here
Static redirect /test-redirect → Click Here

External (new tab)

OpenAI {target="_blank" rel="noopener"}

Auto‑linked URL (same tab)

https://google.com

Images

Responsive Classes

I’m big only on tablet and up.

I’m big only on desktop.

Only this word is larger.

Indentation

Indented texts example:

Level 1

Level 2

Level 3

Rich Text Component — Feature Showcase