diff --git a/src/gatsby/code/vanilla/components/list/anything-column.js b/src/gatsby/code/vanilla/components/list/anything-column.js
index ea0def3c22f..aa47fc42dcd 100644
--- a/src/gatsby/code/vanilla/components/list/anything-column.js
+++ b/src/gatsby/code/vanilla/components/list/anything-column.js
@@ -9,15 +9,15 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<ul class="list-block list-default">
-  <li>
+<div class="list-block list-default">
+  <div>
     Lorem ipsum dolor sit amet.
-  </li>
-  <li>
+  </div>
+  <div>
     consectetur adipiscing elit.
-  </li>
-  <li>
+  </div>
+  <div>
     Cras placerat pellentesque pulvinar.
-  </li>
+  </div>
 </ul>
 `
diff --git a/src/gatsby/code/vanilla/components/list/anything-nested.js b/src/gatsby/code/vanilla/components/list/anything-nested.js
index 4200d13f10d..b55a83eb4c0 100644
--- a/src/gatsby/code/vanilla/components/list/anything-nested.js
+++ b/src/gatsby/code/vanilla/components/list/anything-nested.js
@@ -9,42 +9,42 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<ul class="list-block list-default">
-  <li>
-    <ul class="list list-default">
-      <li>
-        <ul class="list-block list-default">
-          <li>
+<div class="list-block list-default">
+  <div>
+    <div class="list list-default">
+      <div>
+        <div class="list-block list-default">
+          <div>
             Lorem ipsum dolor sit amet.
-          </li>
-          <li>
+          </div>
+          <div>
             consectetur adipiscing elit.
-          </li>
-          <li>
+          </div>
+          <div>
             Cras placerat pellentesque pulvinar.
-          </li>
-        </ul>
-      </li>
-      <li>
+          </div>
+        </div>
+      </div>
+      <div>
         consectetur adipiscing elit.
-      </li>
-      <li>
+      </div>
+      <div>
         Cras placerat pellentesque pulvinar.
-      </li>
-    </ul>
-  </li>
-  <li>
-    <ul class="list list-default">
-      <li>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="list list-default">
+      <div>
         Lorem ipsum dolor sit amet.
-      </li>
-      <li>
+      </div>
+      <div>
         consectetur adipiscing elit.
-      </li>
-      <li>
+      </div>
+      <div>
         Cras placerat pellentesque pulvinar.
-      </li>
-    </ul>
-  </li>
-</ul>
+      </div>
+    </div>
+  </div>
+</div>
 `
diff --git a/src/gatsby/code/vanilla/components/list/anything-row.js b/src/gatsby/code/vanilla/components/list/anything-row.js
index a2a65d3aac7..b0711ff34cb 100644
--- a/src/gatsby/code/vanilla/components/list/anything-row.js
+++ b/src/gatsby/code/vanilla/components/list/anything-row.js
@@ -9,15 +9,15 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<ul class="list list-default">
-  <li>
+<div class="list list-default">
+  <div>
     Lorem ipsum dolor sit amet.
-  </li>
-  <li>
+  </div>
+  <div>
     consectetur adipiscing elit.
-  </li>
-  <li>
+  </div>
+  <div>
     Cras placerat pellentesque pulvinar.
-  </li>
-</ul>
+  </div>
+</div>
 `
diff --git a/src/gatsby/code/vanilla/components/row/anything-column.js b/src/gatsby/code/vanilla/components/row/anything-column.js
index 7921b03139d..476d24baf1b 100644
--- a/src/gatsby/code/vanilla/components/row/anything-column.js
+++ b/src/gatsby/code/vanilla/components/row/anything-column.js
@@ -9,15 +9,15 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<ul class="row flex-direction-column">
-  <li>
+<div class="row flex-direction-column">
+  <div>
     Lorem ipsum dolor sit amet.
-  </li>
-  <li>
+  </div>
+  <div>
     consectetur adipiscing elit.
-  </li>
-  <li>
+  </div>
+  <div>
     Cras placerat pellentesque pulvinar.
-  </li>
-</ul>
+  </div>
+</div>
 `
diff --git a/src/gatsby/code/vanilla/components/row/anything-nested.js b/src/gatsby/code/vanilla/components/row/anything-nested.js
index c61098bd1e8..fbf92adf0f0 100644
--- a/src/gatsby/code/vanilla/components/row/anything-nested.js
+++ b/src/gatsby/code/vanilla/components/row/anything-nested.js
@@ -9,42 +9,42 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<ul class="row">
-  <li>
-    <ul class="row">
-      <li>
-        <ul class="row flex-direction-column">
-          <li>
+<div class="row">
+  <div>
+    <div class="row">
+      <div>
+        <div class="row flex-direction-column">
+          <div>
             Lorem ipsum dolor sit amet.
-          </li>
-          <li>
+          </div>
+          <div>
             consectetur adipiscing elit.
-          </li>
-          <li>
+          </div>
+          <div>
             Cras placerat pellentesque pulvinar.
-          </li>
-        </ul>
-      </li>
-      <li>
+          </div>
+        </div>
+      </div>
+      <div>
         consectetur adipiscing elit.
-      </li>
-      <li>
+      </div>
+      <div>
         Cras placerat pellentesque pulvinar.
-      </li>
-    </ul>
-  </li>
-  <li>
-    <ul class="row">
-      <li>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="row">
+      <div>
         Lorem ipsum dolor sit amet.
-      </li>
-      <li>
+      </div>
+      <div>
         consectetur adipiscing elit.
-      </li>
-      <li>
+      </div>
+      <div>
         Cras placerat pellentesque pulvinar.
-      </li>
-    </ul>
-  </li>
-</ul>
+      </div>
+    </div>
+  </div>
+</div>
 `
diff --git a/src/gatsby/code/vanilla/components/row/anything-row.js b/src/gatsby/code/vanilla/components/row/anything-row.js
index b0e10de5d61..60cefd1b72a 100644
--- a/src/gatsby/code/vanilla/components/row/anything-row.js
+++ b/src/gatsby/code/vanilla/components/row/anything-row.js
@@ -9,15 +9,15 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<ul class="row">
-  <li>
+<div class="row">
+  <div>
     Lorem ipsum dolor sit amet.
-  </li>
-  <li>
+  </div>
+  <div>
     consectetur adipiscing elit.
-  </li>
-  <li>
+  </div>
+  <div>
     Cras placerat pellentesque pulvinar.
-  </li>
+  </div>
 </ul>
 `