diff --git a/server/documents/elements/step.html.eco b/server/documents/elements/step.html.eco
index e0f7e7836..fc736607e 100755
--- a/server/documents/elements/step.html.eco
+++ b/server/documents/elements/step.html.eco
@@ -56,12 +56,13 @@ type        : 'UI Element'
   <div class="example">
     <h4 class="ui header">Vertical</h4>
     <p>Vertical steps display each step stacked vertically</p>
+    <div class="ui ignored info message">Vertical steps items can include a <code>two line</code> variation to allow for long names or names with line breaks</div>
     <div class="ui vertical steps">
       <div class="ui step">
         Shipping
       </div>
-      <div class="ui active step">
-        Billing
+      <div class="ui active two line step">
+        Billing & <br> Order Confirmation
       </div>
       <div class="ui disabled step">
         Confirm Order
diff --git a/src/elements/step.less b/src/elements/step.less
index 8715df79d..925a16c7d 100755
--- a/src/elements/step.less
+++ b/src/elements/step.less
@@ -112,6 +112,17 @@
   display: block;
 }
 
+/* Two Line */
+.ui.vertical.steps .two.line.step {
+  line-height: 1.3;
+}
+.ui.vertical.steps .two.line.active.step:after {
+  border-top-width: 2.35em;
+  border-bottom-width: 2.35em;
+  border-left-width: 1.5em;
+}
+
+
 
 
 /*******************************