Skip to main content

Prose

The prose component provides proper styling for rendered Markdown.

Class Output
.s-prose Adds proper styling for rendered Markdown.
.s-prose__xs Our most compact version with the smallest font size and line height.
.s-prose__sm Decreases the base font size and line height.
.s-prose__md Increases the base font size and line height.

We modified this test document from the folks at Tailwind to demonstrate and explain our design choices.

The following is a real-world answer taken from Stack Overflow

Let’s see what a link preview looks like within the prose component.

This example includes the full kitchen-sink collection of everything the Markdown spec includes.

<div class="s-prose">

</div>
<div class="s-prose s-prose__xs">

</div>

In ancilliary content like comments or side-discussions, it may be appropriate to add the small variation.

<div class="s-prose s-prose__sm">

</div>
<div class="s-prose">

</div>

Depending on the context for displaying the prose component, it may be appropriate to size text up to maintain readability.

<div class="s-prose s-prose__md">

</div>
Deploys by Netlify