Editor

We use this template to display editor layouts:

• no max-width,
• no page scrollbar,
• 1 or multiple .e-section elements

<div class="e-layout e-layout-fullheight">
  <header class="e-layout__header">
    <!-- optional back button -->
    <a href="#" class="e-layout__back">
      <e-layout-back-button>Go to Overview</e-layout-back-button>
    </a>
    <h1 class="e-layout__title">Overview</h1>
    <!-- optional actions -->
    <div class="e-layout__actions">
      <button class="e-layout__action e-btn" type="button">Button 1</button>
      <button class="e-layout__action e-btn e-btn-primary" type="button">Button 2</button>
    </div>
  </header>
  <main class="e-layout__content">
    <section class="e-layout__section">
      <!-- optional verticalnav component -->
      <div class="e-verticalnav e-verticalnav-fullheight">
        <e-verticalnav-menu>
          <e-verticalnav-menu-item></e-verticalnav-menu-item>
        </e-verticalnav-menu>
        <div class="e-verticalnav__content e-verticalnav__content-nopadding e-section">
          <header class="e-section__header">
            <h2 class="e-section__title">Section Header</h2>
            <!-- optional actions -->
            <div class="e-section__actions">
              <button class="e-btn e-btn-primary" type="button">Button</button>
            </div>
          </header>
          <div class="e-section__content">
            <!-- verticalnav content -->
          </div>
        </div>
      </div>
    </section>
    <section class="e-layout__section">
      <div class="e-section">
        <header class="e-section__header">
          <h2 class="e-section__title">Section Header</h2>
          <!-- optional actions -->
          <div class="e-section__actions">
            <button class="e-btn e-btn-primary" type="button">Button</button>
          </div>
        </header>
      </div>
      <div class="e-section__content">
        <!-- section content -->
      </div>
    </section>
  </main>
</div>

---

Sidebar

<div class="e-layout e-layout-fullheight">
  <header class="e-layout__header">
    <!-- optional back button -->
    <a href="#" class="e-layout__back">
      <e-layout-back-button>Go to Overview</e-layout-back-button>
    </a>
    <h1 class="e-layout__title">Overview</h1>
    <!-- optional actions -->
    <div class="e-layout__actions">
      <button class="e-layout__action e-btn" type="button">Button 1</button>
      <button class="e-layout__action e-btn e-btn-primary" type="button">Button 2</button>
    </div>
  </header>
  <main class="e-layout__content">
    <section class="e-layout__section e-layout__section-sidebar">
      <div class="e-section">
        <header class="e-section__header">
          <h2 class="e-section__title">Section Header</h2>
        </header>
      </div>
      <div class="e-section__content">
        <!-- section content -->
      </div>
    </section>
    <section class="e-layout__section">
      <div class="e-section">
        <header class="e-section__header">
          <h2 class="e-section__title">Section Header</h2>
        </header>
      </div>
      <div class="e-section__content">
        <!-- section content -->
      </div>
    </section>
  </main>
</div>