diff --git a/packages/core/addon/components/eui-steps/index.hbs b/packages/core/addon/components/eui-steps/index.hbs
index 35258ffc9..d7cbb0e16 100644
--- a/packages/core/addon/components/eui-steps/index.hbs
+++ b/packages/core/addon/components/eui-steps/index.hbs
@@ -1,3 +1,9 @@
-<div class="euiSteps" ...attributes>
+<div 
+
+   class={{class-names
+        "euiSteps"
+        status=(arg-or-default @status "incomplete")
+      }}
+ ...attributes>
   {{yield}}
 </div>
\ No newline at end of file
diff --git a/packages/core/docs/navigation/steps-demo/demo1.md b/packages/core/docs/navigation/steps-demo/demo1.md
index ce6441860..d1c1d78fd 100644
--- a/packages/core/docs/navigation/steps-demo/demo1.md
+++ b/packages/core/docs/navigation/steps-demo/demo1.md
@@ -2,28 +2,26 @@
 order: 1
 ---
 
-# Basic Steps
+<EuiText>
+<p><strong>EuiSteps</strong> presents procedural content in a numbered outline format. It is best used when presenting instructional content that must be conducted in a particular order. It requires a <EuiCode>title</EuiCode> and <EuiCode>children</EuiCode> to be present and will automatically increment the step number based on the initial <EuiCode>firstStepNumber</EuiCode>.</p>
+</EuiText>
 
 ```hbs template
 <EuiSteps>
-  <EuiStep
-    @step={{1}}
-    @title="Step 1"
-  >
-    You do this!
+  <EuiStep @step={{1}} @title='Step 1'>
+    Do this first
   </EuiStep>
-  <EuiStep
-    @step={{2}}
-    @title="Step 2"
-  >
-    You do that!
-  </EuiStep>
-  <EuiStep
-    @step={{3}}
-    @title="Step 3"
-    @status="danger"
-  >
-    You did what!?
+  <EuiStep @step={{2}} @title='Step 2'>
+    Then this
   </EuiStep>
 </EuiSteps>
+<EuiSpacer @size='m' />
+<EuiText>
+  <p>
+    Set
+    <EuiCode>firstStepNumber</EuiCode>
+    to continue step numbering after any type of break in the content
+  </p>
+</EuiText>
+<EuiSpacer @size='m' />
 ```
diff --git a/packages/core/docs/navigation/steps-demo/demo2.md b/packages/core/docs/navigation/steps-demo/demo2.md
index be459ad70..85f6e047b 100644
--- a/packages/core/docs/navigation/steps-demo/demo2.md
+++ b/packages/core/docs/navigation/steps-demo/demo2.md
@@ -1,63 +1,60 @@
 ---
-order: 2
+order: 4
 ---
 
 # Statuses
 
+<EuiText>
+<p>Steps can optionally include <EuiCode>status</EuiCode> prop that will alter the look of the number prefix. The options are <EuiCode>incomplete</EuiCode>, <EuiCode>complete</EuiCode>, <EuiCode>warning</EuiCode>, <EuiCode>danger</EuiCode>, <EuiCode>disabled</EuiCode> and <EuiCode>loading</EuiCode>. This is used mostly as a final step when you need to make some sort of final check.</p>
+</EuiText>
+
 ```hbs template
 <EuiSteps>
-  <EuiStep
-    @step={{1}}
-    @title="Step 1"
-  >
+  <EuiStep @step={{1}} @title='Step 1'>
     You do this!
   </EuiStep>
-  <EuiStep
-    @title="Step 2"
-    @status={{this.status}}
-    @step={{2}}
-  >
-    You did good! {{if (eq this.status "danger") "(or not)"}}
-    <EuiSubSteps>
-      Click the buttons below to change status!
+  <EuiStep @title='Step 2' @status={{this.status}} @step={{2}}>
+    We are fancy buttons just waiting to be pushed!
+    <div>
+      <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="danger" {{on "click" this.setDanger}}>
+          <EuiButton @color='danger' {{on 'click' this.setDanger}}>
             Set Danger
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="success" {{on "click" this.setComplete}}>
+          <EuiButton @color='success' {{on 'click' this.setComplete}}>
             Set Complete
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="warning" {{on "click" this.setWarning}}>
+          <EuiButton @color='warning' {{on 'click' this.setWarning}}>
             Set Warning
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="primary" {{on "click" this.setLoading}}>
+          <EuiButton @color='primary' {{on 'click' this.setLoading}}>
             Set Loading
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.setDisabled}}>
+          <EuiButtonEmpty {{on 'click' this.setDisabled}}>
             Set Disabled
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.setIncomplete}}>
+          <EuiButtonEmpty {{on 'click' this.setIncomplete}}>
             Set Incomplete
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.reset}}>
+          <EuiButtonEmpty {{on 'click' this.reset}}>
             Reset
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiSubSteps>
+    </div>
   </EuiStep>
 </EuiSteps>
 ```
diff --git a/packages/core/docs/navigation/steps-demo/demo3.md b/packages/core/docs/navigation/steps-demo/demo3.md
index 29214f0b7..fa0883c1a 100644
--- a/packages/core/docs/navigation/steps-demo/demo3.md
+++ b/packages/core/docs/navigation/steps-demo/demo3.md
@@ -1,28 +1,30 @@
 ---
-order: 3
+order: 5
 ---
 
 # Horizontal Steps
 
+<EuiText>
+<p>For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the <EuiCode>status</EuiCode> key to denote the user's progress.</p>
+<p>For horizontal steps, the <EuiCode>status</EuiCode> key defaults to <EuiCode>"incomplete"</EuiCode> and the default filled styling is reserved for indicating <EuiCode>"current"</EuiCode> status.</p>
+</EuiText>
+
 ```hbs template
 <EuiStepsHorizontal>
   <EuiStepHorizontal
-    @title="Cart"
+    @title='Completed step 1'
+    @status='complete'
     @step={{1}}
     @isComplete={{true}}
   />
+  <EuiStepHorizontal @title='Selected step 2' @step={{2}} @status='current' />
   <EuiStepHorizontal
-    @title="Shipping"
-    @step={{2}}
-    @isComplete={{true}}
-  />
-  <EuiStepHorizontal
-    @title="Payment Method"
+    @title='Incomplete step 3 which will wrap to the next line'
     @step={{3}}
-    @isSelected={{true}}
   />
   <EuiStepHorizontal
-    @title="Review Order"
+    @title='Disabled step 4'
+    @status='disabled'
     @step={{4}}
     @disabled={{true}}
   />
diff --git a/packages/core/docs/navigation/steps-demo/demo4.md b/packages/core/docs/navigation/steps-demo/demo4.md
new file mode 100644
index 000000000..46934bb0c
--- /dev/null
+++ b/packages/core/docs/navigation/steps-demo/demo4.md
@@ -0,0 +1,84 @@
+---
+order: 2
+---
+
+# Complex steps
+
+<EuiText>
+<p>If you need to call out a set of substeps that are not lines of code, most likely a <EuiCode>&lt;ol/&gt;</EuiCode>, wrap the block in a <EuiCode>&lt;EuiSubSteps/&gt;</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiSteps>
+  <EuiStep @step={{1}} @title='Step 1 has intro plus code snippet'>
+    <EuiText>
+      <p>Run this code snippet to install things.</p>
+    </EuiText>
+    <EuiSpacer />
+    <EuiCodeBlock @language='bash'>npm install</EuiCodeBlock>
+  </EuiStep>
+  <EuiStep @step={{2}} @title='Step 2 has sub steps'>
+    <EuiText>
+      <p>
+        In order to complete this step, do the following things{' '}
+        <strong>in order</strong>.
+      </p>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+      <p>Here are some bullet point reminders.</p>
+      <ul>
+        <li>Reminder 1</li>
+        <li>Reminder 2</li>
+        <li>Reminder 3</li>
+      </ul>
+    </EuiText>
+  </EuiStep>
+  <EuiStep @step={{3}} @title='Step 3 has an intro and one line instruction'>
+    <EuiText>
+      <p>
+        Now that you&apos;ve completed step 2, go find the{' '}
+        <EuiCode>thing</EuiCode>.
+      </p>
+      <p>
+        Go to
+        <strong>Overview &gt;&gt; Endpoints</strong>
+        note{' '}
+        <strong>Elasticsearch</strong>
+        as
+        <EuiCode>&lt;thing&gt;</EuiCode>.
+      </p>
+    </EuiText>
+  </EuiStep>
+  <EuiStep @step={{4}} @title='The last step has two options'>
+    <EuiText @size='s'>
+      <h3>
+        <strong>Option 1:</strong>
+        If you have this type of instance
+      </h3>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+      <h3>
+        <strong>Option 2:</strong>
+        If you have the other type of instance
+      </h3>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+    </EuiText>
+  </EuiStep>
+</EuiSteps>
+```
diff --git a/packages/core/docs/navigation/steps-demo/demo5.md b/packages/core/docs/navigation/steps-demo/demo5.md
new file mode 100644
index 000000000..d5d7d18c0
--- /dev/null
+++ b/packages/core/docs/navigation/steps-demo/demo5.md
@@ -0,0 +1,29 @@
+---
+order: 3
+---
+
+# Heading elements
+
+<EuiText>
+<p>To aid with accessibility and hierarchical headings, you can and should pass in a heading element to use for each step title. The example below shows that the logical heading element should be an <EuiCode>h2</EuiCode>and therefore adds <EuiCode>headingElement<span class="token verb keyword">=</span><span class="token conjunction variable">"</span>h2<span class="token conjunction variable">"</span></EuiCode> to the EuiSteps component.</p>
+<p>The style of the title will <strong>not</strong> be affected.</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiTitle size='l'>
+    <h1>Heading 1</h1>
+  </EuiTitle>
+
+  <EuiSpacer size='xl' />
+
+  <EuiSteps @headingElement='h2'>
+    <EuiStep @step={{1}} @title='Step 1'>
+      <EuiTitle @size='xs'>
+        <h3>Did you notice the step title is inside a Heading 2 element?</h3>
+      </EuiTitle>
+    </EuiStep>
+
+  </EuiSteps>
+</div>
+```