Utilities: Typography

Font Family

The quick brown fox (sans)

The quick brown fox (serif)

The quick brown fox (mono)

<p class="lp-font-sans lp-mb-1">The quick brown fox (sans)</p>
<p class="lp-font-serif lp-mb-1">The quick brown fox (serif)</p>
<p class="lp-font-mono">The quick brown fox (mono)</p>

<p class="lp-text-xs lp-mb-1">text-xs — extra small</p>
<p class="lp-text-sm lp-mb-1">text-sm — small</p>
<p class="lp-text-md lp-mb-1">text-md — medium (default body)</p>
<p class="lp-text-lg lp-mb-1">text-lg — large</p>
<p class="lp-text-xl lp-mb-1">text-xl — extra large</p>
<p class="lp-text-2xl lp-mb-1">text-2xl — 2x large</p>
<p class="lp-text-3xl lp-mb-1">text-3xl — 3x large</p>
<p class="lp-text-4xl">text-4xl — 4x large</p>

Font Weight

fw-light — 300

fw-normal — 400

fw-medium — 500

fw-semibold — 600

fw-bold — 700

<p class="lp-fw-light lp-mb-1">fw-light — 300</p>
<p class="lp-fw-normal lp-mb-1">fw-normal — 400</p>
<p class="lp-fw-medium lp-mb-1">fw-medium — 500</p>
<p class="lp-fw-semibold lp-mb-1">fw-semibold — 600</p>
<p class="lp-fw-bold">fw-bold — 700</p>

Letter Spacing (Tracking)

tracking-tighter — condensed

tracking-tight

tracking-normal

tracking-wide

tracking-wider

tracking-widest

<p class="lp-tracking-tighter lp-mb-1">tracking-tighter — condensed</p>
<p class="lp-tracking-tight lp-mb-1">tracking-tight</p>
<p class="lp-tracking-normal lp-mb-1">tracking-normal</p>
<p class="lp-tracking-wide lp-mb-1">tracking-wide</p>
<p class="lp-tracking-wider lp-mb-1">tracking-wider</p>
<p class="lp-tracking-widest">tracking-widest</p>

Text Alignment

Start aligned

Center aligned

End aligned

Justified text — Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="lp-text-start lp-mb-1">Start aligned</p>
<p class="lp-text-center lp-mb-1">Center aligned</p>
<p class="lp-text-end lp-mb-1">End aligned</p>
<p class="lp-text-justify">Justified text — Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Text Transform & Decoration

lp-text-uppercase

LP-TEXT-LOWERCASE

capitalize each word

Underlined text

Strikethrough text

No decoration

<p class="lp-text-uppercase lp-mb-1">lp-text-uppercase</p>
<p class="lp-text-lowercase lp-mb-1">LP-TEXT-LOWERCASE</p>
<p class="lp-text-capitalize lp-mb-3">capitalize each word</p>
<p class="lp-text-underline lp-mb-1">Underlined text</p>
<p class="lp-text-line-through lp-mb-1">Strikethrough text</p>
<p class="lp-text-no-decoration">No decoration</p>

Line Clamp

line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

<div class="lp-max-w-md lp-mb-3">
    <p class="lp-text-xs lp-text-muted lp-mb-1">line-clamp-2</p>
    <p class="lp-line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="lp-max-w-md">
    <p class="lp-text-xs lp-text-muted lp-mb-1">line-clamp-3</p>
    <p class="lp-line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</div>

Word Break & Whitespace

break-all

supercalifragilisticexpialidocioushonorificabilitudinitatibus

whitespace-nowrap

This long line will not wrap and may overflow its container

<p class="lp-text-xs lp-text-muted lp-mb-1">break-all</p>
<p class="lp-break-all lp-max-w-xs lp-mb-3">supercalifragilisticexpialidocioushonorificabilitudinitatibus</p>
<p class="lp-text-xs lp-text-muted lp-mb-1">whitespace-nowrap</p>
<p class="lp-whitespace-nowrap lp-max-w-xs lp-overflow-hidden">This long line will not wrap and may overflow its container</p>

Vertical Align

Default: line text

Middle: middle text

Top: top text

Bottom: bottom text

<p>Default: <span class="lp-demo-box lp-demo-box--pill">line</span> text</p>
<p>Middle: <span class="lp-demo-box lp-demo-box--pill lp-align-middle">middle</span> text</p>
<p>Top: <span class="lp-demo-box lp-demo-box--pill lp-align-top">top</span> text</p>
<p>Bottom: <span class="lp-demo-box lp-demo-box--pill lp-align-bottom">bottom</span> text</p>

List Styles

Disc one
Disc two
Disc three

First
Second
Third

No marker
Clean list

<div class="lp-d-flex lp-gap-5 lp-flex-wrap">
    <ul class="lp-list-disc lp-pl-5"><li>Disc one</li><li>Disc two</li><li>Disc three</li></ul>
    <ol class="lp-list-decimal lp-pl-5"><li>First</li><li>Second</li><li>Third</li></ol>
    <ul class="lp-list-none"><li>No marker</li><li>Clean list</li></ul>
</div>

CSS Reference

Class	Description
`.lp-font-{sans\|serif\|mono}`	Font family
`.lp-text-{xs\|sm\|md\|lg\|xl\|2xl\|3xl\|4xl\|5xl}`	Font size
`.lp-fw-{light\|normal\|medium\|semibold\|bold}`	Font weight
`.lp-tracking-{tighter\|tight\|normal\|wide\|wider\|widest}`	Letter spacing
`.lp-leading-{none\|tight\|snug\|normal\|relaxed\|loose}`	Line height
`.lp-text-{start\|center\|end\|justify}`	Text alignment
`.lp-text-{uppercase\|lowercase\|capitalize}`	Text transform
`.lp-text-{underline\|line-through\|no-decoration}`	Text decoration
`.lp-line-clamp-{1..6}` / `.lp-line-clamp-none`	Line clamp
`.lp-break-{normal\|words\|all\|keep}`	Word break
`.lp-whitespace-{normal\|nowrap\|pre\|pre-line\|pre-wrap}`	Whitespace
`.lp-align-{baseline\|top\|middle\|bottom\|text-top\|text-bottom\|sub\|super}`	Vertical align
`.lp-list-{none\|disc\|decimal\|inside\|outside}`	List style
`.lp-text-truncate`	Single-line truncate with ellipsis

Typography Utilities