Make stepped list work without headings

scss/_patterns_lists.scss

@@ -244,11 +244,43 @@ $spv-list-item--inner: null;
     display: none;
   }
 
+  // Indent titles
+  $bullet-width: map-get($line-heights, default-text);
+  $bullet-width-mobile: map-get($line-heights, default-text);
+
   .p-stepped-list__title {
     @extend %numbered-step-title;
+
+    padding-left: $bullet-width-mobile + $sph-inner;
+
+    @media (min-width: $breakpoint-heading-threshold) {
+      padding-left: $bullet-width + $sph-inner;
+    }
+
+    &::before {
+      margin-right: $sph-inner;
+      width: $bullet-width-mobile;
+
+      @media (min-width: $breakpoint-heading-threshold) {
+        width: $bullet-width;
+      }
+    }
+  }
+
+  .p-stepped-list__title + .p-stepped-list__content {
+    margin-left: $bullet-width-mobile + $sph-inner;
+
+    @media (min-width: $breakpoint-heading-threshold) {
+      margin-left: $bullet-width + $sph-inner;
+    }
+  }
+
+  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
+    @media (min-width: $threshold-6-12-col) {
+      margin-left: 0;
+    }
   }
 
-  // Indent titles
   @for $i from 6 through 1 {
     // Bullet sizes for each heading level
     $bullet-width: map-get($line-heights, default-text);
@@ -284,12 +316,6 @@ $spv-list-item--inner: null;
       }
     }
   }
-
-  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
-    @media (min-width: $threshold-6-12-col) {
-      margin-left: 0;
-    }
-  }
 }
 
 @mixin vf-p-stepped-list-detailed {

templates/docs/examples/patterns/lists/lists-stepped-without-headings.html

@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped without headings{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+<ol class="p-stepped-list">
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Download the Ubuntu image for your device in your `Downloads` folder
+    </p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Insert your SD card or USB flash drive
+    </p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Identify its address by opening the “Disks” application and look for the “Device” line. If the line is in the <code>/dev/mmcblk0p1</code> format, then your drive address is: <code>/dev/mmcblk0</code>. If it is in the <code>/dev/sdb1</code> format, then the address is <code>/dev/sdb</code>
+    </p>
+  </li>
+
+  <li class="p-stepped-list__item">
+    <p class="p-stepped-list__title">
+      Unmount it by right-clicking its icon in the launcher bar, the eject icon in a file manager or the square icon in the “Disks” application
+    </p>
+  </li>
+</ol>
+{% endblock %}

templates/docs/patterns/lists.md

@@ -102,7 +102,13 @@ If you want to display a list of items that form a set of steps — like a
 tutorial or instructions — you can use the class `.p-stepped-list`.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped/" class="js-example">
-View example of the stepped list pattern
+View example of the stepped list pattern with headings
+</a></div>
+
+When the steps don't have headings use `<p>` paragraph as `.p-stepped-list__title`.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-stepped-without-headings/" class="js-example">
+View example of the stepped list without headings
 </a></div>
 
 ### Horizontal stepped