Fluid headings and comfortable text, grounded in the reader’s font settings.
A larger introduction sets the tone for the rest of the page.
Body text uses the system font and a comfortable line height. Fluid heading sizes are bounded by rem values so they respect user preferences.
Helpful context, in a quieter voice.
<div class="sl-stack sl-gap-6">
<h2>A thoughtful beginning.</h2>
<h3>A clear next chapter.</h3>
<h4>The details that matter.</h4>
<p class="sl-text-lg">
A larger introduction sets the tone for the rest of the page.
</p>
<p class="sl-measure">
Body text uses the system font and a comfortable line height. Fluid heading sizes
are bounded by rem values so they respect user preferences.
</p>
<p class="sl-help">Helpful context, in a quieter voice.</p>
</div>The optional prose module gives editorial content a consistent rhythm.
Good foundations make room for the things that matter. A clear rhythm helps readers move through your content.
Build the structure once. Let the content change.
<article class="sl-prose">
<h3>Leave space for the idea.</h3>
<p>
Good foundations make room for the things that matter. A clear rhythm helps readers
move through your content.
</p>
<blockquote>Build the structure once. Let the content change.</blockquote>
<ul>
<li>Use meaningful headings.</li>
<li>Keep the measure comfortable.</li>
<li>Let links look like links.</li>
</ul>
</article>Words are split at build time. A single accessible heading name prevents repeated speech.
<h3 class="sl-text-xl sl-split" aria-label="A little structure a lot of possibility">
<span class="sl-word" aria-hidden="true" style="--sl-i: 0">A</span>
<span class="sl-word" aria-hidden="true" style="--sl-i: 1">little</span>
<span class="sl-word" aria-hidden="true" style="--sl-i: 2">structure</span>
<span class="sl-word" aria-hidden="true" style="--sl-i: 3">a</span>
<span class="sl-word" aria-hidden="true" style="--sl-i: 4">lot</span>
<span class="sl-word" aria-hidden="true" style="--sl-i: 5">of</span>
<span class="sl-word" aria-hidden="true" style="--sl-i: 6">possibility</span>
</h3>Characters are grouped into words so wrapping stays natural. No browser-side text splitter.
<h3 class="sl-text-xl sl-split" aria-label="Make it yours">
<span class="sl-word" aria-hidden="true" style="--sl-i: 0"
><span class="sl-char" style="--sl-i: 1">M</span
><span class="sl-char" style="--sl-i: 2">a</span
><span class="sl-char" style="--sl-i: 3">k</span
><span class="sl-char" style="--sl-i: 4">e</span></span
>
<span class="sl-word" aria-hidden="true" style="--sl-i: 5"
><span class="sl-char" style="--sl-i: 6">i</span
><span class="sl-char" style="--sl-i: 7">t</span></span
>
<span class="sl-word" aria-hidden="true" style="--sl-i: 8"
><span class="sl-char" style="--sl-i: 9">y</span
><span class="sl-char" style="--sl-i: 10">o</span
><span class="sl-char" style="--sl-i: 11">u</span
><span class="sl-char" style="--sl-i: 12">r</span
><span class="sl-char" style="--sl-i: 13">s</span></span
>
</h3>Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.