rivendellweb pattern library

Bulleted List 

<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: oklch(0.44 0.16 303);
}

ul li {
  font-size: 125%;
  list-style: disc;
}
  • URL: /components/raw/bulleted-list/bulleted-list.css
  • Filesystem Path: src/components/01-atoms/10-list/bulleted-list/bulleted-list.css
  • Size: 102 Bytes
  • Handle: @bulleted-list
  • Preview:
  • Filesystem Path: src/components/01-atoms/10-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.