Page Content

No notes defined.

<h2>Page content</h2>
<div class="uol-col-container uol-col-debug">
  <div class="uol-page-width">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>

<h2>Page content with section nav</h2>
<div class="uol-col-container uol-col-debug">
  <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
   nav
  </div>
  <div class="uol-page-width">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>

<h2>Page content with wide content</h2>
<div class="uol-col-container uol-col-debug">
  <div class="uol-page-width--wide-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>
<div class="uol-col-container uol-col-debug">
  <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
   nav
  </div>
  <div class="uol-page-width--wide-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>

<h2>Page content with extra wide content</h2>
<div class="uol-col-container uol-col-debug">
  <div class="uol-page-width--x-wide-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>
<div class="uol-col-container uol-col-debug">
  <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
   nav
  </div>
  <div class="uol-page-width--x-wide-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>

<h2>Full width - never with a section nav</h2>
<div class="uol-col-container uol-col-debug">
  <div class="uol-page-width--full">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>

<h2>Index content</h2>
<div class="uol-col-container uol-col-debug">
  <div class="uol-page-width--index">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>
<div class="uol-col-container uol-col-debug">
  <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
   nav
  </div>
  <div class="uol-page-width--index">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>


<h2>Max width content</h2>
<div class="uol-col-container uol-col-debug">
  <div class="uol-page-width--max-width">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
    <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
    <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
    <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
    <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
  </div>
</div>
<h2>Page content</h2>
<div class="uol-col-container uol-col-debug">
    <div class="uol-page-width">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>

<h2>Page content with section nav</h2>
<div class="uol-col-container uol-col-debug">
    <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
        nav
    </div>
    <div class="uol-page-width">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>

<h2>Page content with wide content</h2>
<div class="uol-col-container uol-col-debug">
    <div class="uol-page-width--wide-content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>
<div class="uol-col-container uol-col-debug">
    <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
        nav
    </div>
    <div class="uol-page-width--wide-content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>

<h2>Page content with extra wide content</h2>
<div class="uol-col-container uol-col-debug">
    <div class="uol-page-width--x-wide-content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>
<div class="uol-col-container uol-col-debug">
    <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
        nav
    </div>
    <div class="uol-page-width--x-wide-content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>

<h2>Full width - never with a section nav</h2>
<div class="uol-col-container uol-col-debug">
    <div class="uol-page-width--full">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>

<h2>Index content</h2>
<div class="uol-col-container uol-col-debug">
    <div class="uol-page-width--index">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>
<div class="uol-col-container uol-col-debug">
    <div class="test-side uol-col uol-col-12 uol-col-l-3" style="background: red;">
        nav
    </div>
    <div class="uol-page-width--index">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>

<h2>Max width content</h2>
<div class="uol-col-container uol-col-debug">
    <div class="uol-page-width--max-width">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, nesciunt. Non facere enim quis consequuntur, possimus quod nulla reprehenderit beatae minus doloremque, fugit dolorum laudantium, blanditiis illo nostrum recusandae accusantium.</p>
        <p>Minima numquam ea hic cupiditate unde doloremque natus, optio iste inventore in earum deleniti id labore veniam eius assumenda nostrum provident voluptatem vitae, debitis praesentium dolores ex ut quod. Sed?</p>
        <p>Ipsam facere sed totam quos inventore vero. Possimus commodi magnam ullam consectetur rerum ipsa architecto eius labore atque voluptatem rem amet, expedita eaque ab obcaecati assumenda. Voluptatibus rem perspiciatis suscipit?</p>
        <p>Quod sed id qui vel doloremque? Ipsum tempore ut iste repudiandae quidem aut, doloremque quisquam sequi! Repellat veritatis provident, hic exercitationem beatae amet saepe libero, fugit, ab repudiandae suscipit ipsa.</p>
        <p>Facilis corrupti voluptatem necessitatibus fugiat nostrum labore cumque ea laborum possimus tempore. Inventore laboriosam quis, ab iure provident deserunt asperiores totam maxime ullam repellat necessitatibus. Dolor id accusantium deleniti corporis?</p>
    </div>
</div>
  • Content:
    @mixin page-width($width: "") {
      @extend .uol-col;
      @extend .uol-col-l-9;
    
      position: relative;
      flex-basis: calc(100% - #{$spacing-4});
      width: calc(100% - #{$spacing-4});
      padding: #{$spacing-2};
    
      .uol-col-debug & {
        background: rgba(rgb(161, 161, 239), 0.2);
        // border-left: 1px solid #333;
        // border-right: 1px solid #333;
      }
    
      // @if $width == "" {
        > * {
          .uol-col-debug & {
            // border-left: 1px solid #333;
            // border-right: 1px solid #333;
          }
    
          @include media(">=uol-media-s") {
            margin-left: calc(100% / 12 + #{$spacing-1 / 4});
            margin-right: calc(100% / 12 + #{$spacing-1 / 4});
          }
    
          @include media(">=uol-media-l") {
            margin-left: calc(100% / 9 + #{$spacing-1});
            margin-right: calc(100% / 9 + #{$spacing-1});
          }
    
          @include media(">=uol-media-xl") {
            margin-right: calc((100% / 9 * 2) + #{$spacing-2});
          }
        }
      // }
    
      @if $width == "wide" {
        > * {
          @include media(">=uol-media-xl") {
            margin-right: calc(100% / 9 + #{$spacing-1});
          }
        }
      }
    
      @if $width == "x-wide" {
        > * {
          @include media(">=uol-media-xl") {
            margin-right: 0;
          }
        }
    
        // Left align content when previous sibling is .uol-side-nav-container--populated
        .test-side + &,
        .uol-side-nav-container--populated + & {
          > * {
            @include media(">=uol-media-xl") {
              margin-right: calc(100% / 9 + #{$spacing-1});
              margin-left: 0;
            }
          }
        }
      }
    
      @if $width == "full" {
        @extend .uol-col-s-12;
    
        > * {
          @include media(">=uol-media-s") {
            margin-left: 0;
            margin-right: 0;
          }
        }
      }
    
      @if $width == "index" {
        @extend .uol-col-s-12;
        @extend .uol-col-l-9;
    
        > * {
          @include media(">=uol-media-s") {
            margin-left: calc(100% / 12 + #{$spacing-1 / 2});
            margin-right: calc(100% / 12 + #{$spacing-1 / 2});
          }
    
          @include media(">=uol-media-l") {
            margin-left: 0;
            margin-right: 0;
          }
        }
      }
    }
    
    .uol-page-width {
      @include page-width();
    }
    
      .uol-page-width--wide-content {
        @include page-width("wide");
      }
    
      .uol-page-width--x-wide-content {
        @include page-width("x-wide");
      }
    
      .uol-page-width--index {
        @include page-width("index");
      }
    
      .uol-page-width--full {
        @include page-width("full");
      }
    
      .uol-page-width--max-width {
        position: relative;
    
        @include media(">=uol-media-m") {
          padding: #{$spacing-4};
       }
    
    
        .uol-col-debug & {
          background: rgba(yellow, 0.5);
        }
      }
    
  • URL: /components/raw/uol-page-content/_page-width.scss
  • Filesystem Path: src/library/01-foundations/03-utilities/page-width/_page-width.scss
  • Size: 2.6 KB
  • Handle: @uol-page-content
  • Preview:
  • Filesystem Path: src/library/01-foundations/03-utilities/page-width/page-width.njk
/* No context defined. */