Sidebar

A layout that sets a flexible main content area and a "fixed" width sidebar that sits on the left or right. If there is not enough viewport space to fit both the sidebar width and the main content minimum width, they will stack.

Example

<div class="has-sidebar">
    <div class="bg-neutral p-block">I am the sidebar</div>
    <div class="flow bg-neutral p-block">
        <p>I am the content that has a sidebar</p>
        <p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.</p>
    </div>
</div>

Flipped

Use the data-direction="rtl" attribute to flip the sidebar to the right.

<div class="has-sidebar" data-direction="rtl">
    <div class="flow bg-neutral p-block">
        <p>I am the content that has a sidebar</p>
        <p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.</p>
    </div>
    <div class="bg-neutral p-block">I am the sidebar</div>
</div>