Prose
Prose applies article-style typography (headings, paragraphs, lists, links, code, blockquotes) to everything inside it, scoped to the subtree and themed via CSS vars. Wrap rendered rich text — including the editor’s Reader output — in Prose instead of importing a global prose stylesheet.
The Art of Typography
Good typography is invisible. It guides the reader without calling attention to itself. Learn more at the type foundry.
Principles
- Establish a clear hierarchy
- Keep line length readable
Whitespace is not empty space.
Inline code stays legible inside body copy.
The Art of Typography
Good typography is invisible. It guides the reader without calling attention to itself. Learn more at the type foundry.
Principles
- Establish a clear hierarchy
- Keep line length readable
Whitespace is not empty space.
Inline code stays legible inside body copy.
// apps/docs/src/components/examples/prose/default/react.tsx
import { Prose } from '@cloudvoyant/helical-react';
export default function ReactProseDefault() {
return (
<Prose>
<h1>The Art of Typography</h1>
<p>
Good typography is <strong>invisible</strong>. It guides the reader without calling attention to itself. Learn
more at <a href="https://example.com">the type foundry</a>.
</p>
<h2>Principles</h2>
<ul>
<li>Establish a clear hierarchy</li>
<li>Keep line length readable</li>
</ul>
<blockquote>Whitespace is not empty space.</blockquote>
<p>
Inline <code>code</code> stays legible inside body copy.
</p>
</Prose>
);
}<!-- apps/docs/src/components/examples/prose/default/svelte.svelte -->
<script lang="ts">
import { Prose } from '@cloudvoyant/helical-svelte';
</script>
<Prose>
<h1>The Art of Typography</h1>
<p>
Good typography is <strong>invisible</strong>. It guides the reader without
calling attention to itself. Learn more at
<a href="https://example.com">the type foundry</a>.
</p>
<h2>Principles</h2>
<ul>
<li>Establish a clear hierarchy</li>
<li>Keep line length readable</li>
</ul>
<blockquote>Whitespace is not empty space.</blockquote>
<p>Inline <code>code</code> stays legible inside body copy.</p>
</Prose>Sizes
Sizes
Size: sm
The quick brown fox jumps over the lazy dog.
Size: base
The quick brown fox jumps over the lazy dog.
Size: lg
The quick brown fox jumps over the lazy dog.
Size: sm
The quick brown fox jumps over the lazy dog.
Size: base
The quick brown fox jumps over the lazy dog.
Size: lg
The quick brown fox jumps over the lazy dog.
// apps/docs/src/components/examples/prose/sizes/react.tsx
import { Prose } from '@cloudvoyant/helical-react';
export default function ReactProseSizes() {
return (
<div className="flex flex-col gap-6">
{(['sm', 'base', 'lg'] as const).map((size) => (
<Prose key={size} size={size}>
<h2>Size: {size}</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
</Prose>
))}
</div>
);
}<!-- apps/docs/src/components/examples/prose/sizes/svelte.svelte -->
<script lang="ts">
import { Prose } from '@cloudvoyant/helical-svelte';
const sizes = ['sm', 'base', 'lg'] as const;
</script>
<div class="flex flex-col gap-6">
{#each sizes as size}
<Prose {size}>
<h2>Size: {size}</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
</Prose>
{/each}
</div>API Reference
Prose — size (sm | base | lg, default base); React also takes as (element tag, default div), Svelte takes element. Forwards className/class.