Normal content / WYSIWYG

‹ Back

By default, ornament does not assume anything about content spacing, formatting or styling. It's entirely up to the document author to specify how things should be styled and spaced out. Luckily, this is super easy to do with content and spacing classes.


Catch-all content class

To style a large area of content you simply use the class content. This is usually applied to areas of content generated by a WYSIWYG editor. It will automatically space out and style headings, paragraphs, lists, images and everything else an editor spits out:

Heading one

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.

Heading two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!

Heading three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.

Heading four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.

Heading five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!

Heading six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

<div class="content">
  <h1>Heading one</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.</p>
  <h2>Heading two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!</p>
  <h3>Heading three</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.</p>
  <h4>Heading four</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.</p>
  <h5>Heading five</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!</p>
  <h6>Heading six</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.</p>
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
</div>

Only spacing by element

For cases in which you don't want to assign heading styles, but instead just space out the content, you can use content-spacing, which will space out the content based on their element types. This will omit all heading and list styles:

Heading one

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.

Heading two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!

Heading three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.

Heading four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.

Heading five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!

Heading six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

<div class="content-spacing">
  <h1>Heading one</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.</p>
  <h2>Heading two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!</p>
  <h3>Heading three</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.</p>
  <h4>Heading four</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.</p>
  <h5>Heading five</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!</p>
  <h6>Heading six</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.</p>
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
</div>

Only spacing by class

What if you wanted to space out the content but wanted to do so based on the heading-classes that they have, rather than their semantic tags? Well that's exactly what content-spacing-classes is for. It's exactly the same as content-spacing but willl spacing out a h2.heading-four based on the .heading-four rule rather than h2.

h1.heading-four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.

h2.heading-two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!

h3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.

h4.heading-six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.

h5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!

h6.heading-one

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.

  • Lorem
  • ipsum
  • dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  • sit
  • amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

  1. Lorem
  2. ipsum
  3. dolor
    • Lorem
    • ipsum
    • dolor
    • sit
    • amet
  4. sit
  5. amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.

<div class="content-spacing-classes">
  <h1 class="heading-four">h1.heading-four</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur fuga vitae numquam accusantium quam quidem ex impedit aperiam modi ab.</p>
  <h2 class="heading-two">h2.heading-two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, eligendi!</p>
  <h3>h3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius provident voluptas aspernatur at dolor, libero placeat eum beatae illum ducimus.</p>
  <h4 class="heading-six">h4.heading-six</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quo aliquam velit voluptas laborum eum quod in qui rerum possimus consequatur fugiat dolor alias eius, reiciendis repellat accusamus optio tenetur aspernatur veritatis perferendis, odio illo! Eveniet dolor earum porro est totam, minus adipisci quos exercitationem! Reprehenderit dolore ipsum repellat inventore.</p>
  <h5>h5</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, alias ullam, nesciunt earum distinctio recusandae odit obcaecati temporibus quasi rem!</p>
  <h6 class="heading-one">h6.heading-one</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum assumenda minus, minima odio cupiditate, nulla autem qui animi iste, modi aperiam. Officia eius quis, alias ipsam odio aliquid repellat.</p>
  <ul>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
  <ol>
    <li>Lorem </li>
    <li>ipsum </li>
    <li>dolor 
      <ul>
        <li>Lorem </li>
        <li>ipsum </li>
        <li>dolor </li>
        <li>sit </li>
        <li>amet</li>
      </ul>
    </li>
    <li>sit </li>
    <li>amet</li>
  </ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores repudiandae molestias excepturi non odio maiores beatae tenetur explicabo, blanditiis minus.</p>
</div>