Link copied!

Editor Page Examples

<div class="e-layout e-layout-fullheight">
  <header class="e-layout__header">
    <a class="e-layout__back" href="#">
      <e-layout-back-button>Go to Page Title</e-layout-back-button>
    </a>
    <h1 class="e-layout__title">Page Title Goes Here</h1>
    <div class="e-layout__actions">
      <button class="e-layout__action e-btn" type="button">Button</button>
      <button class="e-layout__action e-btn e-btn-primary" type="button">Primary Action</button>
    </div>
  </header>
  <main class="e-layout__content">
    <section class="e-layout__section">
      <e-tab-bar vertical fullheight>
        <e-tab label="Tab One" icon="user">
          <e-tab-content>
            <div class="e-section">
              <div class="e-section__header">
                <div class="e-section__title">Heading</div>
                <div class="e-section__actions">
                  <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                  <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                </div>
              </div>
              <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
            </div>
          </e-tab-content>
        </e-tab>
        <e-tab label="Tab Two" icon="mobile" disabled>
          <e-tab-content>
            <div class="e-section">
              <div class="e-section__header">
                <div class="e-section__title">Heading Goes Here</div>
                <div class="e-section__actions">
                  <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                  <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                </div>
              </div>
              <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
            </div>
          </e-tab-content>
        </e-tab>
        <e-tab label="Tab Three" icon="e-track" badge="5">
          <e-tab-content>
            <div class="e-section">
              <div class="e-section__header">
                <div class="e-section__title">Track Page</div>
                <div class="e-section__actions">
                  <button class="e-btn e-btn-borderless" type="button">Button</button>
                </div>
              </div>
              <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
            </div>
          </e-tab-content>
        </e-tab>
      </e-tab-bar>
    </section>
    <section class="e-layout__section">
      <div class="e-section">
        <div class="e-section__header">
          <div class="e-section__title">Heading Goes Here</div>
          <div class="e-section__actions">
            <button class="e-btn e-btn-borderless" type="button">Button</button>
          </div>
        </div>
        <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
      </div>
    </section>
  </main>
</div>
<div class="e-layout e-layout-fullheight">
  <header class="e-layout__header">
    <a class="e-layout__back" href="#">
      <e-layout-back-button>Go to Page Title</e-layout-back-button>
    </a>
    <h1 class="e-layout__title">Page Title Goes Here</h1>
    <div class="e-layout__actions">
      <button class="e-layout__action e-btn" type="button">Button</button>
      <button class="e-layout__action e-btn e-btn-primary" type="button">Primary Action</button>
    </div>
  </header>
  <main class="e-layout__content">
    <section class="e-layout__section e-layout__section-sidebar">
      <div class="e-section__header">
        <div class="e-section__title">Heading Here</div>
        <div class="e-section__actions">
          <button class="e-btn e-btn-borderless" type="button">Button</button>
        </div>
      </div>
      <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </section>
    <section class="e-layout__section">
      <div class="e-section">
        <div class="e-section__header">
          <div class="e-section__title">Heading Goes Here</div>
          <div class="e-section__actions">
            <button class="e-btn e-btn-borderless" type="button">Button</button>
          </div>
        </div>
        <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
      </div>
    </section>
  </main>
</div>