EU System

Editor

The .ecl-editor CSS class is a helper you can use to automatically apply basic styles to the children — paragraphs, blockquotes, lists, tables, links — of a specific DOM element.

<div class="ecl-editor">
  <h1>H1 heading</h1>
  <h2>H2 heading</h2>
  <h3>H3 heading</h3>
  <h4>H4 heading</h4>
  <h5>H5 heading</h5>
  <p>This is a paragraph.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim finibus odio id eleifend. Ut gravida luctus nibh id pellentesque. Mauris venenatis tortor quam, eget volutpat tellus sollicitudin sit amet. In dapibus pulvinar aliquam. Sed pulvinar purus eros, scelerisque condimentum arcu cursus eu. In tincidunt vehicula egestas. Donec non gravida eros. Quisque laoreet sed ante sit amet rutrum. Proin a mi sed lectus sollicitudin bibendum et in odio. Nulla quis lectus mollis, facilisis orci non, finibus mauris. Praesent pretium laoreet lectus dignissim cursus. Etiam sit amet ex non ligula congue tempus non vitae sem. Cras ut bibendum est, quis faucibus diam. Proin ac ex a metus facilisis dictum id eget felis.</p>
  <p>Integer efficitur dapibus augue, fringilla rutrum enim volutpat sed. Nunc in mattis neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas hendrerit vitae urna sed condimentum. Cras id pretium arcu, ut vehicula enim. Suspendisse gravida elementum laoreet. Mauris vulputate tincidunt dapibus. Proin semper aliquam augue, vitae pharetra orci dictum sed. In molestie lobortis augue, eget tempus metus interdum et. Etiam id fringilla nisl.</p>
  <p>This is another paragraph.</p>
  <img src="../../assets/demo_images/nature-demo-1.jpg" alt"[put a descriptive text here]" />
  <h3>Blockquote</h3>
  <blockquote>
    <p>Hey! I'm a paragraph in a blockquote!</p>
  </blockquote>
  <blockquote>Hey! I'm a NOT in paragraph...</blockquote>
  <h3>Table</h3>
  <table>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Registration date</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>01/01/2016</td>
        <td><a href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>06/12/2016</td>
        <td><a href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
      </tr>
      <tr>
        <td>Jack Doe</td>
        <td>03/05/2017</td>
        <td><a href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
      </tr>
    </tbody>
  </table>
  <h3>Unordered list</h3>
  <ul>
    <li>Item 1</li>
    <li>Item 2
      <ul>
        <li>Item 2.1</li>
        <li>Item 2.2</li>
        <li>Item 2.3</li>
      </ul>
    </li>
  </ul>
  <h3>Ordered list</h3>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ol>
        <li>Item 3.1</li>
        <li>Item 3.2</li>
        <li>Item 3.3</li>
      </ol>
    </li>
  </ol>
</div>
/* No context defined for this component. */
<div class="ecl-editor">
  <h1>H1 heading</h1>
  <h2>H2 heading</h2>
  <h3>H3 heading</h3>
  <h4>H4 heading</h4>
  <h5>H5 heading</h5>
  <p>This is a paragraph.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim finibus odio id eleifend. Ut gravida luctus nibh id pellentesque. Mauris venenatis tortor quam, eget volutpat tellus sollicitudin sit amet. In dapibus pulvinar aliquam. Sed pulvinar purus eros, scelerisque condimentum arcu cursus eu. In tincidunt vehicula egestas. Donec non gravida eros. Quisque laoreet sed ante sit amet rutrum. Proin a mi sed lectus sollicitudin bibendum et in odio. Nulla quis lectus mollis, facilisis orci non, finibus mauris. Praesent pretium laoreet lectus dignissim cursus. Etiam sit amet ex non ligula congue tempus non vitae sem. Cras ut bibendum est, quis faucibus diam. Proin ac ex a metus facilisis dictum id eget felis.</p>
  <p>Integer efficitur dapibus augue, fringilla rutrum enim volutpat sed. Nunc in mattis neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas hendrerit vitae urna sed condimentum. Cras id pretium arcu, ut vehicula enim. Suspendisse gravida elementum laoreet. Mauris vulputate tincidunt dapibus. Proin semper aliquam augue, vitae pharetra orci dictum sed. In molestie lobortis augue, eget tempus metus interdum et. Etiam id fringilla nisl.</p>
  <p>This is another paragraph.</p>
  <img src="../../assets/demo_images/nature-demo-1.jpg" alt"[put a descriptive text here]" />
  <h3>Blockquote</h3>
  <blockquote>
    <p>Hey! I'm a paragraph in a blockquote!</p>
  </blockquote>
  <blockquote>Hey! I'm a NOT in paragraph...</blockquote>
  <h3>Table</h3>
  <table>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Registration date</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>01/01/2016</td>
        <td><a href="mailto:john.doe@mail.com">john.doe@mail.com</a></td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>06/12/2016</td>
        <td><a href="mailto:jane.doe@mail.com">jane.doe@mail.com</a></td>
      </tr>
      <tr>
        <td>Jack Doe</td>
        <td>03/05/2017</td>
        <td><a href="mailto:jack.doe@mail.com">jack.doe@mail.com</a></td>
      </tr>
    </tbody>
  </table>
  <h3>Unordered list</h3>
  <ul>
    <li>Item 1</li>
    <li>Item 2
      <ul>
        <li>Item 2.1</li>
        <li>Item 2.2</li>
        <li>Item 2.3</li>
      </ul>
    </li>
  </ul>
  <h3>Ordered list</h3>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ol>
        <li>Item 3.1</li>
        <li>Item 3.2</li>
        <li>Item 3.3</li>
      </ol>
    </li>
  </ol>
</div>