Mozilla Protocol
  • 21.1.0

Rich Text

When using Protocol with a CMS there are cases where you will be outputting content which was entered in a rich text editor. In this case you will likely want lists, headings, and tables to have some default styling. This class will also optimize heading spacing to improve readability.

Adding the mzp-u-rich-text class to the wrapper around the output will add styles for this components.

Tips

Combine this class with the article component to restrict text to a readable line length.

<article class="mzp-c-article mzp-u-rich-text">
    <h1>We’re building a better Internet</h1>
    <p>
        Our mission is to ensure the Internet is a global public resource, open and
        accessible to all. An Internet that truly puts people first, where
        individuals can shape their own experience and are empowered, safe and
        independent.
    </p>
    <p>
        At Mozilla, we’re a global community of technologists, thinkers and builders
        working together to keep the Internet alive and accessible, so people
        worldwide can be informed contributors and creators of the Web. We believe
        this act of human collaboration across an open platform is essential to
        individual growth and our collective future.
    </p>

    <h2>Qui omnis perferendis in repellendus doloribus.</h2>
    <p>
        Lorem ipsum dolor sit amet. Et impedit harum et voluptas libero
        <a href="https://www.loremipzum.com" target="_blank">Ab voluptatem sed dolores delectus</a>
        qui omnis laudantium ut possimus nesciunt eum quos eaque. Ab autem
        perferendis <em>Ea enim sit fuga excepturi vel similique enim</em> et
        quisquam rerum est iusto consequatur et optio ratione. Et internos ratione
        <strong>33 officiis in voluptate placeat qui corrupti quisquam</strong> aut
        repellendus dolorum ea voluptatem perspiciatis eos sunt nisi!
    </p>
    <h3>Ea quisquam soluta rem impedit provident.</h3>
    <p>
        Ex impedit voluptas <em>Eum odit ut harum iure</em>. Quo esse eius et
        temporibus sapienteab natus ut voluptas voluptas.
    </p>
    <ul>
        <li>Id dolore amet est vero distinctio et odio fugit.</li>
        <li>
            Et fugiat commodi et vitae quia rem nostrum impedit qui voluptatem
            voluptatem.
        </li>
        <li>In optio fugit At eligendi pariatur.</li>
    </ul>
    <h4>Et provident earum aut alias dolores.</h4>
    <p>
        Sed possimus esse
        <strong>Eum dolores est dolores provident et tempora ipsam</strong> est
        nobis galisum quo veniam distinctio ex nostrum laborum. Hic consequatur
        galisum qui nemo voluptatemcum voluptates qui debitis explicabo. Et
        consequatur accusantium eum eaque corporis
        <a href="https://www.loremipzum.com" target="_blank">Qui consequatur qui voluptatum nihil</a>
        vel tempore nihil ut eligendi odit id enim fugiat.
    </p>
    <ol>
        <li>
            Et voluptatem totam et voluptatem omnis eos maxime tempora hic natus
            eaque.
        </li>
        <li>
            Aut eveniet voluptatem et nesciunt velit est velit nisi et mollitia
            repellat.
        </li>
    </ol>
    <dl>
        <dt>
            <dfn>Rem quod dolorem. </dfn>
        </dt>
        <dd>
            Aut natus sint ut adipisci similique hic nostrum debitis et consequatur
            voluptatem.
        </dd>
        <dt>
            <dfn>Qui libero tempora qui dolor quis. </dfn>
        </dt>
        <dd>
            Sit consequatur incidunt et voluptatem enim qui nihil voluptatem in
            corporis consequatur?
        </dd>
        <dt>
            <dfn>33 obcaecati totam. </dfn>
        </dt>
        <dd>Aut autem eligendi aut beatae quidem qui incidunt sunt.</dd>
        <dt>
            <dfn>Et velit porro et dolor officiis. </dfn>
        </dt>
        <dd>
            Qui accusamus reiciendis eos iusto incidunt est voluptatibus officia id
            provident magni.
        </dd>
    </dl>
</article>