<div class="box box--bordered">
    <div class="box__content">
        <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-cefa" 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-19dd" 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-4e1a" 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-d8af" 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-ab17" 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-4141" 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-adf9" name="name" />
                        <input class="input input--text" type="text" placeholder="Nachname*" required="required" autocomplete="lname" id="input-d2c6" 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-9db3" name="address-2" />
                        <input class="input input--text input--75" type="text" placeholder="Ort*" required="required" autocomplete="city" id="input-6c33" 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-f181" name="contact" />
                        <input class="input input--tel" type="tel" placeholder="Telefonnummer" autocomplete="telephone" id="input-f76e" 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>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`box--${color || 'light-blue'}`);

  //- Tool box
  if (tool) attr.class.push('box--tool');

  //- Growing box
  if (grow) attr.class.push('box--grow');

//- Render box
.box&attributes(attr)
  //- Icon
  if icon
    .box__icon
      != include('@icon', {icon})

  //- Box content
  .box__content
    //- Headline
    if headline
      .box__headline
        - headlineOptions = Object.assign({}, {text: headline, hkkPlus}, headlineOptions)
        != include('@headline--headline-1', headlineOptions)

    //- Content
    if content
      != renderPug(content)

    //- More link
    if link
      .box__more
        != include('@teaser-link', {link, text: more || 'Weitere Informationen'})
{
  "headline": null,
  "color": "bordered",
  "more": "Weitere Informationen",
  "link": null,
  "hkkPlus": null,
  "headlineOptions": {
    "level": 3
  },
  "content": "!= include('@form--info')\n"
}
  • Content:
    .box {
      background-color: $color-steelgrey-light;
      display: flex;
      font-size: 1.5rem;
      margin-bottom: 3rem;
      padding: 2.5rem 2.5rem 1rem;
    
      @include mq($from: m) {
        display: block;
      }
    }
    
    .box--tool {
      .box__content {
        margin: 0 auto;
      }
    
      @include mq($from: m) {
        padding: 4rem 5rem 3rem;
      }
    }
    
    .box--bordered {
      background-color: transparent;
      border: 0.5rem solid $color-steelgrey-light;
      padding: 2rem 2rem 0.5rem;
    }
    
    .box--sand {
      background-color: $color-sand;
    
      .form-micro {
        margin-top: 3rem;
      }
    }
    
    .box--grow {
      @include mq($from: m) {
        height: 100%;
        margin: 0;
      }
    }
    
    .box__icon {
      color: rgba(#333, 0.2);
      font-size: 8rem;
      line-height: 1;
      margin-left: 1.5rem;
      order: 1;
      width: 8rem;
    
      @include mq($from: m) {
        margin-left: 0;
        padding-bottom: 2.5rem;
        padding-top: 0.5rem;
        text-align: center;
        width: 100%;
      }
    }
    
    .box__content {
      flex-shrink: 1;
      max-width: 100%;
    }
    
    .box__more {
      margin-bottom: 1.5rem;
    }
    
  • URL: /components/raw/box/box.scss
  • Filesystem Path: src/components/organisms/box/box.scss
  • Size: 985 Bytes

There are no notes for this item.