Mozilla Protocol
  • 19.1.0

Main With Sidebar: Sidebar Right

This example uses mzp-l-sidebar-right layout class. The sidebar will appear on the left for right-to-left (RTL) languages.

Colored borders are for demonstration only. They are not part of the component styles.

<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-right">

    <main class="mzp-l-main">
        <p>Main content.</p>
        <p>The sidebar comes <strong>after</strong> the main section in the source order.</p>
    </main>

    <aside class="mzp-l-sidebar">
        <p>Sidebar content.</p>
    </aside>

</div>

<!-- Inline styles are for demo purposes only. Prefer external stylesheet in production. -->
<style>
    .mzp-l-main {
        border: 4px solid slateblue;
    }

    .mzp-l-sidebar {
        border: 4px solid lightseagreen;
    }
</style>