No notes defined.
<ol class="uol-typography-ol">
{% for item in items %}
<li class="uol-typography-ol__item">{{ item.content | safe }}</li>
{% endfor %}
</ol>
<ol class="uol-typography-ol">
<li class="uol-typography-ol__item">Cras Mollis Elit Vehicula</li>
<li class="uol-typography-ol__item">Risus Purus Consectetur</li>
<li class="uol-typography-ol__item">Consectetur Egestas Purus Tristique</li>
<li class="uol-typography-ol__item">Amet Parturient Risus Euismod</li>
<li class="uol-typography-ol__item">Vestibulum Malesuada Euismod Egestas</li>
</ol>
.uol-typography-ol {
@extend %text-size-paragraph;
list-style: none;
counter-reset: item;
padding-left: 2em;
.uol-typography-ol__item {
margin-bottom: 0.6em;
position: relative;
counter-increment: item;
&::before {
@extend %uol-font-sans-serif--bold;
content: counter(item) ".";
font-variant-numeric: lining-nums;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 2em;
transform: translateX(-126%);
text-align: right;
}
}
}
{
"items": [
{
"content": "Cras Mollis Elit Vehicula"
},
{
"content": "Risus Purus Consectetur"
},
{
"content": "Consectetur Egestas Purus Tristique"
},
{
"content": "Amet Parturient Risus Euismod"
},
{
"content": "Vestibulum Malesuada Euismod Egestas"
}
]
}