<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<p class="u-typo-level-2 u-mb-space-32">Inserisci il codice del volo.</p>
<div grid="grid">
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
<label for="input-departure-date" class="is-datepicker" aria-label="Scegli la data di partenza del volo">
Data di partenza <span class="required-marker" aria-hidden="true">*</span>
<input id="input-departure-date" type="date" class="" placeholder="" value="">
</label>
</div>
</div>
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
<label for="input-flight-number" class="" aria-label="">
Numero volo <span class="required-marker" aria-hidden="true">*</span>
<input id="input-flight-number" type="text" class="" placeholder="" value="">
</label>
</div>
</div>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
</div>
<div class="c-selection__text">
<strong>Voucher elettronico parcheggi</strong>
<p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-20">
<label class="c-selection__label" for="voucher-20">
<span class="u-visuallyhidden"><strong>Voucher elettronico parcheggi</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
</div>
<div class="c-selection__text">
<strong>Riaccredito su [Carta di Credito]</strong>
<p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-44">
<label class="c-selection__label" for="credit-back-44">
<span class="u-visuallyhidden"><strong>Riaccredito su [Carta di Credito]</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-partial-form{{#if modifier}} {{ modifier }}{{/if}}">
{{!-- FIELDSET --}}
<div class="c-voucher-partial-form__fieldset c-form">
<p class="u-typo-level-2 u-mb-space-32">Inserisci il codice del volo.</p>
<div grid="grid">
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
{{> @input--date input-departure-date }}
</div>
</div>
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
{{> @input--default input-flight-number }}
</div>
</div>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
{{!-- END FIELDSET --}}
{{!-- SELECTION --}}
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
{{> @selection selection-voucher }}
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
{{> @selection selection-credit-back }}
</div>
</div>
</div>
</div>
{{!-- END SELECTION --}}
</div>
{
"selection-voucher": {
"modifier": "c-selection--responsive",
"text": "<strong>Voucher elettronico parcheggi</strong>",
"extra-text": "(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)",
"img": {
"src": "/images/svgs/stk-voucher.svg",
"alt": "Voucher digitale"
},
"input": {
"id": "voucher",
"name": "refund-option"
}
},
"selection-credit-back": {
"modifier": "c-selection--responsive",
"text": "<strong>Riaccredito su [Carta di Credito]</strong>",
"extra-text": "(Accredito entro 60 giorni dalla richiesta)",
"img": {
"src": "/images/svgs/stk-richiesta-rimborso.svg",
"alt": "Riaccredito"
},
"input": {
"id": "credit-back",
"name": "refund-option"
}
},
"input-departure-date": {
"name": "input-departure-date",
"label_id": "input-departure-date",
"label_message": "Data di partenza",
"label_class": "is-datepicker",
"atom-input": {
"id": "input-departure-date",
"type": "date",
"class": "",
"placeholder": null,
"required": true,
"hasNote": false
},
"screen-reader-text": "Scegli la data di partenza del volo"
},
"input-flight-number": {
"name": "input-flight-number",
"label_id": "input-flight-number",
"label_message": "Numero volo",
"label_class": "",
"atom-input": {
"id": "input-flight-number",
"type": "text",
"class": "",
"placeholder": "",
"required": true,
"hasNote": false
}
}
}
.c-voucher-partial-form__fieldset {
background-color: primary(sky, 10);
color: primary(night, 120);
padding: remify(24px) remify(16px);
border-radius: remify(12px);
}
.c-voucher-partial-form__selection-item {
height: 100%;
& > .c-selection {
height: 100%;
}
}
No notes defined.