<ol>
    <li>
        In pellentesque tempor iaculis. Morbi ut malesuada orci. Vivamus eget ante id sem malesuada dictum. Donec eget nisl accumsan, luctus mi id, cursus enim. Donec iaculis est auctor, molestie dolor non, tempus metus.
    </li>
    <li>
        Vivamus sollicitudin id urna sed pharetra. Nullam a orci ut odio vulputate pellentesque. Mauris sodales at massa id bibendum. Morbi laoreet mauris sit amet sapien gravida, vel facilisis turpis sollicitudin. In ante felis, aliquet non justo eu, consectetur
        posuere elit. Maecenas arcu ex, aliquet id metus sed, dictum porttitor quam. Proin consequat sem non imperdiet interdum. Proin quis feugiat lacus, in malesuada enim. Sed vulputate ante vel tellus aliquet iaculis. Sed non lacus et quam maximus
        cursus eget eu tortor. Proin at ex lacus.
        <ol>
            <li>
                Pellentesque at ex eu felis ullamcorper porta. Aliquam ut ante at urna tempus tincidunt. Nulla semper dolor vel sem tempus, sit amet mattis magna pretium. Vestibulum nec volutpat ante, non fringilla urna. Donec ut feugiat neque, ut hendrerit nisi. Nullam
                tortor augue, suscipit ut eros vel, pellentesque vestibulum neque. Donec luctus purus vitae justo pretium ornare. Pellentesque venenatis libero ac turpis finibus sodales. Vivamus luctus nisi ac dui sodales, sit amet auctor diam volutpat.
                Donec placerat, mauris a sodales pretium, quam sem elementum ipsum, non gravida tellus diam vel lacus.
            </li>
        </ol>
    </li>
    <li>
        Vivamus convallis fermentum lectus nec sodales. Nunc aliquet finibus mattis. Nam in mollis eros. Praesent fermentum mollis dolor, ut gravida risus cursus eu. Ut sit amet aliquam ante. Donec volutpat lacus et gravida porta.
    </li>
    <li>
        Suspendisse eleifend tellus non enim efficitur malesuada. Quisque fermentum arcu vel lacinia aliquet. Sed lacus lectus, fringilla vitae lectus vel, semper venenatis sem. Proin mollis est in fringilla lobortis. Nullam sed quam sed massa pharetra porta.
        Sed ullamcorper sagittis ex eu laoreet. Vivamus auctor consequat sagittis.
    </li>
    <li>
        Nam feugiat porta urna, accumsan commodo turpis. In hac habitasse platea dictumst. Vivamus placerat erat quis bibendum efficitur. Vestibulum imperdiet quis erat a euismod.
    </li>
</ol>
<{{listType}}{{#if classes}} class="list list--{{listType}}{{#each classes}} {{this}}{{/each}}"{{/if}}>
  {{#each items}}
  <li{{#if ../classes}} class="list-item list-item--{{../listType}}{{#each classes}} {{this}}{{/each}}"{{/if}}>
    {{{value}}}
    {{#if items}}
    {{> '@list' this}}
    {{/if}}
  </li>
  {{/each}}
</{{listType}}>
{
  "listType": "ol",
  "items": [
    {
      "value": "In pellentesque tempor iaculis. Morbi ut malesuada orci. Vivamus eget ante id sem malesuada dictum. Donec eget nisl accumsan, luctus mi id, cursus enim. Donec iaculis est auctor, molestie dolor non, tempus metus."
    },
    {
      "value": "Vivamus sollicitudin id urna sed pharetra. Nullam a orci ut odio vulputate pellentesque. Mauris sodales at massa id bibendum. Morbi laoreet mauris sit amet sapien gravida, vel facilisis turpis sollicitudin. In ante felis, aliquet non justo eu, consectetur posuere elit. Maecenas arcu ex, aliquet id metus sed, dictum porttitor quam. Proin consequat sem non imperdiet interdum. Proin quis feugiat lacus, in malesuada enim. Sed vulputate ante vel tellus aliquet iaculis. Sed non lacus et quam maximus cursus eget eu tortor. Proin at ex lacus.",
      "listType": "ol",
      "items": [
        {
          "value": "Pellentesque at ex eu felis ullamcorper porta. Aliquam ut ante at urna tempus tincidunt. Nulla semper dolor vel sem tempus, sit amet mattis magna pretium. Vestibulum nec volutpat ante, non fringilla urna. Donec ut feugiat neque, ut hendrerit nisi. Nullam tortor augue, suscipit ut eros vel, pellentesque vestibulum neque. Donec luctus purus vitae justo pretium ornare. Pellentesque venenatis libero ac turpis finibus sodales. Vivamus luctus nisi ac dui sodales, sit amet auctor diam volutpat. Donec placerat, mauris a sodales pretium, quam sem elementum ipsum, non gravida tellus diam vel lacus."
        }
      ]
    },
    {
      "value": "Vivamus convallis fermentum lectus nec sodales. Nunc aliquet finibus mattis. Nam in mollis eros. Praesent fermentum mollis dolor, ut gravida risus cursus eu. Ut sit amet aliquam ante. Donec volutpat lacus et gravida porta."
    },
    {
      "value": "Suspendisse eleifend tellus non enim efficitur malesuada. Quisque fermentum arcu vel lacinia aliquet. Sed lacus lectus, fringilla vitae lectus vel, semper venenatis sem. Proin mollis est in fringilla lobortis. Nullam sed quam sed massa pharetra porta. Sed ullamcorper sagittis ex eu laoreet. Vivamus auctor consequat sagittis."
    },
    {
      "value": "Nam feugiat porta urna, accumsan commodo turpis. In hac habitasse platea dictumst. Vivamus placerat erat quis bibendum efficitur. Vestibulum imperdiet quis erat a euismod."
    }
  ]
}
  • Content:
    ol:not([class]),
    ul:not([class]) {
      margin: 15px 0;
      padding-left: 30px;
      color: $color-darkest;
      font-size: 1.9rem;
      letter-spacing: normal;
      line-height: 3.0rem;
    
      li {
        margin: 15px 0;
        padding-left: 10px;
      }
    
      li:first-child {
        margin-top: 0;
      }
    
      li:last-child {
        margin-bottom: 0;
      }
    }
    
    ul:not([class]) li {
      position: relative;
      list-style-type: none;
    
      &:before {
        position: absolute;
        top: 0;
        left: -10px;
        color: $color-medium-dark;
        font-size: 14px;
        content: '\2022';
      }
    }
    
  • URL: /components/raw/list/list.scss
  • Filesystem Path: src/components/01-elements/body-copy/list/list.scss
  • Size: 532 Bytes

There are no notes for this item.