Tabbed Page Examples

<div class="e-layout">
  <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">Page Title Goes Here</h1>
    <!-- optional actions -->
    <div class="e-layout__actions">
      <button type="button" class="e-layout__action e-btn">Button</button>
      <button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
    </div>
  </header>
  <main class="e-layout__content">
    <section class="e-layout__section e-layout__section-with_legacy_tabs">
      <div class="e-tabs">
        <div class="e-tabs__title">
          <div class="e-tabs__separator">Tab One</div>
        </div>
        <div class="e-tabs__title e-tabs__title-active">
          <div class="e-tabs__separator">Tab Two</div>
        </div>
        <div class="e-tabs__title">
          <div class="e-tabs__separator">Tab Three</div>
        </div>
        <div class="e-tabs__panel">
          <div class="e-tabs__panel__content e-tabs__panel__content-active">
            <h2>Heading Goes Here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui aliquam tenetur perspiciatis quas a eius exercitationem vel dolor quia atque quam rem magnam perferendis distinctio necessitatibus, deleniti cumque, dolores corrupti!</p>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>