<div class="c-selections " role="radiogroup" aria-label="">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk_partenza-bologna-80px.svg" alt="Youfirst in partenza">
</div>
<div class="c-selection__text">
Youfirst in partenza
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="service-type" id="service-type-1-12">
<label class="c-selection__label" for="service-type-1-12">
<span class="u-visuallyhidden">Youfirst in partenza</span>
</label>
<div class="c-selection__input"></div>
</div>
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk_generic-user.svg" alt="Youfirst andata e ritorno">
</div>
<div class="c-selection__text">
Youfirst andata e ritorno
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="service-type" id="service-type-2-26">
<label class="c-selection__label" for="service-type-2-26">
<span class="u-visuallyhidden">Youfirst andata e ritorno</span>
</label>
<div class="c-selection__input"></div>
</div>
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk_rientro-bologna-80px.svg" alt="Youfirst in arrivo">
</div>
<div class="c-selection__text">
Youfirst in arrivo
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="service-type" id="service-type-3-75">
<label class="c-selection__label" for="service-type-3-75">
<span class="u-visuallyhidden">Youfirst in arrivo</span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
<div class="c-selections {{ modifier }}" role="radiogroup" aria-label="{{ aria-label }}">
{{#each selection }}
{{> @selection }}
{{/each}}
</div>
{
"selection": [
{
"modifier": "c-selection--responsive",
"text": "Youfirst in partenza",
"img": {
"src": "/images/svgs/stk_partenza-bologna-80px.svg",
"alt": "Youfirst in partenza"
},
"input": {
"id": "service-type-1",
"name": "service-type"
}
},
{
"modifier": "c-selection--responsive",
"text": "Youfirst andata e ritorno",
"img": {
"src": "/images/svgs/stk_generic-user.svg",
"alt": "Youfirst andata e ritorno"
},
"input": {
"id": "service-type-2",
"name": "service-type"
}
},
{
"modifier": "c-selection--responsive",
"text": "Youfirst in arrivo",
"img": {
"src": "/images/svgs/stk_rientro-bologna-80px.svg",
"alt": "Youfirst in arrivo"
},
"input": {
"id": "service-type-3",
"name": "service-type"
}
}
]
}
.c-selections {
@include min-screen(bp(tablet)) {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.c-selection {
margin-bottom: remify(8px);
@include min-screen(bp(tablet)) {
flex: 0 1 32%;
}
}
}
No notes defined.