Data display
Styles for headings, paragraphs, lists, quotes, links and code inside one content wrapper.
| Class name | Type | Description |
|---|---|---|
proseplf:prose | Component | Styles the native content inside |
prose-anchorplf:prose-anchor | Part | Link around a heading's text |
prose-anchor-markplf:prose-anchor-mark | Part | The # shown on hover and focus |
not-proseplf:not-prose | Behavior | Ends the content styles inside it |
prose-mark-primaryplf:prose-mark-primary | Color | Primary highlight on a mark |
prose-mark-secondaryplf:prose-mark-secondary | Color | Secondary highlight on a mark |
prose-mark-successplf:prose-mark-success | Color | Success highlight on a mark |
prose-mark-warningplf:prose-mark-warning | Color | Warning highlight on a mark |
prose-mark-errorplf:prose-mark-error | Color | Error highlight on a mark |
prose-mark-infoplf:prose-mark-info | Color | Info highlight on a mark |
leadplf:lead | Modifier | Larger, muted introductory paragraph |
Wrap content that has no classes, such as a WordPress post, Markdown or CMS text, in prose, and its headings, paragraphs, lists, quotes, links and code get the library’s text styles. Build your own interface with components and utilities instead.
<article class="plf:prose"><?php the_content(); ?></article>Keep paragraphs focused, and use headings to mark a new topic.
Write for the person who needs to understand and act.
Read the text aloud, then check that links describe their destinations.
<article class="prose">
<h2 id="typography-rhythm">Build a useful rhythm</h2>
<p>Keep paragraphs focused, and use <a href="#typography-rhythm">headings</a> to mark a new topic.</p>
<ul>
<li>Keep each paragraph focused on one idea.</li>
<li>Use a list for genuinely parallel information.</li>
<li>Check long content in a narrow container.</li>
</ul>
<blockquote><p>Write for the person who needs to understand and act.</p></blockquote>
<h3>Review before sharing</h3>
<p>Read the text aloud, then check that links describe their destinations.</p>
</article><article class="plf:prose">
<h2 id="typography-rhythm">Build a useful rhythm</h2>
<p>Keep paragraphs focused, and use <a href="#typography-rhythm">headings</a> to mark a new topic.</p>
<ul>
<li>Keep each paragraph focused on one idea.</li>
<li>Use a list for genuinely parallel information.</li>
<li>Check long content in a narrow container.</li>
</ul>
<blockquote><p>Write for the person who needs to understand and act.</p></blockquote>
<h3>Review before sharing</h3>
<p>Read the text aloud, then check that links describe their destinations.</p>
</article>export function Example() {
return (
<article className="prose">
<h2 id="typography-rhythm">Build a useful rhythm</h2>
<p>Keep paragraphs focused, and use <a href="#typography-rhythm">headings</a> to mark a new topic.</p>
<ul>
<li>Keep each paragraph focused on one idea.</li>
<li>Use a list for genuinely parallel information.</li>
<li>Check long content in a narrow container.</li>
</ul>
<blockquote><p>Write for the person who needs to understand and act.</p></blockquote>
<h3>Review before sharing</h3>
<p>Read the text aloud, then check that links describe their destinations.</p>
</article>
);
}export function Example() {
return (
<article className="plf:prose">
<h2 id="typography-rhythm">Build a useful rhythm</h2>
<p>Keep paragraphs focused, and use <a href="#typography-rhythm">headings</a> to mark a new topic.</p>
<ul>
<li>Keep each paragraph focused on one idea.</li>
<li>Use a list for genuinely parallel information.</li>
<li>Check long content in a narrow container.</li>
</ul>
<blockquote><p>Write for the person who needs to understand and act.</p></blockquote>
<h3>Review before sharing</h3>
<p>Read the text aloud, then check that links describe their destinations.</p>
</article>
);
}Choose heading levels by meaning; the sizes follow the wrapper’s font size.
<div class="prose">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
</div><div class="plf:prose">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
</div>import { Prose } from '@pelatform/react';
export function Example() {
return (
<Prose>
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
</Prose>
);
}import { Prose } from '@pelatform/react/prefixed';
export function Example() {
return (
<Prose>
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
</Prose>
);
}A larger introductory paragraph that sets up the page.
A regular paragraph follows the lead.
Muted, smaller supporting text.
<div class="prose">
<p class="lead">A larger introductory paragraph that sets up the page.</p>
<p>A regular paragraph follows the lead.</p>
<p class="text-base-content/70 text-sm">Muted, smaller supporting text.</p>
</div><div class="plf:prose">
<p class="plf:lead">A larger introductory paragraph that sets up the page.</p>
<p>A regular paragraph follows the lead.</p>
<p class="plf:text-base-content/70 plf:text-sm">Muted, smaller supporting text.</p>
</div>import { Prose } from '@pelatform/react';
export function Example() {
return (
<Prose>
<p className="lead">A larger introductory paragraph that sets up the page.</p>
<p>A regular paragraph follows the lead.</p>
<p className="text-base-content/70 text-sm">Muted, smaller supporting text.</p>
</Prose>
);
}import { Prose } from '@pelatform/react/prefixed';
export function Example() {
return (
<Prose>
<p className="plf:lead">A larger introductory paragraph that sets up the page.</p>
<p>A regular paragraph follows the lead.</p>
<p className="plf:text-base-content/70 plf:text-sm">Muted, smaller supporting text.</p>
</Prose>
);
}Highlight the key detail while keeping the sentence readable.
Revision: Previous wording Updated wording.
Water: H2O. Area: m2.
Good typography makes the next sentence easy to find.
<div class="prose">
<p>Highlight <mark>the key detail</mark> while keeping the sentence readable.</p>
<p>Revision: <del>Previous wording</del> <ins>Updated wording</ins>.</p>
<p>Water: H<sub>2</sub>O. Area: m<sup>2</sup>.</p>
<figure>
<blockquote>
<p>Good typography makes the next sentence easy to find.</p>
</blockquote>
<figcaption>— Alex Morgan, <cite>Design notes</cite></figcaption>
</figure>
</div><div class="plf:prose">
<p>Highlight <mark>the key detail</mark> while keeping the sentence readable.</p>
<p>Revision: <del>Previous wording</del> <ins>Updated wording</ins>.</p>
<p>Water: H<sub>2</sub>O. Area: m<sup>2</sup>.</p>
<figure>
<blockquote>
<p>Good typography makes the next sentence easy to find.</p>
</blockquote>
<figcaption>— Alex Morgan, <cite>Design notes</cite></figcaption>
</figure>
</div>import { Prose } from '@pelatform/react';
export function Example() {
return (
<Prose>
<p>Highlight <mark>the key detail</mark> while keeping the sentence readable.</p>
<p>Revision: <del>Previous wording</del> <ins>Updated wording</ins>.</p>
<p>Water: H<sub>2</sub>O. Area: m<sup>2</sup>.</p>
<figure>
<blockquote>
<p>Good typography makes the next sentence easy to find.</p>
</blockquote>
<figcaption>— Alex Morgan, <cite>Design notes</cite></figcaption>
</figure>
</Prose>
);
}import { Prose } from '@pelatform/react/prefixed';
export function Example() {
return (
<Prose>
<p>Highlight <mark>the key detail</mark> while keeping the sentence readable.</p>
<p>Revision: <del>Previous wording</del> <ins>Updated wording</ins>.</p>
<p>Water: H<sub>2</sub>O. Area: m<sup>2</sup>.</p>
<figure>
<blockquote>
<p>Good typography makes the next sentence easy to find.</p>
</blockquote>
<figcaption>— Alex Morgan, <cite>Design notes</cite></figcaption>
</figure>
</Prose>
);
}Put a quote’s attribution in a figcaption after the blockquote, inside a figure.
Add one modifier to a mark; a mark without one stays amber.
Primary highlight.
Secondary highlight.
Success highlight.
Warning highlight.
Error highlight.
Info highlight.
<div class="prose">
<p><mark class="prose-mark-primary">Primary</mark> highlight.</p>
<p><mark class="prose-mark-secondary">Secondary</mark> highlight.</p>
<p><mark class="prose-mark-success">Success</mark> highlight.</p>
<p><mark class="prose-mark-warning">Warning</mark> highlight.</p>
<p><mark class="prose-mark-error">Error</mark> highlight.</p>
<p><mark class="prose-mark-info">Info</mark> highlight.</p>
</div><div class="plf:prose">
<p><mark class="plf:prose-mark-primary">Primary</mark> highlight.</p>
<p><mark class="plf:prose-mark-secondary">Secondary</mark> highlight.</p>
<p><mark class="plf:prose-mark-success">Success</mark> highlight.</p>
<p><mark class="plf:prose-mark-warning">Warning</mark> highlight.</p>
<p><mark class="plf:prose-mark-error">Error</mark> highlight.</p>
<p><mark class="plf:prose-mark-info">Info</mark> highlight.</p>
</div>import { Prose } from '@pelatform/react';
export function Example() {
return (
<Prose>
<p><mark className="prose-mark-primary">Primary</mark> highlight.</p>
<p><mark className="prose-mark-secondary">Secondary</mark> highlight.</p>
<p><mark className="prose-mark-success">Success</mark> highlight.</p>
<p><mark className="prose-mark-warning">Warning</mark> highlight.</p>
<p><mark className="prose-mark-error">Error</mark> highlight.</p>
<p><mark className="prose-mark-info">Info</mark> highlight.</p>
</Prose>
);
}import { Prose } from '@pelatform/react/prefixed';
export function Example() {
return (
<Prose>
<p><mark className="plf:prose-mark-primary">Primary</mark> highlight.</p>
<p><mark className="plf:prose-mark-secondary">Secondary</mark> highlight.</p>
<p><mark className="plf:prose-mark-success">Success</mark> highlight.</p>
<p><mark className="plf:prose-mark-warning">Warning</mark> highlight.</p>
<p><mark className="plf:prose-mark-error">Error</mark> highlight.</p>
<p><mark className="plf:prose-mark-info">Info</mark> highlight.</p>
</Prose>
);
}Wrap the heading text in prose-anchor with a hidden prose-anchor-mark; the # shows on hover and keyboard focus.
Each root chooses light, dark or auto.
<div class="prose">
<h3 id="typography-themes">
<a class="prose-anchor" href="#typography-themes">Set a theme<span class="prose-anchor-mark" aria-hidden="true">#</span></a>
</h3>
<p>Each root chooses light, dark or auto.</p>
</div><div class="plf:prose">
<h3 id="typography-themes">
<a class="plf:prose-anchor" href="#typography-themes">Set a theme<span class="plf:prose-anchor-mark" aria-hidden="true">#</span></a>
</h3>
<p>Each root chooses light, dark or auto.</p>
</div>import { Prose } from '@pelatform/react';
export function Example() {
return (
<Prose>
<h3 id="typography-themes">
<a className="prose-anchor" href="#typography-themes">Set a theme<span className="prose-anchor-mark" aria-hidden="true">#</span></a>
</h3>
<p>Each root chooses light, dark or auto.</p>
</Prose>
);
}import { Prose } from '@pelatform/react/prefixed';
export function Example() {
return (
<Prose>
<h3 id="typography-themes">
<a className="plf:prose-anchor" href="#typography-themes">Set a theme<span className="plf:prose-anchor-mark" aria-hidden="true">#</span></a>
</h3>
<p>Each root chooses light, dark or auto.</p>
</Prose>
);
}Under a sticky header, headings with an id stop --plf-sticky-offset below the top (Sticky and skip links).
Wrap a component inside the content in not-prose, so it keeps its own typography. A nested data-plf-root is excluded on its own.
Written content can sit alongside a component.
This card keeps its component typography.
Text after the card continues the same rhythm.
<div class="prose">
<p>Written content can sit alongside a component.</p>
<div class="not-prose">
<div class="card">
<div class="card-header">
<h4 class="card-title">Notification preferences</h4>
<p class="card-description">This card keeps its component typography.</p>
</div>
</div>
</div>
<p>Text after the card continues the same rhythm.</p>
</div><div class="plf:prose">
<p>Written content can sit alongside a component.</p>
<div class="plf:not-prose">
<div class="plf:card">
<div class="plf:card-header">
<h4 class="plf:card-title">Notification preferences</h4>
<p class="plf:card-description">This card keeps its component typography.</p>
</div>
</div>
</div>
<p>Text after the card continues the same rhythm.</p>
</div>import { Card, CardDescription, CardHeader, CardTitle, Prose } from '@pelatform/react';
export function Example() {
return (
<Prose>
<p>Written content can sit alongside a component.</p>
<div className="not-prose">
<Card>
<CardHeader>
<CardTitle level={4}>Notification preferences</CardTitle>
<CardDescription>This card keeps its component typography.</CardDescription>
</CardHeader>
</Card>
</div>
<p>Text after the card continues the same rhythm.</p>
</Prose>
);
}import { Card, CardDescription, CardHeader, CardTitle, Prose } from '@pelatform/react/prefixed';
export function Example() {
return (
<Prose>
<p>Written content can sit alongside a component.</p>
<div className="plf:not-prose">
<Card>
<CardHeader>
<CardTitle level={4}>Notification preferences</CardTitle>
<CardDescription>This card keeps its component typography.</CardDescription>
</CardHeader>
</Card>
</div>
<p>Text after the card continues the same rhythm.</p>
</Prose>
);
}Text utilities work on any element, inside or outside prose. Utilities lists them all, including font sizes and weights.
Centered, semibold text.
Centered, muted text.
<p class="text-center font-semibold">Centered, semibold text.</p>
<p class="text-center text-base-content/70">Centered, muted text.</p><p class="plf:text-center plf:font-semibold">Centered, semibold text.</p>
<p class="plf:text-center plf:text-base-content/70">Centered, muted text.</p>export function Example() {
return (
<>
<p className="text-center font-semibold">Centered, semibold text.</p>
<p className="text-center text-base-content/70">Centered, muted text.</p>
</>
);
}export function Example() {
return (
<>
<p className="plf:text-center plf:font-semibold">Centered, semibold text.</p>
<p className="plf:text-center plf:text-base-content/70">Centered, muted text.</p>
</>
);
}Prose from @pelatform/react renders the prose wrapper as a div; another element, such as an article, takes the class itself, as do lead, not-prose, the marks and the heading links.
Its props are a div’s own, className and ref included.
Set them on a root or a prose wrapper.
| Variable | Default |
|---|---|
--plf-prose-font-size |
Body font size |
--plf-prose-line-height |
Normal line-height |
--plf-prose-block-gap |
Space before blocks and headings, between paragraphs in a quote and above a caption |
--plf-prose-lead-size |
1. |
--plf-prose-h1-size … --plf-prose-h6-size |
2., 1., 1., 1., 1., 1em |
--plf-prose-code-color |
Text color |
--plf-prose-code-bg |
--plf-color-surface-muted |
--plf-prose-mark-bg, --plf-prose-mark-color |
The highlight’s color pair; overrides every variant, so set both and check contrast |