Aeroporto di Bologna - Design System

Voucher Partial Form: Double Payment

300 × 150 
<div class="c-voucher-partial-form">

    <div class="c-voucher-partial-form__fieldset">
        <p class="u-typo-level-2 u-typo-weight-bold u-mb-space-32">Per procedere al rimborso carica la seconda ricevuta del pagamento.</p>
        <div class="c-form">
            <div class="c-voucher-partial-form__control">
                <label for="input-payment-receipt" class="is-positive" aria-label="">

                    Ricevuta di pagamento <span class="required-marker" aria-hidden="true">*</span>

                    <input id="input-payment-receipt" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>

                    <p class="c-field__note " id="file-note">
                        File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
                    </p>

                </label>

                <p class="c-field__note" id="" aria-hidden="true">
                </p>

            </div>
            <div class="c-voucher-partial-form__control">
                <label for="double-payment-textarea-field" class="" aria-label="">
                    Info aggiuntive:
                    <textarea id="double-payment-textarea-field" placeholder="" class="" rows="5" aria-describedby="double-payment-textarea-note"></textarea>
                    <em class="c-field__note " id="double-payment-textarea-note">
                        Massimo 500 caratteri
                    </em>
                </label>
            </div>
        </div>
        <p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
    </div>

</div>
 
<div class="c-voucher-partial-form{{#if modifier}} {{ modifier }}{{/if}}">

  {{!-- FIELDSET --}}
  <div class="c-voucher-partial-form__fieldset">
    <p class="u-typo-level-2 u-typo-weight-bold u-mb-space-32">Per procedere al rimborso carica la seconda ricevuta del pagamento.</p>
    <div class="c-form">
      <div class="c-voucher-partial-form__control">
        {{render "@input--file" input-file-upload merge=true }}
      </div>
      <div class="c-voucher-partial-form__control">
        {{render "@textarea" textarea merge=true }}
      </div>
    </div>
    <p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
  </div>
  {{!-- END FIELDSET --}}

</div>
 
{
  "input-file-upload": {
    "name": "input-payment-receipt",
    "label_id": "input-payment-receipt",
    "label_message": "Ricevuta di pagamento",
    "atom-input": {
      "id": "input-payment-receipt"
    },
    "note_message": "File accettati: .pdf, .png, .jpg. Dimensione massima 3MB"
  },
  "textarea": {
    "label_id": "double-payment-textarea-field",
    "label_message": "Info aggiuntive:",
    "label_class": "",
    "atom-textarea": {
      "id": "double-payment-textarea-field",
      "class": "",
      "rows": "5",
      "placeholder": null,
      "required": false,
      "hasNote": true,
      "describedby": "double-payment-textarea-note"
    },
    "note_id": "double-payment-textarea-note",
    "note_message": "Massimo 500 caratteri",
    "note_class": null
  }
}
  • Content: 
    .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%;
  }

}
  • URL: /components/raw/voucher-partial-form/_voucher-partial-form.scss
  • Filesystem Path: src/views/03-organisms/voucher-partial-form/_voucher-partial-form.scss
  • Size: 280 Bytes

No notes defined.