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>

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


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

    .mzp-l-sidebar {
        border: 4px solid lightseagreen;