@ulu/frontend/lib/scss/components/_counter-list.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Numeric Counter List
  description: A standard ordered list styled with custom counters.
-->
<ol class="counter-list">
  <li>First item in the list.</li>
  <li>Second item with more content to demonstrate how the counter stays aligned.</li>
  <li>Third item.</li>
</ol>

<!-- @ulu-demo
  title: Alphabetical Counter List
  description: Using the `counter-list--alphabetical` modifier to use letters instead of numbers.
-->
<ol class="counter-list counter-list--alphabetical">
  <li>Analyze the requirements.</li>
  <li>Design the solution.</li>
  <li>Implement the features.</li>
</ol>

<!-- @ulu-demo
  title: Non-List Counter Elements
  description: You can also use the `counter-list__item` class on non-list elements (like divs).
-->
<div class="counter-list">
  <div class="counter-list__item">This is a div acting as a counter item.</div>
  <div class="counter-list__item">Another div in the counter flow.</div>
</div>