Compressed content

‹ Back

For smaller areas such as tiles or panels we have the compressed class that tightens things up significantly. This class only determines spacing and will not style headings or lists.

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="compressed">
  <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>