Mozilla Protocol
  • 22.0.0

Main With Sidebar: Sidebar End

This example uses mzp-l-sidebar-end layout class. The sidebar will appear on the right in left-to-right (LTR) languages and on the left in 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-end">
  
    <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>