<ul class="list--">
     <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>
 </ul>
<ul class="list--{{ name }}">
  {{#each listItems as |item|}}
    <li>{{ item.text }}</li>
  {{/each}}
</ul>
{
  "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"
    }
  ]
}
  • Content:
    ul
    ul li::marker {
      color: rebeccapurple;
    }
    
    ul li {
      font-size: 125%;
      list-style: disc;
    }
    
  • URL: /components/raw/bulleted-list/bulleted-list.css
  • Filesystem Path: src/components/01-atoms/03-list/bulleted-list/bulleted-list.css
  • Size: 95 Bytes
  • Handle: @bulleted-list
  • Preview:
  • Filesystem Path: src/components/01-atoms/03-list/bulleted-list/bulleted-list.hbs

Ordered/numbered lists

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