Components
Prose
Typography container for rich author-controlled HTML content.
Wrap unstyled HTML in .ui-prose to format headings, paragraphs, lists, tables, and blockquotes with standard spacing and typographic measure.
Default
Loading components…
<article class="ui-prose container py-lg" data-variant="article"> <hgroup> <span class="text-eyebrow">Heading 1</span> <h1>How vexingly quick daft zebras jump.</h1> <p class="text-xl text-muted-foreground">The Art of Typography</p> </hgroup> <hgroup> <span class="text-eyebrow">Heading 2</span> <h2>How vexingly quick daft zebras jump.</h2> </hgroup> <hgroup> <span class="text-eyebrow">Heading 3</span> <h3>How vexingly quick daft zebras jump.</h3> </hgroup> <hgroup> <span class="text-eyebrow">Heading 4</span> <h4>How vexingly quick daft zebras jump.</h4> </hgroup> <hgroup> <span class="text-eyebrow">Heading 5</span> <h5>How vexingly quick daft zebras jump.</h5> </hgroup> <hgroup> <span class="text-eyebrow">Heading 6</span> <h6>How vexingly quick daft zebras jump.</h6> </hgroup> <hr /> <p class="text-xl"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p> <p class="text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p> <p class="text-sm"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p> <p class="text-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p> <hr /> <figure> <img sizes="auto" loading="lazy" width="800" height="400" src="https://placehold.co/800x400" alt="Placeholder demonstrating figure and image styling within prose" /> <figcaption>Figure 1: A placeholder image styled with .ui-prose</figcaption> </figure></article>