<!-- Standard-Formular -->
<h3 class="headline headline--headline-1">
    Informationen anfordern
</h3>
<form class="form">
    <div class="form__inner">
        <div class="has-error has-feedback">
            <div class="validation-summary-errors">
                <ul class="list-group">
                    <li class="list-group-item list-group-item-danger"><span role="alert">Das Feld X ist erforderlich. Geben Sie einen Wert ein.</span></li>
                </ul>
            </div>
        </div>
        <fieldset class="form-group">
            <legend class="label u-hidden-visually">Geschlecht</legend>
            <div class="form-group__inner">
                <label class="radio">
  <input class="radio__input" type="radio" value="female" id="radio-f8af" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Frau</span>
</label>
                <label class="radio">
  <input class="radio__input" type="radio" value="male" id="radio-a853" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Mann</span>
</label>
            </div>
        </fieldset>
        <div class="form-group">
            <label class="label" for="forename">Vorname*</label>
            <div class="form-group__inner">
                <input class="input input--text input-validation-error" type="text" required="required" autocomplete="fname" id="forename" name="forename" /><span class="field-validation-error" role="alert">Fehlermeldung</span>
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="surname">Nachname*</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" required="required" autocomplete="lname" id="surname" name="surname" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="address-1">Straße, Hausnummer*</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" required="required" autocomplete="address-line1" id="address-1" name="address-1" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="address-2">Addresszusatz</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" autocomplete="address-line2" id="address-2" name="address-2" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="zip">PLZ*</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" required="required" autocomplete="postal-code" id="zip" name="zip" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="city">Ort*</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" required="required" autocomplete="city" id="city" name="city" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="mail">E-Mail*</label>
            <div class="form-group__inner">
                <input class="input input--email" type="email" required="required" autocomplete="email" id="mail" name="mail" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="mail-confirm">E-Mail bestätigen*</label>
            <div class="form-group__inner">
                <input class="input input--email" type="email" required="required" autocomplete="email" id="mail-confirm" name="mail-confirm" />
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="type">Ich bin</label>
            <div class="form-group__inner">
                <select class="select" id="type" name="type">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option>Arbeitnehmer</option>
  <option>Auszubildende</option>
  <option>Studierende</option>
  <option>Bezieher von ALG I/ II</option>
  <option>Bezieher einer gesetzl. Rente</option>
  <option>Beamte/Pensionäre</option>
  <option>Selbstständig Tätige</option>
  <option>Weitere Personengruppen</option>
</select>
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Angaben prüfen" />
        </div>
    </div>
</form>

<!-- Info-Formular -->
<h3 class="headline headline--headline-1">
    Gleich ausfüllen und mehr Infos bekommen
</h3>
<form class="form">
    <div class="form__inner">
        <fieldset class="form-group form-group--fullwide">
            <legend class="label u-hidden-visually">Mitgliedschaft</legend>
            <div class="form-group__inner">
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="membership" required="required" id="radio-1189" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte Mitglied der Krankenkasse hkk werden.</span>
</label>
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="info" required="required" id="radio-cfdf" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.</span>
</label>
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide">
            <legend class="label label--required label--large">Ich bin</legend>
            <div class="form-group__inner">
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="employee" required="required" id="radio-253e" name="status"/><span class="radio__indicator"></span><span class="radio__label">Arbeitnehmer oder selbstständig tätig.</span>
</label>
                <label class="radio radio--nextline">
  <input class="radio__input" type="radio" value="student" required="required" id="radio-3eae" name="status"/><span class="radio__indicator"></span><span class="radio__label">Student oder sonstiges (z.B. Künstler, Beamter).</span>
</label>
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide">
            <legend class="label label--required label--large">Persönliche Informationen</legend>
            <div class="form-group__inner">
                <label class="radio">
  <input class="radio__input" type="radio" value="female" id="radio-a9de" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Frau</span>
</label>
                <label class="radio">
  <input class="radio__input" type="radio" value="male" id="radio-573e" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Herr</span>
</label>
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide form-group--inline">
            <legend class="label u-hidden-visually">Name</legend>
            <div class="form-group__inner">
                <input class="input input--text" type="text" placeholder="Vorname*" required="required" autocomplete="fname" id="input-283d" name="name" />
                <input class="input input--text" type="text" placeholder="Nachname*" required="required" autocomplete="lname" id="input-d5e8" name="name" />
            </div>
        </fieldset>
        <div class="form-group form-group--fullwide">
            <label class="label" for="birthdate">Geburtsdatum</label>
            <div class="form-group__inner">
                <input class="input input--date" type="date" placeholder="Geburtsdatum*" required="required" autocomplete="birthdate" id="birthdate" name="birthdate" />
            </div>
        </div>
        <div class="form-group form-group--fullwide">
            <label class="label u-hidden-visually" for="address-1">Straße, Hausnummer</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" placeholder="Straße, Nr.*" required="required" autocomplete="address-line1" id="address-1" name="address-1" />
            </div>
        </div>
        <fieldset class="form-group form-group--fullwide form-group--inline">
            <legend class="label u-hidden-visually">PLZ und Ort</legend>
            <div class="form-group__inner">
                <input class="input input--text input--25" type="text" placeholder="PLZ*" required="required" autocomplete="zipcode" id="input-a45e" name="address-2" />
                <input class="input input--text input--75" type="text" placeholder="Ort*" required="required" autocomplete="city" id="input-90d1" name="address-2" />
            </div>
        </fieldset>
        <fieldset class="form-group form-group--fullwide form-group--inline">
            <legend class="label u-hidden-visually">E-Mail-Addresse und Telefonnummer</legend>
            <div class="form-group__inner">
                <input class="input input--email" type="email" placeholder="E-Mail-Adresse" autocomplete="email" id="input-c5be" name="contact" />
                <input class="input input--tel" type="tel" placeholder="Telefonnummer" autocomplete="telephone" id="input-c226" name="contact" />
            </div>
        </fieldset>
        <div class="form-group form-group--fullwide">
            <label class="label u-hidden-visually" for="privacy-policy">Datenschutzerklärung</label>
            <div class="form-group__inner">
                <label class="checkbox">
  <input class="checkbox__input" type="checkbox" value="1" required="required" id="privacy-policy" name="privacy-policy"/><span class="checkbox__indicator"></span><span class="checkbox__label"><span class="formatted-text">Ich akzeptiere die <a href="#">Datenschutzerklärung</a>.*</span></span>
</label>
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Abschicken" />
        </div>
    </div>
</form>

<!-- Mini-Formular -->
<form class="form form--inline">
    <div class="form__inner">
        <div class="form-group">
            <label class="label u-hidden-visually" for="email">E-Mail</label>
            <div class="form-group__inner">
                <input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Weiter" />
        </div>
    </div>
</form>

<!-- Inline-Formular -->
<form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
    <div class="form__inner">
        <div class="form-group">
            <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
            <div class="form-group__inner">
                <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="aok-bayern">AOK Bayern</option>
  <option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Vorteil berechnen" />
        </div>
    </div>
</form>

<!-- Inline-Formular -->
<form class="form form--inline">
    <div class="form__inner">
        <div class="form-group">
            <label class="label" for="gross-income"></label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" placeholder="Suchbegriff eingeben" required="required" id="gross-income" name="gross-income" />
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Finden" />
        </div>
    </div>
</form>

<!-- Inline-Formular (Button nächste Zeile) -->
<form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
    <div class="form__inner">
        <div class="form-group">
            <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
            <div class="form-group__inner">
                <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="aok-bayern">AOK Bayern</option>
  <option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
            </div>
        </div>
        <div class="form-group">
            <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
            <div class="form-group__inner">
                <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
            </div>
        </div>
        <div class="form__submit form__submit--nextline">
            <input class="button button--blue" type="submit" value="Vorteil berechnen" />
        </div>
    </div>
</form>

<!-- Inline-Formular (Ohne Rand) -->
<form class="form form--inline">
    <div class="form__inner">
        <div class="form-group">
            <label class="label" for="gross-income"></label>
            <div class="form-group__inner">
                <input class="input input--text input--borderless" type="text" placeholder="Diagnoseschlüssel eingeben (z. B. A05.9)" required="required" id="gross-income" name="gross-income" />
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Finden" />
        </div>
    </div>
</form>

<!-- Multiline-Formular (Ohne Rand und mit Footer) -->
<form class="form form--multiline">
    <div class="form__inner">
        <div class="form__elements">
            <div class="form-group">
                <label class="label" for="gross-income"></label>
                <div class="form-group__inner">
                    <input class="input input--text input--borderless input--small" type="text" placeholder="Ort" required="required" id="gross-income" name="gross-income" />
                </div>
            </div>
            <div class="form-group">
                <label class="label" for="current-health-insurance"></label>
                <div class="form-group__inner">
                    <select class="select select--borderless select--small" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option>Berlin (1234)</option>
  <option>Hamburg (1222)</option>
</select>
                </div>
            </div>
        </div>
        <div class="form__submit">
            <input class="button button--blue" type="submit" value="Finden" />
        </div>
    </div>
    <footer class="form__footer">
        <h3 class="headline form__footer-headline headline--headline-1">25 Suchergebnisse
        </h3>
    </footer>
</form>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  if (id) attr.id = id;
  if (action) attr.action = action;

  //- Process options
  if (inline) attr.class.push('form--inline');
  if (multiline) attr.class.push('form--multiline');
  if (hasInfo) attr.class.push('form--has-info');
  if (centered) attr.class.push('form--centered');
  if (wide) attr.class.push('form--wide');

//- Show title of form
if title
  != include('@headline--headline-1', {level: 3, text: title})

//- Render form
form.form&attributes(attr)
  .form__inner
    if errorExample
      .has-error.has-feedback
        .validation-summary-errors
          ul.list-group
            li.list-group-item.list-group-item-danger
              span(role='alert') Das Feld X ist erforderlich. Geben Sie einen Wert ein.
    //- Render form groups
    if elements

      //- Multiline
      if multiline
        .form__elements
          for element in elements
            != include('@form-group', element)

      //- Default
      else
        for element in elements
          != include('@form-group', element)

    //- Render submit button
    if submit
      -
        //- Submit attributes
        submitAttr = submitAttr || {}
        submitAttr.class = classList(submitAttr.class);

        //- Submit options
        submitOptions = submitOptions || {};
        submitOptions.text = submit;

        //- Multiline submit
        if (submitOptions.nextLine) submitAttr.class.push('form__submit--nextline');

        //- Hideable
        if (submitOptions.hideable) submitAttr['data-hideable'] = true;

      .form__submit&attributes(submitAttr)
        input.button.button--blue(type='submit', value=submit)
        //- != include('@button--blue', submitOptions)

  //- Footer
  if footer
    footer.form__footer
      != renderPug(footer.content)
/* Standard-Formular */
{
  "title": "Informationen anfordern",
  "submit": "Angaben prüfen",
  "errorExample": true,
  "elements": [
    {
      "label": "Geschlecht",
      "name": "gender",
      "labelSettings": {
        "hidden": true
      },
      "group": [
        {
          "use": "radio",
          "settings": {
            "text": "Frau",
            "value": "female"
          }
        },
        {
          "use": "radio",
          "settings": {
            "text": "Mann",
            "value": "male"
          }
        }
      ]
    },
    {
      "label": "Vorname*",
      "id": "forename",
      "use": "input--text",
      "settings": {
        "error": true,
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "fname"
        }
      }
    },
    {
      "label": "Nachname*",
      "id": "surname",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "lname"
        }
      }
    },
    {
      "label": "Straße, Hausnummer*",
      "id": "address-1",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "address-line1"
        }
      }
    },
    {
      "label": "Addresszusatz",
      "id": "address-2",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "attr": {
          "autocomplete": "address-line2"
        }
      }
    },
    {
      "label": "PLZ*",
      "id": "zip",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "postal-code"
        }
      }
    },
    {
      "label": "Ort*",
      "id": "city",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "city"
        }
      }
    },
    {
      "label": "E-Mail*",
      "id": "mail",
      "use": "input--email",
      "settings": {
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "email"
        }
      }
    },
    {
      "label": "E-Mail bestätigen*",
      "id": "mail-confirm",
      "use": "input--email",
      "settings": {
        "placeholder": null,
        "required": true,
        "attr": {
          "autocomplete": "email"
        }
      }
    },
    {
      "label": "Ich bin",
      "id": "type",
      "use": "select",
      "settings": {
        "options": [
          "Arbeitnehmer",
          "Auszubildende",
          "Studierende",
          "Bezieher von ALG I/ II",
          "Bezieher einer gesetzl. Rente",
          "Beamte/Pensionäre",
          "Selbstständig Tätige",
          "Weitere Personengruppen"
        ]
      }
    }
  ]
}

/* Info-Formular */
{
  "title": "Gleich ausfüllen und mehr Infos bekommen",
  "submit": "Abschicken",
  "elements": [
    {
      "label": "Mitgliedschaft",
      "name": "subject",
      "labelSettings": {
        "hidden": true
      },
      "fullwide": true,
      "group": [
        {
          "use": "radio",
          "settings": {
            "text": "Ja, ich möchte Mitglied der Krankenkasse hkk werden.",
            "value": "membership",
            "required": true,
            "nextline": true
          }
        },
        {
          "use": "radio",
          "settings": {
            "text": "Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.",
            "value": "info",
            "required": true,
            "nextline": true
          }
        }
      ]
    },
    {
      "label": "Ich bin",
      "labelSettings": {
        "required": true,
        "modifier": "large"
      },
      "name": "status",
      "fullwide": true,
      "group": [
        {
          "use": "radio",
          "settings": {
            "required": true,
            "nextline": true,
            "text": "Arbeitnehmer oder selbstständig tätig.",
            "value": "employee"
          }
        },
        {
          "use": "radio",
          "settings": {
            "required": true,
            "nextline": true,
            "text": "Student oder sonstiges (z.B. Künstler, Beamter).",
            "value": "student"
          }
        }
      ]
    },
    {
      "label": "Persönliche Informationen",
      "name": "gender",
      "labelSettings": {
        "required": true,
        "modifier": "large"
      },
      "fullwide": true,
      "group": [
        {
          "use": "radio",
          "settings": {
            "text": "Frau",
            "value": "female"
          }
        },
        {
          "use": "radio",
          "settings": {
            "text": "Herr",
            "value": "male"
          }
        }
      ]
    },
    {
      "label": "Name",
      "name": "name",
      "labelSettings": {
        "hidden": true
      },
      "inline": true,
      "fullwide": true,
      "group": [
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Vorname*",
            "required": true,
            "attr": {
              "autocomplete": "fname"
            }
          }
        },
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Nachname*",
            "required": true,
            "attr": {
              "autocomplete": "lname"
            }
          }
        }
      ]
    },
    {
      "label": "Geburtsdatum",
      "id": "birthdate",
      "use": "input--text",
      "fullwide": true,
      "settings": {
        "placeholder": "Geburtsdatum*",
        "required": true,
        "type": "date",
        "attr": {
          "autocomplete": "birthdate"
        }
      }
    },
    {
      "label": "Straße, Hausnummer",
      "labelSettings": {
        "hidden": true
      },
      "id": "address-1",
      "use": "input--text",
      "fullwide": true,
      "settings": {
        "placeholder": "Straße, Nr.*",
        "required": true,
        "attr": {
          "autocomplete": "address-line1"
        }
      }
    },
    {
      "label": "PLZ und Ort",
      "name": "address-2",
      "labelSettings": {
        "hidden": true
      },
      "inline": true,
      "fullwide": true,
      "group": [
        {
          "use": "input--text",
          "settings": {
            "placeholder": "PLZ*",
            "required": true,
            "size": 25,
            "attr": {
              "autocomplete": "zipcode"
            }
          }
        },
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Ort*",
            "required": true,
            "size": 75,
            "attr": {
              "autocomplete": "city"
            }
          }
        }
      ]
    },
    {
      "label": "E-Mail-Addresse und Telefonnummer",
      "name": "contact",
      "labelSettings": {
        "hidden": true
      },
      "inline": true,
      "fullwide": true,
      "group": [
        {
          "use": "input--text",
          "settings": {
            "placeholder": "E-Mail-Adresse",
            "type": "email",
            "attr": {
              "autocomplete": "email"
            }
          }
        },
        {
          "use": "input--text",
          "settings": {
            "placeholder": "Telefonnummer",
            "type": "tel",
            "attr": {
              "autocomplete": "telephone"
            }
          }
        }
      ]
    },
    {
      "label": "Datenschutzerklärung",
      "labelSettings": {
        "hidden": true
      },
      "id": "privacy-policy",
      "use": "checkbox",
      "fullwide": true,
      "settings": {
        "text": null,
        "html": "span.formatted-text Ich akzeptiere die #[a(href='#') Datenschutzerklärung].*\n",
        "required": true
      }
    }
  ]
}

/* Mini-Formular */
{
  "title": null,
  "submit": "Weiter",
  "inline": true,
  "elements": [
    {
      "label": "E-Mail",
      "id": "email",
      "use": "input--email",
      "labelSettings": {
        "hidden": true
      },
      "settings": {
        "placeholder": "E-Mail-Adresse",
        "required": true,
        "attr": {
          "autocomplete": "email"
        }
      }
    }
  ]
}

/* Inline-Formular */
{
  "attr": {
    "action": "/templates/vorteilsrechner.html",
    "method": "get"
  },
  "inline": true,
  "submit": "Vorteil berechnen",
  "submitOptions": {
    "modifier": "red",
    "link": null,
    "submit": true
  },
  "elements": [
    {
      "label": "Aktuelle Krankenkasse",
      "id": "current-health-insurance",
      "use": "select",
      "settings": {
        "required": true,
        "options": [
          {
            "value": "aok-bayern",
            "text": "AOK Bayern"
          },
          {
            "value": "bkk-akzo-nobel-bayern",
            "text": "BKK Akzo Nobel Bayern"
          }
        ]
      }
    },
    {
      "label": "Mtl. Bruttoeinkommen",
      "id": "gross-income",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "required": true
      }
    }
  ]
}

/* Inline-Formular */
{
  "inline": true,
  "submit": "Finden",
  "submitOptions": {
    "modifier": "blue"
  },
  "elements": [
    {
      "label": null,
      "id": "gross-income",
      "use": "input--text",
      "settings": {
        "placeholder": "Suchbegriff eingeben",
        "required": true
      }
    }
  ]
}

/* Inline-Formular (Button nächste Zeile) */
{
  "attr": {
    "action": "/templates/vorteilsrechner.html",
    "method": "get"
  },
  "inline": true,
  "submit": "Vorteil berechnen",
  "submitOptions": {
    "modifier": "red",
    "nextLine": true,
    "link": null,
    "submit": true
  },
  "elements": [
    {
      "label": "Aktuelle Krankenkasse",
      "id": "current-health-insurance",
      "use": "select",
      "settings": {
        "required": true,
        "options": [
          {
            "value": "aok-bayern",
            "text": "AOK Bayern"
          },
          {
            "value": "bkk-akzo-nobel-bayern",
            "text": "BKK Akzo Nobel Bayern"
          }
        ]
      }
    },
    {
      "label": "Mtl. Bruttoeinkommen",
      "id": "gross-income",
      "use": "input--text",
      "settings": {
        "placeholder": null,
        "required": true
      }
    }
  ]
}

/* Inline-Formular (Ohne Rand) */
{
  "inline": true,
  "submit": "Finden",
  "submitOptions": {
    "modifier": "blue"
  },
  "elements": [
    {
      "label": null,
      "id": "gross-income",
      "use": "input--text",
      "settings": {
        "placeholder": "Diagnoseschlüssel eingeben (z. B. A05.9)",
        "required": true,
        "borderless": true
      }
    }
  ]
}

/* Multiline-Formular (Ohne Rand und mit Footer) */
{
  "multiline": true,
  "submit": "Finden",
  "submitOptions": {
    "modifier": "blue"
  },
  "elements": [
    {
      "label": null,
      "id": "gross-income",
      "use": "input--text",
      "settings": {
        "size": "small",
        "placeholder": "Ort",
        "required": true,
        "borderless": true
      }
    },
    {
      "label": null,
      "id": "current-health-insurance",
      "use": "select",
      "settings": {
        "size": "small",
        "required": true,
        "borderless": true,
        "options": [
          "Berlin (1234)",
          "Hamburg (1222)"
        ]
      }
    }
  ],
  "footer": {
    "content": "!= include('@headline--headline-1', {attr: {class: 'form__footer-headline'}, level: 3, text: '25 Suchergebnisse'})\n"
  }
}

  • Content:
    .form {
      margin-bottom: 2rem;
      margin-top: 2rem;
    }
    
    .form__submit {
      height: 4.5rem;
      margin: 3rem 0 4.5rem;
    
      @include mq($from: m) {
        margin: 4.5rem 0;
      }
    }
    
    .form__footer {
      border-top: 1px solid rgba($color-anthracite, 0.2);
      margin-top: 1rem;
      padding-top: 2rem;
    
      @include mq($from: m) {
        .form__footer-headline {
          margin-bottom: 0;
        }
      }
    }
    
    .form__footer-icon-list {
      font-size: 1.5rem;
      margin-top: -0.5rem;
    }
    
    .form--has-info {
      padding-right: 3rem;
    }
    
    .form--centered {
      margin: 2rem auto;
      max-width: 54rem;
    
      &.form--has-info {
        max-width: 57rem;
      }
    
      &.form--wide {
        max-width: 74rem;
      }
    }
    
    .form--inline {
      margin: 0;
    
      .form__inner {
        align-content: stretch;
        align-items: flex-end;
        display: flex;
        flex-wrap: wrap;
        margin-left: -1rem;
        margin-right: -1rem;
      }
    
      .form__submit {
        margin-bottom: 2rem;
        margin-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
      }
    
      .form__submit--nextline {
        margin-bottom: 0;
        width: 100%;
      }
    
      .form__submit--right {
        @include mq($from: m) {
          text-align: right;
        }
      }
    }
    
    .form--multiline {
      margin: 0;
    
      .form__inner {
        display: flex;
    
        @include mq($until: m) {
          flex-wrap: wrap;
        }
      }
    
      .form__elements {
        width: 100%;
      }
    
      .form__submit {
        align-self: flex-end;
        margin-bottom: 2rem;
        margin-top: 0;
    
        @include mq($from: m) {
          margin-left: 2rem;
        }
      }
    }
    
    .validation-summary-errors {
      .list-group-item-danger {
        color: $color-red;
      }
    }
    
  • URL: /components/raw/form/form.scss
  • Filesystem Path: src/components/organisms/form/form.scss
  • Size: 1.5 KB

There are no notes for this item.