<ol class="list--dotted-decimal">
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
 </ol>
<ol class="list--{{ name }}">
  {{#each listItems as |item|}}
    <li>{{ item.text }}</li>
  {{/each}}
</ol>
{
  "listItems": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    }
  ],
  "name": "dotted-decimal"
}
  • Content:
    @counter-style circled-decimal {
      system: fixed 0;
      symbols: '\24EA' '\2460' '\2461' '\2462' '\2463' '\2464' '\2465' '\2466' '\2467' '\2468' '\2469' '\246A' '\246B' '\246C' '\246D' '\246E' '\246F' '\2470' '\2471' '\2472' '\2473' '\3251' '\3252' '\3253' '\3254' '\3255' '\3256' '\3257' '\3258' '\3259' '\325a' '\325b' '\325c' '\325d' '\325e' '\325f' '\32b1' '\32b2' '\32b3' '\32b4' '\32b5' '\32b6' '\32b7' '\32b8' '\32b9' '\32ba' '\32bb' '\32bc' '\32bd' '\32be' '\32bf';
      suffix: ' ';
      }
      
    @counter-style decimal-leading-zero {
      system: fixed;
      symbols: '\30\30' '\30\31' '\30\32' '\30\33' '\30\34' '\30\35' '\30\36' '\30\37' '\30\38' '\30\39';
    }
      
    @counter-style dotted-decimal {
      system: fixed;
      symbols: '\2488' '\2489' '\248A' '\248B' '\248C' '\248D' '\248E' '\248F' '\2490' '\2491' '\2492' '\2493' '\2494' '\2495' '\2496' '\2497' '\2498' '\2499' '\249A' '\249B';
      suffix: ' ';
    }
    
    @counter-style filled-circled-decimal {
    system: fixed;
    symbols: '\2776' '\2777' '\2778' '\2779' '\277a' '\277b' '\277c' '\277d' '\277e' '\277f' '\24EB' '\24EC' '\24ED' '\24EE' '\24EF' '\24F0' '\24F1' '\24F2' '\24F3' '\24F4';
    suffix: ' ';
    }
    
    ol {
      list-style: decimal
    }
    
    ol li::marker {
      font-size: 125%;
      color: var(--oklch-color-violet);
    }
    
    .list--circled-decimal {
      list-style-type: circled-decimal;
    }
    
    .list--decimal-leading-zero {
      list-style-type: decimal-leading-zero;
    }
    
    .list--dotted-decimal {
      list-style-type: dotted-decimal;
    }
    
    .list--filled-circled-decimal {
      list-style-type: filled-circled-decimal;
      }
      
    ol {
      list-style: decimal
    }
  • URL: /components/raw/numbered-list/numbered-list.css
  • Filesystem Path: src/components/01-atoms/10-list/numbered-list/numbered-list.css
  • Size: 1.6 KB

Ordered/numbered lists

The decimal list with leading 0 needs to start from 1, not 0

The lists in this example leverage the counter-style at-rule to create customized numbering schemes.