<div class="richText">
  <p>
  Paragraph ipsum possimus illum debitis enim odio Distinctio praesentium explicabo mollitia voluptatem nostrum sunt. Ut iste dignissimos soluta unde repudiandae. <a href="#">Voluptate et neque</a> non aspernatur aliquid asperiores tenetur amet reprehenderit? Numquam.
  </p>

  <hr>

  <p>
    Lorem ratione temporibus beatae doloremque?
  </p>

  <ul>
    <li>Lorem nobis impedit labore quod at qui esse. Quo velit?</li>
    <li>Lorem cumque fugit nisi consectetur aliquid Natus suscipit modi nam.</li>
    <li>Ipsum repellat exercitationem rerum eos iste? Impedit quos at dignissimos.</li>
  </ul>

  <p>
    Consectetur nulla voluptatem a veniam perspiciatis omnis quam. Adipisci fugit explicabo obcaecati hic ab. Repudiandae amet veniam vero sapiente harum Explicabo numquam facilis dolor at numquam Molestiae assumenda laboriosam asperiores.
  </p>
  
  <ol>
    <li>Amet quis hic deleniti fugit obcaecati Libero fuga doloribus corrupti.</li>
    <li>Lorem totam vitae commodi illum ab? Quos quibusdam ducimus dignissimos</li>
    <li>Elit incidunt aut omnis dolorem eaque. Elit tenetur nostrum dolores</li>
  </ol>

  <hr>
  
  <blockquote>
    <p>
      Consectetur amet magnam vitae nisi rem Dolore assumenda unde fuga ex doloremque. Harum veniam eveniet aspernatur maiores ex Eius eaque ab quam dicta sequi! Aut eaque ratione quasi enim voluptate
    </p>
    <cite>
      First Lastername
    </cite>
  </blockquote>

  <p>
  Elit temporibus quos officiis qui unde beatae. Repellendus pariatur temporibus velit sit voluptate Expedita quibusdam eaque quod magnam eaque Sint sequi consequuntur aperiam accusantium porro? <code>Code snippet</code> eaque at saepe
  </p>

  <pre>
    module Main where

    main :: IO ()
    main = putStrLn "Hello World!"</pre>
</div>

@use "../../molecules/list";
@use "../../organisms/table";

.richText {

  /**
   * Automatically use list component styles even without the class.
   */
  dl,
  ol,
  ul {
    @extend .list;
  }
  
  table {
    @extend .table;
  }
}