Form Page Examples

<div class="e-layout">
  <header class="e-layout__header e-layout__header-form">
    <!-- optional back button -->
    <a href="#" class="e-layout__back">
      <e-layout-back-button>Go to Page Title</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 e-layout__content-form">
    <!-- using a utility to add padding to content -->
    <section class="e-layout__section e-padding-l">
      <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 class="e-field">
        <label class="e-field__label" for="input01">Field Label 1</label>
        <input class="e-input e-input-large" id="input01" type="text" placeholder="Placeholder 1">
      </div>
      <div class="e-field">
        <label class="e-field__label" for="input02">Field Label 2</label>
        <input class="e-input e-input-large" id="input02" type="text" placeholder="Placeholder 2">
      </div>
      <div class="e-field">
        <label class="e-field__label" for="input03">Field Label 3</label>
        <input class="e-input e-input-large" id="input03" type="text" placeholder="Placeholder 3">
      </div>
      <div class="e-field">
        <label class="e-field__label" for="input04">Field Label 4</label>
        <textarea class="e-input e-input-textarea" placeholder="Placeholder 4" id="input04"></textarea>
      </div>
      <div class="e-buttongroup">
        <button class="e-btn e-btn-primary" type="submit">Submit</button>
        <button class="e-btn" type="submit">Cancel</button>
      </div>
    </section>
  </main>
</div>