Springboard

List: Mixed 

<ol>
    <li>Ordered Item</li>
    <li>Ordered Item</li>
    <li>Ordered Item</li>
    <li>Ordered Item
        <ul>
            <li>Unordered Subitem</li>
            <li>Unordered Subitem</li>
            <li>Unordered Subitem</li>
        </ul>
    </li>
    <li>Item</li>
    <li>Item</li>
</ol>
 
<{{#if ordered}}ol{{else}}ul{{/if}}>
  {{#each items}}
  <li>{{ item.text }}
    {{~#if item.sublist~}}
    <{{#if item.sublist.ordered}}ol{{else}}ul{{/if}}>
      {{#each item.sublist.items}}
      <li>{{ item.text }}</li>
      {{/each}}
    </{{#if item.sublist.ordered}}ol{{else}}ul{{/if}}>
    {{/if}}</li>
  {{/each}}
</{{#if ordered}}ol{{else}}ul{{/if}}>
 
{
  "items": [
    {
      "item": {
        "text": "Ordered Item"
      }
    },
    {
      "item": {
        "text": "Ordered Item"
      }
    },
    {
      "item": {
        "text": "Ordered Item"
      }
    },
    {
      "item": {
        "text": "Ordered Item",
        "sublist": {
          "ordered": false,
          "items": [
            {
              "item": {
                "text": "Unordered Subitem"
              }
            },
            {
              "item": {
                "text": "Unordered Subitem"
              }
            },
            {
              "item": {
                "text": "Unordered Subitem"
              }
            }
          ]
        }
      }
    },
    {
      "item": {
        "text": "Item"
      }
    },
    {
      "item": {
        "text": "Item"
      }
    }
  ],
  "ordered": true
}
  • Content: 
    ol, ul {
  padding-left: 1.5em;
}

ol {
  list-style: decimal outside;

  ol {
    list-style: lower-alpha outside;
  }
}

li {
  margin-bottom: $line-height/2;

  > ol, ul {
    margin-top: $line-height/2;
    margin-bottom: $line-height/2;
  }
}
  • URL: /components/raw/list/_sass.scss
  • Filesystem Path: components/01-elements/01-text/03-list/_sass.scss
  • Size: 247 Bytes

There are no notes for this item.