StudioCMS Typography

The studiocms:ui/prose dynamic import adds a CSS file that contains a prose class that can be used to add styled typography to your content. The styles are based on Tailwind Typography ⤴.

Usage

'Read the “', Usage, '” section'

Prose Example

---
import 'studiocms:ui/prose';
---

<section class="prose">
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    Quam, velit cumque aliquam iusto ea hic commodi modi fugiat voluptates esse voluptate facilis,
    accusamus pariatur deserunt ipsa quis consectetur dignissimos. Impedit.
  </p>
</section>

Opting out of styling

'Read the “', Opting out of styling, '” section'

Since the styles are based on tailwind typography, you can use the not-prose class on any children to opt out of the styling.

Example

'Read the “', Example, '” section'

Preview

Heading 2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam, velit cumque aliquam iusto ea hic commodi modi fugiat voluptates esse voluptate facilis, accusamus pariatur deserunt ipsa quis consectetur dignissimos. Impedit. Rerum, minima odit. Velit quo dicta eaque inventore rem aut omnis cupiditate obcaecati, ipsam, incidunt voluptate. Ab, dolore non? Voluptatibus nemo animi corporis consectetur praesentium delectus veniam recusandae nisi quidem!

Soluta minus fugiat magni molestias dignissimos tempore quia, aliquid quaerat blanditiis autem culpa atque, nulla obcaecati assumenda qui eum quidem distinctio odio est. Nemo in incidunt nihil libero. Exercitationem, vel. Nobis optio consequatur velit eos eligendi eius, nisi fuga voluptatibus molestiae, quos laborum blanditiis laudantium? Nisi voluptatem quas commodi consectetur repellendus atque, odit a eveniet nostrum iure natus maxime vel.

Heading 3

1. List item 1
2. List item 2
3. List item 3

Quotes

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam, velit cumque aliquam iusto ea hic commodi modi fugiat voluptates esse voluptate facilis, accusamus pariatur deserunt ipsa quis consectetur dignissimos. Impedit.

Code

This is a paragraph. Here’s some code: const foo = ‘bar’;

const foo = ‘bar’;

Code

Prose Example

---
import 'studiocms:ui/prose';
---

<section class="prose">
  <h2>Heading 2</h2>

  <p>
    Lorem ipsum dolor sit amet <i>consectetur</i>, adipisicing elit. Quam, velit cumque <b>aliquam</b>
    iusto ea hic commodi modi fugiat voluptates esse voluptate facilis, accusamus pariatur deserunt ipsa
    quis consectetur dignissimos. Impedit.
    Rerum, minima odit. Velit quo dicta eaque inventore rem aut omnis cupiditate obcaecati, ipsam, incidunt
    voluptate. Ab, dolore non? Voluptatibus nemo animi corporis consectetur praesentium delectus veniam recusandae nisi quidem!
  </p>
  <p>
    Soluta minus fugiat magni molestias dignissimos tempore quia, aliquid quaerat blanditiis autem culpa atque,
    nulla obcaecati assumenda qui eum quidem distinctio odio est. Nemo in incidunt nihil libero. Exercitationem, vel.
    Nobis optio consequatur velit eos eligendi eius, nisi fuga voluptatibus molestiae, quos laborum blanditiis laudantium?
    Nisi voluptatem quas commodi consectetur repellendus atque, odit a eveniet nostrum iure natus maxime vel.
  </p>

  <h3>Heading 3</h3>

  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>

  <h3>Quotes</h3>
  <blockquote>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam, velit cumque aliquam iusto ea hic
      commodi modi fugiat voluptates esse voluptate facilis, accusamus pariatur deserunt ipsa quis consectetur
      dignissimos. Impedit.
    </p>
  </blockquote>

  <h3>Code</h3>

  <p>This is a paragraph. Here's some code: <code>const foo = 'bar';</code></p>

  <pre><code>const foo = 'bar';</code></pre>
</section>