Aeroporto di Bologna - Design System

Voucher Partial Form: Malfunction 

<div class="c-voucher-partial-form">

    <div class="c-voucher-partial-form__fieldset c-form">
        <div class="c-voucher-partial-form__control">
            <label for="malfunction-textarea-field" class="" aria-label="">
                Descrivi il malfunzionamento: <span class="required-marker" aria-hidden="true">*</span>
                <textarea id="malfunction-textarea-field" placeholder="" class="" rows="5" required aria-required="true" aria-describedby="malfunction-textarea-note"></textarea>
                <em class="c-field__note " id="malfunction-textarea-note">
                    Massimo 500 caratteri
                </em>
            </label>
        </div>
        <p class="u-typo-level-2 u-mt-space-32 u-mb-space-16">Se hai della documentazione a supporto della tua richiesta, puoi caricarla qui:</p>
        <div class="c-voucher-partial-form__control">
            <label for="input-file-malfunction" class="is-positive" aria-label="">

                Carica file (facoltativo)

                <input id="input-file-malfunction" 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>
        <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 c-form">
    <div class="c-voucher-partial-form__control">
      {{render "@textarea" textarea merge=true }}
    </div>
    <p class="u-typo-level-2 u-mt-space-32 u-mb-space-16">Se hai della documentazione a supporto della tua richiesta, puoi caricarla qui:</p>
    <div class="c-voucher-partial-form__control">
      {{render "@input--file" input-file-upload merge=true }}
    </div>
    <p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
  </div>
  {{!-- END FIELDSET --}}

</div>
 
{
  "textarea": {
    "label_id": "malfunction-textarea-field",
    "label_message": "Descrivi il malfunzionamento:",
    "label_class": "",
    "atom-textarea": {
      "id": "malfunction-textarea-field",
      "class": "",
      "rows": "5",
      "placeholder": null,
      "required": true,
      "hasNote": true,
      "describedby": "malfunction-textarea-note"
    },
    "note_id": "malfunction-textarea-note",
    "note_message": "Massimo 500 caratteri",
    "note_class": null
  },
  "input-file-upload": {
    "name": "input-file-malfunction",
    "label_id": "input-file-malfunction",
    "label_message": "Carica file (facoltativo)",
    "atom-input": {
      "id": "input-file-malfunction",
      "required": false
    },
    "note_message": "File accettati: .pdf, .png, .jpg. Dimensione massima 3MB"
  }
}
  • 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.