Front W - Pattern Library

Text 

<div class="prose">

    <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
        sit amet <strong>consectetur adipisicing</strong> elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab
        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum <i>dolor sit amet
            consectetur</i> adipisicing elit. H<sup>2</sup>0 Quaerat iste voluptas debitis illo labore laudantium dolore harum
        libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
    <ul>
        <li>Liste 1</li>
        <li>Liste 2</li>
        <li>Liste 3</li>
    </ul>
    <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
        sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab
        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit <a href="https://hs-duesseldorf.de" target="_self">amet consectetu</a>r adipisicing elit. Quaerat iste voluptas debitis
        illo labore laudantium dolore harum libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore
        natus, impedit numquam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
        sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab
        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit <a href="https://hs-duesseldorf.de" target="_self">amet consectetu</a>r adipisicing elit. Quaerat iste voluptas debitis
        illo labore laudantium dolore harum libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore
        natus, impedit numquam?</p>
    <figure class="table">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th><strong>First</strong></th>
                    <th><strong>Last</strong></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>Jan</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Steve</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>Larry</td>
                    <td>Meyer</td>
                </tr>
            </tbody>
        </table>
    </figure>
    <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
        sit amet consectetur adipisicing elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab quae. Debitis
        eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat accusantium
        asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
        sit amet consectetur adipisicing elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab quae. Debitis
        eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat accusantium
        asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
    <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
        <ol>
            <li>Liste 1</li>
            <li>Liste 2</li>
            <li>Liste 3</li>
        </ol>
        <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
                corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
                sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab
                quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat
                accusantium asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>

</div>
 
<div class="prose">
  {{ text|raw }}
</div>
 
{
  "text": "\n      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit</h2>\n      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius\n        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,\n        sit amet <strong>consectetur adipisicing</strong> elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab\n        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum <i>dolor sit amet\n          consectetur</i> adipisicing elit. H<sup>2</sup>0 Quaerat iste voluptas debitis illo labore laudantium dolore harum\n        libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>\n      <ul>\n        <li>Liste 1</li>\n        <li>Liste 2</li>\n        <li>Liste 3</li>\n      </ul>\n      <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>\n      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius\n        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,\n        sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab\n        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit <a\n          href=\"https://hs-duesseldorf.de\" target=\"_self\">amet consectetu</a>r adipisicing elit. Quaerat iste voluptas debitis\n        illo labore laudantium dolore harum libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore\n        natus, impedit numquam?</p>\n      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius\n        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,\n        sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab\n        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit <a\n          href=\"https://hs-duesseldorf.de\" target=\"_self\">amet consectetu</a>r adipisicing elit. Quaerat iste voluptas debitis\n        illo labore laudantium dolore harum libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore\n        natus, impedit numquam?</p>\n      <figure class=\"table\">\n        <table>\n          <thead>\n            <tr>\n              <th>#</th>\n              <th><strong>First</strong></th>\n              <th><strong>Last</strong></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <th>1</th>\n              <td>Jan</td>\n              <td>Otto</td>\n            </tr>\n            <tr>\n              <th>2</th>\n              <td>Steve</td>\n              <td>Thornton</td>\n            </tr>\n            <tr>\n              <th>3</th>\n              <td>Larry</td>\n              <td>Meyer</td>\n            </tr>\n          </tbody>\n        </table>\n      </figure>\n      <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>\n      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius\n      corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,\n      sit amet consectetur adipisicing elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab quae. Debitis\n      eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet consectetur\n      adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat accusantium\n      asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>\n      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius\n      corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,\n      sit amet consectetur adipisicing elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab quae. Debitis\n      eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet consectetur\n      adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat accusantium\n      asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>\n      <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>\n      <ol>\n      <li>Liste 1</li>\n      <li>Liste 2</li>\n      <li>Liste 3</li>\n      </ol>\n      <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>\n      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius\n        corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,\n        sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab\n        quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet\n        consectetur adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat\n        accusantium asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>\n    "
}