<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>
<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>