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>
@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);
}
}
/* No context defined. */