Rich Text Component — Feature Showcaseeeeeeee!!!!
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 showsbold,italic,underlined,strikethrough, andinline codestyles.
You can also combine sub‑ and super‑script values like H2O or E = mc2.
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 underlyingheadingnode:
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
- Nested
- Deeper
- Nested
- Third
Task List with Checkboxes:
Blockquote
“Typography is the craft of endowing human language with a durable visual form.” — Robert Bringhurst
Links
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)
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