Link copied!

Steps Page Examples

<div class="e-layout e-layout-without_navigation">
  <header class="e-layout__header e-layout__header-form">

    <!-- 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">Workflow Name</h1>

    <!-- Page Actions -->
    <div class="e-layout__actions">
      <button type="button" class="e-layout__action e-btn e-btn-primary">Save</button>
    </div>

  </header>

  <main class="e-layout__content e-layout__content-form">
    <section class="e-layout__section e-padding-l">

<!-- Page Contents -->

<h2>Workflow Overview</h2>

<p>(Describe to the user what's the point of this workflow)</p>

<div class="e-checklist">
  <a class="e-checklist__item" href="#">
    <div class="e-checklist__status e-checklist__status-checked"></div>
    <div class="e-checklist__container">
      <div class="e-checklist__title">
        First Form Name
      </div>
      <div class="e-checklist__content">
        (Describe to the user what's the point of this form)
      </div>
    </div>
  </a>
  <a class="e-checklist__item" href="#">
    <div class="e-checklist__status e-checklist__status-checked"></div>
    <div class="e-checklist__container">
      <div class="e-checklist__title">
        Second Form Name
      </div>
      <div class="e-checklist__content">
        (Describe to the user what's the point of this form)
      </div>
    </div>
  </a>
  <a class="e-checklist__item" href="#">
    <div class="e-checklist__status e-checklist__status"></div>
    <div class="e-checklist__container">
      <div class="e-checklist__title">
        Third Form Name
          <span class="e-label e-label-danger e-margin-left-2xs">
            <e-icon class="e-label__icon" icon="e-error" color="white" type="small"></e-icon>
            Form Error
          </span>
      </div>
      <div class="e-checklist__content">
        (Describe to the user what's the point of this form)
      </div>
    </div>
  </a>
</div>

<div class="e-margin-top-l">
  <button class="e-btn e-btn-primary">
    Next Step
  </button>
</div>

<!-- Steps -->

<e-step-bar floating>
  <e-step label="Overview" selected></e-step>
  <e-step label="First Form"></e-step>
  <e-step label="Second Form"></e-step>
  <e-step label="Third Form" badge="!"></e-step>
  <e-step label="Finalize" icon="e-finish"></e-step>
</e-step-bar>

    </section>
  </main>

</div>
<div class="e-layout e-layout-with_steps">
  <header class="e-layout__header e-layout__header-form">

    <!-- 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">Workflow Name</h1>

    <!-- Page Actions -->
    <div class="e-layout__actions">
      <button type="button" class="e-layout__action e-btn e-btn-primary">Save</button>
    </div>

  </header>

  <main class="e-layout__content e-layout__content-form">
    <section class="e-layout__section e-padding-l">

<!-- Page Contents -->

<h2>First Form Name</h2>
<p>(Describe to the user what's the point of this form)</p>

<div class="e-field e-field-inline">
  <label class="e-field__label" for="input01">
    First Name
  </label>
  <input class="e-input" id="input01" type="text" placeholder="e.g. Joe" value="John">
</div>
<div class="e-field e-field-inline">
  <label class="e-field__label" for="input02">
    Last Name
  </label>
  <input class="e-input" id="input02" type="text" placeholder="e.g. Doe">
</div>

<div class="e-margin-top-l">
  <button class="e-btn">
    Previous Step
  </button>
  <button class="e-btn e-btn-primary">
    Next Step
  </button>
</div>

<!-- Steps -->

<e-step-bar floating>
  <e-step label="Overview"></e-step>
  <e-step label="First Form" selected></e-step>
  <e-step label="Second Form"></e-step>
  <e-step label="Third Form" badge="!"></e-step>
  <e-step label="Finalize" icon="e-finish"></e-step>
</e-step-bar>

    </section>
  </main>

</div>
<div class="e-layout e-layout-with_steps">
  <header class="e-layout__header e-layout__header-form">

    <!-- 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">Workflow Name</h1>

    <!-- Page Actions -->
    <div class="e-layout__actions">
      <button type="button" class="e-layout__action e-btn e-btn-primary">Save</button>
    </div>

  </header>

  <main class="e-layout__content e-layout__content-form">
    <section class="e-layout__section e-padding-l">

<!-- Page Contents -->

<h2>Finalize Workflow</h2>

<p>Here you can review the inputted data before proceeding to the end of the workflow.</p>

<h3 class="e-margin-top-xl">First Form Name</h3>
<table class="e-table e-table-bordered" data-e-version="2">
  <tbody>
    <tr>
      <td class="font-weight-bold e-table__col-medium">
        First Name
      </td>
      <td>
        John
      </td>
    </tr>
    <tr>
      <td class="font-weight-bold">
        Last Name
      </td>
      <td>
        <span class="text-color-gray-400">(Not set)</span>
      </td>
    </tr>
  </tbody>
</table>

<h3 class="e-margin-top-xl">Second Form Name</h3>
<table class="e-table e-table-bordered" data-e-version="2">
  <tbody>
    <tr>
      <td class="font-weight-bold e-table__col-medium">
       Text Input
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </td>
    </tr>
  </tbody>
</table>

<h3 class="e-margin-top-xl">Third Form Name</h3>
<table class="e-table e-table-bordered" data-e-version="2">
  <tbody>
    <tr>
      <td class="font-weight-bold e-table__col-medium">
        First Select
      </td>
      <td>
        Option 1
      </td>
    </tr>
    <tr>
      <td class="font-weight-bold">
        Second Select
      </td>
      <td>
        <span class="text-color-gray-400">(Not Set)</span>
        <span class="e-label e-label-danger e-margin-left-xs">
          <e-icon class="e-label__icon" icon="e-error" color="white" type="small"></e-icon>
          Missing Required Data
        </span>
      </td>
    </tr>
  </tbody>
</table>

<e-notification class="e-margin-top-xl" type="info">
  <e-notification-content>
    (Tell the user what's going to happen after they click the Complete Workflow button and the workflow is done.)
  </e-notification-content>
</e-notification>

<div class="e-margin-top-l">
  <button class="e-btn">
    Previous Step
  </button>
  <button class="e-btn e-btn-primary">
    Complete Workflow
  </button>
</div>

<!-- Steps -->

<e-step-bar floating>
  <e-step label="Overview"></e-step>
  <e-step label="First Form"></e-step>
  <e-step label="Second Form"></e-step>
  <e-step label="Third Form" badge="!"></e-step>
  <e-step label="Finalize" icon="e-finish" selected></e-step>
</e-step-bar>

    </section>
  </main>

</div>
<div class="e-layout e-layout-with_steps">
  <header class="e-layout__header e-layout__header-form">

    <!-- 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">Workflow Name</h1>
  </header>

  <main class="e-layout__content e-layout__content-form">
    <section class="e-layout__section e-padding-l">

      <!-- Page Contents -->
      <e-confetti size="large">
        <e-illustrated-message type="success">
          <e-icon icon="e-celebrate" size="large" color="inherit" slot="icon"></e-icon>
          <div slot="title">Workflow Completed</div>
          <div slot="description">(Describe to the user what happened, what's important to know going forward)</div>
          <button class="e-btn e-btn-highlight" slot="actions">Go to Overview</button>
        </e-illustrated-message>
      </e-confetti>

    </section>
  </main>

</div>
Copy Javascript
Copied to clipboard! 
document.querySelector('e-confetti').fire();