Rich Text

Rich Text is used for content provided by editors in Content Management Systems. These systems usually output a big chunk of HTML without classes, so DNA provides a container (ys-rich-text), which adds styling similar to the typography styles to the corresponding HTML elements.

Examples

Rich Text

h1 (same as Main Title)

H3 is bad after h1!! H3 is bad after h1!!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus a


nisi doloremque eius minus non adipisci harum inventore consequatur, sit amet! Sapiente reiciendis repellat non temporibus incidunt, ex a dolores!

I am a link
I am a anchor element

h2 (same as Primary Title)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, provident vitae debitis aperiam perferendis quos? Impedit molestias nisi ullam repudiandae reprehenderit

h3 (same as Secondary Title)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat, provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam nihil quia eligendi. Asperiores

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias itaque deserunt quia soluta vero suscipit laudantium voluptatibus unde, consectetur quis! Dolorem modi magnam temporibus at esse, quaerat optio laudantium amet.

h4 (same as Subtitle)

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit illum exercitationem distinctio itaque ullam nesciunt voluptatum! Libero non ipsa esse corrupti iste rem nulla. Repellendus dignissimos facere laudantium delectus laborum?

h5 (same as Subtitle)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque minima possimus modi, numquam adipisci natus labore deserunt nihil quisquam? Delectus, veritatis nam architecto error veniam quod? Ducimus iste tenetur recusandae!

h6 (same as Subtitle)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, odio obcaecati, nam optio pariatur aut incidunt voluptatum exercitationem sapiente error minus cumque. Molestiae, minus adipisci illo mollitia sapiente optio repellendus?

H1 before h2

H2 after h1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eaque totam ut a corrupti perspiciatis soluta libero sit rerum, voluptate voluptas culpa ea est cumque, sequi, eligendi dolor vel! Dolorum!

H2 before h3

H3 after h2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo, necessitatibus laborum distinctio illo debitis alias ut tenetur asperiores non quaerat dolorum, accusantium facere? Distinctio nemo esse delectus vel earum rem?

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Aperiam necessitatibus in saepe dolore.
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • Aperiam necessitatibus in saepe dolore.
    • Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
    • Vel, veniam non at consequuntur fugiat laudantium?
  • Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  • Vel, veniam non at consequuntur fugiat laudantium?

Modi labore maxime voluptatum rerum quis nostrum reiciendis? Architecto? Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, repudiandae iusto laboriosam veritatis doloribus consequuntur libero ipsam suscipit omnis minima quas voluptatibus possimus nihil illo vitae maxime earum soluta ea?

h3 (same as Secondary Title)

Subtitle stuffy stuff

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat, provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam nihil quia eligendi. Asperiores

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Aperiam necessitatibus in saepe dolore.
  3. Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  4. Vel, veniam non at consequuntur fugiat laudantium?

Eveniet enim hic culpa nesciunt laudantium eligendi repudiandae accusantium odit consequatur vel explicabo! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil nesciunt soluta fugiat voluptatibus necessitatibus harum blanditiis delectus culpa suscipit porro iusto explicabo quos neque inventore, excepturi, odit reprehenderit sapiente eaque?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, quos illum? Dolore molestiae dignissimos, odit quidem rerum, facere magni corrupti sint eum expedita fugit, odio ullam minus tenetur debitis. Quas.

h4 (same as Subtitle)

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Aperiam necessitatibus in saepe dolore.
  • Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  • Vel, veniam non at consequuntur fugiat laudantium?

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit ullam a veniam at voluptates dolorem voluptate eius eos id, eveniet laudantium ipsa reprehenderit ducimus error quam, blanditiis dolorum, omnis cupiditate.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic velit, molestiae minima, perspiciatis illum repellat tempore iure quaerat et beatae optio sunt, excepturi dolor nam a iusto similique totam cum! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio nemo similique aspernatur nesciunt asperiores deserunt culpa voluptates omnis, atque enim. Molestiae saepe aliquid repellat commodi quasi cum vitae ut quisquam!

h5 (same as Subtitle)
  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Aperiam necessitatibus in saepe dolore.
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    2. Aperiam necessitatibus in saepe dolore.
    3. Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
    4. Vel, veniam non at consequuntur fugiat laudantium?
  3. Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  4. Vel, veniam non at consequuntur fugiat laudantium?
h6 (same as Subtitle)
<div class="ys-rich-text">
    <!-- simulated content from CMS -->
    <h1>h1 (same as Main Title)</h1>
    <h3>H3 is bad after h1!! H3 is bad after h1!! </h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus a<br /><br /><br />nisi doloremque eius minus non adipisci harum inventore consequatur, sit amet! Sapiente reiciendis repellat non temporibus incidunt, ex a dolores!</p>
    <p>
        <a href="https://yousee.dk" target="_blank">I am a link</a><br>
        <a href="#example">I am a anchor element</a>
    </p>
    <h2>h2 (same as Primary Title)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, provident vitae debitis aperiam perferendis quos? Impedit molestias nisi ullam repudiandae reprehenderit</p>
    <h3>h3 (same as Secondary Title)</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat, provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam nihil quia eligendi. Asperiores</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias itaque deserunt quia soluta vero suscipit laudantium voluptatibus unde, consectetur quis! Dolorem modi magnam temporibus at esse, quaerat optio laudantium amet.</p>
    <h4>h4 (same as Subtitle)</h4>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit illum exercitationem distinctio itaque ullam nesciunt voluptatum! Libero non ipsa esse corrupti iste rem nulla. Repellendus dignissimos facere laudantium delectus laborum?</p>
    <h5>h5 (same as Subtitle)</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque minima possimus modi, numquam adipisci natus labore deserunt nihil quisquam? Delectus, veritatis nam architecto error veniam quod? Ducimus iste tenetur recusandae!</p>
    <h6>h6 (same as Subtitle)</h6>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, odio obcaecati, nam optio pariatur aut incidunt voluptatum exercitationem sapiente error minus cumque. Molestiae, minus adipisci illo mollitia sapiente optio repellendus?</p>
    <h1>H1 before h2</h1>
    <h2>H2 after h1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eaque totam ut a corrupti perspiciatis soluta libero sit rerum, voluptate voluptas culpa ea est cumque, sequi, eligendi dolor vel! Dolorum!</p>
    <h2>H2 before h3</h2>
    <h3>H3 after h2</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo, necessitatibus laborum distinctio illo debitis alias ut tenetur asperiores non quaerat dolorum, accusantium facere? Distinctio nemo esse delectus vel earum rem?</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Aperiam necessitatibus in saepe dolore.</li>
                <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
                <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
            </ul>
        </li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ul>
    <p>Modi labore maxime voluptatum rerum quis nostrum reiciendis? Architecto? Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Incidunt, repudiandae iusto laboriosam veritatis doloribus consequuntur libero ipsam suscipit
        omnis minima quas voluptatibus possimus nihil illo vitae maxime earum soluta ea?</p>
    <h3>h3 (same as Secondary Title)</h3>
    <h4>Subtitle stuffy stuff</h4>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum
        laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat,
        provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam
        nihil quia eligendi. Asperiores</p>
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.</li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ol>
    <p>Eveniet enim hic culpa nesciunt laudantium eligendi repudiandae accusantium odit consequatur vel explicabo! Lorem
        ipsum dolor, sit amet consectetur adipisicing elit. Nihil nesciunt soluta fugiat voluptatibus necessitatibus
        harum blanditiis delectus culpa suscipit porro iusto explicabo quos neque inventore, excepturi, odit
        reprehenderit sapiente eaque?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, quos illum? Dolore molestiae dignissimos, odit
        quidem rerum, facere magni corrupti sint eum expedita fugit, odio ullam minus tenetur debitis. Quas.</p>
    <h4>h4 (same as Subtitle)</h4>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.</li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ul>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit ullam a veniam at voluptates dolorem voluptate
        eius eos id, eveniet laudantium ipsa reprehenderit ducimus error quam, blanditiis dolorum, omnis cupiditate.</p>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic velit, molestiae minima, perspiciatis illum
        repellat tempore iure quaerat et beatae optio sunt, excepturi dolor nam a iusto similique totam cum! Lorem ipsum
        dolor sit amet consectetur, adipisicing elit. Optio nemo similique aspernatur nesciunt asperiores deserunt culpa
        voluptates omnis, atque enim. Molestiae saepe aliquid repellat commodi quasi cum vitae ut quisquam!</p>
    <h5 id="example">h5 (same as Subtitle)</h5>
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.
            <ol>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Aperiam necessitatibus in saepe dolore.</li>
                <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
                <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
            </ol>
        </li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ol>
    <h6>h6 (same as Subtitle)</h6>
    <!-- end simulated content -->
</div>

Rich Text on dark background

h1 (same as Main Title)

H3 is bad after h1!! H3 is bad after h1!!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus a


nisi doloremque eius minus non adipisci harum inventore consequatur, sit amet! Sapiente reiciendis repellat non temporibus incidunt, ex a dolores!

I am a link
I am a anchor element

h2 (same as Primary Title)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, provident vitae debitis aperiam perferendis quos? Impedit molestias nisi ullam repudiandae reprehenderit

h3 (same as Secondary Title)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat, provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam nihil quia eligendi. Asperiores

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias itaque deserunt quia soluta vero suscipit laudantium voluptatibus unde, consectetur quis! Dolorem modi magnam temporibus at esse, quaerat optio laudantium amet.

h4 (same as Subtitle)

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit illum exercitationem distinctio itaque ullam nesciunt voluptatum! Libero non ipsa esse corrupti iste rem nulla. Repellendus dignissimos facere laudantium delectus laborum?

h5 (same as Subtitle)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque minima possimus modi, numquam adipisci natus labore deserunt nihil quisquam? Delectus, veritatis nam architecto error veniam quod? Ducimus iste tenetur recusandae!

h6 (same as Subtitle)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, odio obcaecati, nam optio pariatur aut incidunt voluptatum exercitationem sapiente error minus cumque. Molestiae, minus adipisci illo mollitia sapiente optio repellendus?

H1 before h2

H2 after h1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eaque totam ut a corrupti perspiciatis soluta libero sit rerum, voluptate voluptas culpa ea est cumque, sequi, eligendi dolor vel! Dolorum!

H2 before h3

H3 after h2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo, necessitatibus laborum distinctio illo debitis alias ut tenetur asperiores non quaerat dolorum, accusantium facere? Distinctio nemo esse delectus vel earum rem?

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Aperiam necessitatibus in saepe dolore.
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • Aperiam necessitatibus in saepe dolore.
    • Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
    • Vel, veniam non at consequuntur fugiat laudantium?
  • Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  • Vel, veniam non at consequuntur fugiat laudantium?

Modi labore maxime voluptatum rerum quis nostrum reiciendis? Architecto? Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, repudiandae iusto laboriosam veritatis doloribus consequuntur libero ipsam suscipit omnis minima quas voluptatibus possimus nihil illo vitae maxime earum soluta ea?

h3 (same as Secondary Title)

Subtitle stuffy stuff

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat, provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam nihil quia eligendi. Asperiores

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Aperiam necessitatibus in saepe dolore.
  3. Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  4. Vel, veniam non at consequuntur fugiat laudantium?

Eveniet enim hic culpa nesciunt laudantium eligendi repudiandae accusantium odit consequatur vel explicabo! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil nesciunt soluta fugiat voluptatibus necessitatibus harum blanditiis delectus culpa suscipit porro iusto explicabo quos neque inventore, excepturi, odit reprehenderit sapiente eaque?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, quos illum? Dolore molestiae dignissimos, odit quidem rerum, facere magni corrupti sint eum expedita fugit, odio ullam minus tenetur debitis. Quas.

h4 (same as Subtitle)

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Aperiam necessitatibus in saepe dolore.
  • Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  • Vel, veniam non at consequuntur fugiat laudantium?

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit ullam a veniam at voluptates dolorem voluptate eius eos id, eveniet laudantium ipsa reprehenderit ducimus error quam, blanditiis dolorum, omnis cupiditate.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic velit, molestiae minima, perspiciatis illum repellat tempore iure quaerat et beatae optio sunt, excepturi dolor nam a iusto similique totam cum! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio nemo similique aspernatur nesciunt asperiores deserunt culpa voluptates omnis, atque enim. Molestiae saepe aliquid repellat commodi quasi cum vitae ut quisquam!

h5 (same as Subtitle)
  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Aperiam necessitatibus in saepe dolore.
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    2. Aperiam necessitatibus in saepe dolore.
    3. Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
    4. Vel, veniam non at consequuntur fugiat laudantium?
  3. Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!
  4. Vel, veniam non at consequuntur fugiat laudantium?
h6 (same as Subtitle)
<div class="ys-rich-text ys-rich-text--light">
    <!-- simulated content from CMS -->
    <h1>h1 (same as Main Title)</h1>
    <h3>H3 is bad after h1!! H3 is bad after h1!! </h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus a<br /><br /><br />nisi doloremque eius minus non adipisci harum inventore consequatur, sit amet! Sapiente reiciendis repellat non temporibus incidunt, ex a dolores!</p>
    <p>
        <a href="https://yousee.dk" target="_blank">I am a link</a><br>
        <a href="#example">I am a anchor element</a>
    </p>
    <h2>h2 (same as Primary Title)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, provident vitae debitis aperiam perferendis quos? Impedit molestias nisi ullam repudiandae reprehenderit</p>
    <h3>h3 (same as Secondary Title)</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat, provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam nihil quia eligendi. Asperiores</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias itaque deserunt quia soluta vero suscipit laudantium voluptatibus unde, consectetur quis! Dolorem modi magnam temporibus at esse, quaerat optio laudantium amet.</p>
    <h4>h4 (same as Subtitle)</h4>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit illum exercitationem distinctio itaque ullam nesciunt voluptatum! Libero non ipsa esse corrupti iste rem nulla. Repellendus dignissimos facere laudantium delectus laborum?</p>
    <h5>h5 (same as Subtitle)</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque minima possimus modi, numquam adipisci natus labore deserunt nihil quisquam? Delectus, veritatis nam architecto error veniam quod? Ducimus iste tenetur recusandae!</p>
    <h6>h6 (same as Subtitle)</h6>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, odio obcaecati, nam optio pariatur aut incidunt voluptatum exercitationem sapiente error minus cumque. Molestiae, minus adipisci illo mollitia sapiente optio repellendus?</p>
    <h1>H1 before h2</h1>
    <h2>H2 after h1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eaque totam ut a corrupti perspiciatis soluta libero sit rerum, voluptate voluptas culpa ea est cumque, sequi, eligendi dolor vel! Dolorum!</p>
    <h2>H2 before h3</h2>
    <h3>H3 after h2</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo, necessitatibus laborum distinctio illo debitis alias ut tenetur asperiores non quaerat dolorum, accusantium facere? Distinctio nemo esse delectus vel earum rem?</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Aperiam necessitatibus in saepe dolore.</li>
                <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
                <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
            </ul>
        </li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ul>
    <p>Modi labore maxime voluptatum rerum quis nostrum reiciendis? Architecto? Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Incidunt, repudiandae iusto laboriosam veritatis doloribus consequuntur libero ipsam suscipit
        omnis minima quas voluptatibus possimus nihil illo vitae maxime earum soluta ea?</p>
    <h3>h3 (same as Secondary Title)</h3>
    <h4>Subtitle stuffy stuff</h4>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, facilis perferendis vero harum error eum
        laboriosam quod. Aut molestiae maxime atque, inventore a quisquam optio facere eligendi amet? Repellat,
        provident? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum repellat, nemo magni numquam
        nihil quia eligendi. Asperiores</p>
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.</li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ol>
    <p>Eveniet enim hic culpa nesciunt laudantium eligendi repudiandae accusantium odit consequatur vel explicabo! Lorem
        ipsum dolor, sit amet consectetur adipisicing elit. Nihil nesciunt soluta fugiat voluptatibus necessitatibus
        harum blanditiis delectus culpa suscipit porro iusto explicabo quos neque inventore, excepturi, odit
        reprehenderit sapiente eaque?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, quos illum? Dolore molestiae dignissimos, odit
        quidem rerum, facere magni corrupti sint eum expedita fugit, odio ullam minus tenetur debitis. Quas.</p>
    <h4>h4 (same as Subtitle)</h4>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.</li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ul>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit ullam a veniam at voluptates dolorem voluptate
        eius eos id, eveniet laudantium ipsa reprehenderit ducimus error quam, blanditiis dolorum, omnis cupiditate.</p>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic velit, molestiae minima, perspiciatis illum
        repellat tempore iure quaerat et beatae optio sunt, excepturi dolor nam a iusto similique totam cum! Lorem ipsum
        dolor sit amet consectetur, adipisicing elit. Optio nemo similique aspernatur nesciunt asperiores deserunt culpa
        voluptates omnis, atque enim. Molestiae saepe aliquid repellat commodi quasi cum vitae ut quisquam!</p>
    <h5 id="example">h5 (same as Subtitle)</h5>
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Aperiam necessitatibus in saepe dolore.
            <ol>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Aperiam necessitatibus in saepe dolore.</li>
                <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
                <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
            </ol>
        </li>
        <li>Ipsa velit voluptatum, quaerat maiores distinctio libero eveniet modi dolores!</li>
        <li>Vel, veniam non at consequuntur fugiat laudantium?</li>
    </ol>
    <h6>h6 (same as Subtitle)</h6>
    <!-- end simulated content -->
</div>

HTML Guidelines

Wrap the output element in a ys-rich-text container.

UX and Design Guidelines