<ul class="challenges ">
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item, multiline content Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
</ul>
<ul class="challenges {{ modifier }} {{ class }}">
{% if data.items %}
{% for item in data.items %}
<li class="challenges__list-item animation__target">{{ item.content }}</li>
{% endfor %}
{% endif %}
</ul>
{
"language": "en-US",
"data": {
"items": [
{
"content": "Lorem ipsum dolor sit amet content of this item, multiline content Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
}
]
}
}
.challenges {
counter-reset: challenge_counter;
}
.challenges__list-item {
font-size: $font-size-small;
display: flex;
position: relative;
align-items: center;
padding-left: 52px;
& + * {
margin-top: 32px;
@include bp(sm-min) {
margin-top: 48px;
}
}
@include bp(sm-min) {
font-size: $font-size-base;
padding-left: 0;
}
&::before {
position: absolute;
left: 0;
top: 0;
counter-increment: challenge_counter;
content: counter(challenge_counter);
line-height: $line-height-base;
border: 1px solid currentColor;
border-radius: $border-radius-round;
margin-right: 16px;
padding: 4px 12px;
@include bp(sm-min) {
position: relative;
margin-right: 53px;
padding: 8px 19px;
}
}
.challenges--min-spacing & {
min-height: 37px;
& + * {
margin-top: 8px;
@include bp(sm-min) {
margin-top: 16px;
}
}
&::before {
@include bp(sm-min) {
margin-right: 24px;
}
}
}
}
import './challenges.scss';
<ul class="challenges challenges--min-spacing ">
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
<li class="challenges__list-item animation__target">Lorem ipsum dolor sit amet content of this item</li>
</ul>
<ul class="challenges {{ modifier }} {{ class }}">
{% if data.items %}
{% for item in data.items %}
<li class="challenges__list-item animation__target">{{ item.content }}</li>
{% endfor %}
{% endif %}
</ul>
{
"language": "en-US",
"data": {
"items": [
{
"content": "Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
},
{
"content": "Lorem ipsum dolor sit amet content of this item"
}
]
},
"modifier": "challenges--min-spacing"
}
.challenges {
counter-reset: challenge_counter;
}
.challenges__list-item {
font-size: $font-size-small;
display: flex;
position: relative;
align-items: center;
padding-left: 52px;
& + * {
margin-top: 32px;
@include bp(sm-min) {
margin-top: 48px;
}
}
@include bp(sm-min) {
font-size: $font-size-base;
padding-left: 0;
}
&::before {
position: absolute;
left: 0;
top: 0;
counter-increment: challenge_counter;
content: counter(challenge_counter);
line-height: $line-height-base;
border: 1px solid currentColor;
border-radius: $border-radius-round;
margin-right: 16px;
padding: 4px 12px;
@include bp(sm-min) {
position: relative;
margin-right: 53px;
padding: 8px 19px;
}
}
.challenges--min-spacing & {
min-height: 37px;
& + * {
margin-top: 8px;
@include bp(sm-min) {
margin-top: 16px;
}
}
&::before {
@include bp(sm-min) {
margin-right: 24px;
}
}
}
}
import './challenges.scss';