Update index.html

Added extended functionality example for use of start attribute for steps
wet-boew · Oct 31, 2024 · b51c49d · b51c49d
1 parent d6a526f
commit b51c49d
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/méli-mélo/2021-05-steps/index.html b/méli-mélo/2021-05-steps/index.html
@@ -37,6 +37,7 @@ <h2>On this page</h2>
       <li><a href="#sublist">Sub (nested) lists</a></li>
       <li><a href="#striped">Striped design</a></li>
       <li><a href="#stripedsub">Striped design for sub list</a></li>
+	  <li><a href="#startattr">Start attribute</a></li>
     </ul>
   </section>
   <section>
@@ -464,3 +465,36 @@ <h4>Header for step 4 (no striped design added for sub steps)</h4>
 &lt;/ol&gt;</code></pre>
     </details>
   </section>
+<section>
+    <h2 id="startattr">Start attribute</h2>
+    <p>The list pattern is customized to follow the value of the <code>start</code> attribute from 2 up to the number 10.</p>
+    <h3>Default steps list design</h3>
+    <p>This example has the <code>start</code> attribute value of 3.</p>
+    <ol class="lst-stps" start="3">
+      <li>
+        <h3><a href="#">Topic/task hyperlink text for step 1</a></h3>
+        <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+      </li>
+      <li>
+        <h3><a href="#">Topic/task hyperlink text for step 2</a></h3>
+        <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+      </li>
+      <li>
+        <h3><a href="#">Topic/task hyperlink text for step 3</a></h3>
+        <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+      </li>
+      <li>
+        <h3><a href="#">Topic/task hyperlink text for step 4</a></h3>
+        <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+      </li>
+    </ol>
+    <details>
+      <summary>View code</summary>
+      <pre><code>&lt;ol class="lst-stps" start="3"&gt;
+  &lt;li&gt;...&lt;/li&gt;
+  &lt;li&gt;...&lt;/li&gt;
+  &lt;li&gt;...&lt;/li&gt;
+  &lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+    </details>
+  </section>