Ordered List
Ordered lists contain information where order should be emphasized.
Usage
An ordered list is created using the ol tag, and each list item starts with the li tag.
Add the class modifier to an Ordered List and this will style the incremented numbers.
To Override the colour, see the colour utilities section
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-ordered-list |
Default numbered styled list. |
slb-ordered-list--circle |
Numbered styled list with a circle background. |
.slb-ordered-list - Default numbered styled list.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
.slb-ordered-list.slb-ordered-list--circle - Numbered styled list with a circle background.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.
lists\list-ordered-styled.hbs
<ol class="[modifier class]">
<li class="slb-ordered-list__item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.</li>
<li class="slb-ordered-list__item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.</li>
<li class="slb-ordered-list__item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.</li>
<li class="slb-ordered-list__item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit.</li>
</ol>
Source:
components/_lists.scss