<div class="stage-insert-startpage u-inverted">
    <div class="stage-insert-startpage__side">
        <div class="stage-insert-startpage__form">
            <div class="stage-insert-startpage__shutdown">Schliessen
                <svg class="icon stage-insert-startpage__shutdown-icon icon--close icon--before" id="icon-621f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-close"></use>
</svg>
            </div>
            <h3 class="headline headline--headline-1">Berechnen Sie Ihren Vorteil beim Wechsel zur hkk!
            </h3>
            <form class="form">
                <div class="form__inner">
                    <div class="form-group">
                        <label class="label u-hidden-visually" for="health-insurance">Krankenkasse</label>
                        <div class="form-group__inner">
                            <select class="select" id="health-insurance" name="health-insurance">
  <option value="Option 1 value" id="option1Id">Aktuelle Krankenkasse wählen</option>
  <option value="Option 2 value" id="option2Id">Option 2</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="label u-hidden-visually" for="gross-income">Bruttoeinkommen</label>
                        <div class="form-group__inner">
                            <input class="input input--text" type="text" placeholder="Ihr mtl. Bruttoeinkommen" 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>
        </div>
    </div>
    <div class="stage-insert-startpage__side">
        <ul class="stage-insert-startpage__list">
            <li class="stage-insert-startpage__list-item">
                <a class="stage-insert-startpage__list-item-link" href="#" aria-hidden="true">
                    <svg class="icon stage-insert-startpage__list-icon icon--big-service-number icon--before" id="icon-7368" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-service-number"></use>
</svg><span class="stage-insert-advantages__list-text">Service-Hotline</span></a>
            </li>
            <li class="stage-insert-startpage__list-item">
                <a class="stage-insert-startpage__list-item-link" href="#" aria-hidden="true">
                    <svg class="icon stage-insert-startpage__list-icon icon--mail icon--before" id="icon-b342" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg><span class="stage-insert-advantages__list-text">Kontaktformular</span></a>
            </li>
            <li class="stage-insert-startpage__list-item">
                <a class="stage-insert-startpage__list-item-link" href="#" aria-hidden="true">
                    <svg class="icon stage-insert-startpage__list-icon icon--chat-fill icon--before" id="icon-1d33" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-chat-fill"></use>
</svg><span class="stage-insert-advantages__list-text">Chat</span></a>
            </li>
            <li class="stage-insert-startpage__list-item">
                <a class="stage-insert-startpage__list-item-link" href="#" aria-hidden="true">
                    <svg class="icon stage-insert-startpage__list-icon icon--user icon--before" id="icon-4095" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg><span class="stage-insert-advantages__list-text">Meine hkk</span></a>
            </li>
        </ul>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render stage insert
.stage-insert-startpage.u-inverted&attributes(attr)
  //- Side
  each side in {left, right}
    if side
      if side.defaultOrderStyle
        -
          side.itemAttr = side.itemAttr || {};
          side.itemAttr.class = classList(side.itemAttr.class);

      .stage-insert-startpage__side&attributes(side.itemAttr)
        //- form
        if side.form
          .stage-insert-startpage__form
            .stage-insert-startpage__shutdown Schliessen
              != include('@icon', { icon: 'close', before: true, attr: { class: 'stage-insert-startpage__shutdown-icon' } })

            != include('@form', side.form)

        //- Content
        if side.content
          .stage-insert-startpage__content
            != renderPug(side.content)

        //- List
        if side.list
          - listType = side.order ? 'ol' : 'ul'
          #{listType}.stage-insert-startpage__list
            each item in side.list
              li.stage-insert-startpage__list-item
                a.stage-insert-startpage__list-item-link(href=item.link, aria-hidden='true')
                  != include('@icon', {icon: item.icon, before: true, attr: {class: 'stage-insert-startpage__list-icon'}})
                  span.stage-insert-advantages__list-text #{item.text}
{
  "left": {
    "headline": "Berechnen Sie Ihren Vorteil beim Wechsel zur hkk!",
    "form": {
      "submit": "Vorteil berechnen",
      "errorExample": null,
      "title": "Berechnen Sie Ihren Vorteil beim Wechsel zur hkk!",
      "elements": [
        {
          "label": "Krankenkasse",
          "labelSettings": {
            "hidden": true
          },
          "id": "health-insurance",
          "use": "select",
          "settings": {
            "hasPleaseSelectOption": null,
            "options": [
              {
                "text": "Aktuelle Krankenkasse wählen",
                "value": "Option 1 value",
                "id": "option1Id"
              },
              {
                "text": "Option 2",
                "value": "Option 2 value",
                "id": "option2Id"
              },
              {
                "text": "Option 3",
                "value": "Option 3 value",
                "id": "option3Id"
              }
            ]
          }
        },
        {
          "label": "Bruttoeinkommen",
          "labelSettings": {
            "hidden": true
          },
          "id": "gross-income",
          "use": "input--text",
          "settings": {
            "placeholder": "Ihr mtl. Bruttoeinkommen"
          }
        }
      ]
    }
  },
  "right": {
    "list": [
      {
        "link": "#",
        "icon": "big-service-number",
        "text": "Service-Hotline"
      },
      {
        "link": "#",
        "icon": "mail",
        "text": "Kontaktformular"
      },
      {
        "link": "#",
        "icon": "chat-fill",
        "text": "Chat"
      },
      {
        "link": "#",
        "icon": "user",
        "text": "Meine hkk"
      }
    ]
  }
}
  • Content:
    class StageInsertStartForm {
      constructor($el) {
        this.$el = $el;
        this.$shutDown = $el.querySelector('.stage-insert-startpage__shutdown');
        this.$stageInsertForm = $el.querySelector('.form__inner');
        this.$document = document.querySelector('html');
    
        this.init();
      }
    
      init() {
        this.$document.addEventListener('click', (event) => {
          if (!this.$el.contains(event.target)) {
            if (this.$document.matches('.stage-insert-startpage--active')) {
              this.$document.classList.remove('stage-insert-startpage--active');
            }
          }
        });
    
        this.$shutDown.addEventListener('click', () => {
          if (this.$document.matches('.stage-insert-startpage--active')) {
            this.$document.classList.remove('stage-insert-startpage--active');
          }
        });
    
        this.$stageInsertForm.addEventListener('click', () => {
          if (!(this.$document.matches('stage-insert-startpage--active'))) {
            this.$document.classList.add('stage-insert-startpage--active');
          }
        });
      }
    }
    
    document.querySelectorAll('.stage-insert-startpage__form').forEach(
      $el => new StageInsertStartForm($el),
    );
    
  • URL: /components/raw/stage-insert-startpage/stage-insert-startpage.js
  • Filesystem Path: src/components/organisms/stage-insert-startpage/stage-insert-startpage.js
  • Size: 1.1 KB
  • Content:
    .stage-insert-startpage {
      color: rgba(#fff, 0.9);
      margin-top: 3.5rem;
    
      @include mq($from: l) {
        display: flex;
        height: 18rem;
      }
    
      @include mq($from: xl) {
        height: 18rem;
      }
    }
    
    .stage-insert-startpage__side {
      position: relative;
    
      .select,
      input {
        border: 0;
        height: 6rem;
      }
    
      .stage-insert-startpage__form {
        background-color: $color-red;
        padding: 2rem 3rem;
    
        @include mq($from: l) {
          left: 0;
          padding: 2rem 2.8rem 1rem;
          position: absolute;
          top: 0;
          width: 100%;
        }
      }
    
      .stage-insert-startpage__list {
        background-color: $color-blue;
      }
    
      @include mq($from: l) {
        width: 60%;
    
        &:first-child {
          background-color: $color-red;
          width: 40%;
        }
      }
    
      @include mq($from: xl) {
        width: 66.66%;
    
        &:first-child {
          width: 33.33%;
        }
      }
    }
    
    .stage-insert-startpage__form {
      .headline {
        margin-bottom: 1.5rem;
      }
    
      .form {
        margin-bottom: 0;
        margin-top: 0;
      }
    
      .form-group {
        margin-bottom: 1.5rem;
        max-width: 100%;
      }
    
      .form-group:not(:first-child),
      .form__submit {
        display: none;
      }
    
      .form__submit {
        height: auto;
        margin: 0 0 1.5rem;
      }
    
      .form__submit .button {
        width: 100%;
      }
    }
    
    .stage-insert-startpage__shutdown {
      align-items: center;
      color: $root-color;
      cursor: pointer;
      display: inline-flex;
      font-size: 1.7rem;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      right: 3rem;
      top: -3rem;
    
      .stage-insert-startpage__shutdown-icon {
        color: #000;
        font-size: 1.2rem;
        margin-left: 1rem;
        margin-right: 0;
      }
    
      @include mq($from: l) {
        right: 0;
      }
    }
    
    .stage-insert-startpage--active {
      &::after {
        background-color: rgba(#fff, 0.7);
        content: '';
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 108;
      }
    
      .stage-insert-startpage__shutdown {
        opacity: 1;
        pointer-events: auto;
      }
    
      .stage-insert-startpage__form .form-group,
      .stage-insert-startpage__form .form__submit {
        display: block;
      }
    
      .overview-page__stage-insert {
        z-index: 999;
      }
    
      .stage-insert-startpage__list {
        position: relative;
        z-index: -1;
      }
    
      .stage-insert-startpage .stage-insert-startpage__side:last-child {
        background-color: rgba(#fff, 0.7);
        pointer-events: none;
      }
    }
    
    .stage-insert-startpage__content {
      > :last-child {
        margin-bottom: 0;
      }
    }
    
    .stage-insert-startpage__list {
      @include list-reset();
    
      display: flex;
      height: 100%;
    }
    
    .stage-insert-startpage__list-item {
      align-items: center;
      display: flex;
      flex: 0 0 25%;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 25%;
      padding: 1rem 1.3rem;
      position: relative;
      text-align: center;
    
      + .stage-insert-startpage__list-item {
        border-left: 0.2rem solid $color-anthracite;
      }
    
      @include mq($from: m) {
        padding: 2rem;
      }
    }
    
    .stage-insert-startpage__list-icon {
      font-size: 3.4rem;
      margin-bottom: 1rem;
      margin-right: 0;
    
      @include mq($from: l) {
        font-size: 6.6rem;
      }
    }
    
    .stage-insert-advantages__list-text {
      display: block;
      font-size: 1.2rem;
      font-weight: 600;
      width: 100%;
      word-break: break-word;
    
      @include mq($from: l) {
        font-size: 1.7rem;
      }
    }
    
    .stage-insert-startpage__list-item-link {
      display: block;
    }
    
    .overview-page__stage-insert-startpage {
      &.overview-page__stage-insert {
        margin-bottom: 0;
    
        @include mq($from: m) {
          margin-top: -16rem;
        }
      }
    
      .overview-page__container {
        max-width: 119rem;
        padding: 0;
    
        @include mq($from: l) {
          padding-left: 4rem;
          padding-right: 4rem;
        }
      }
    }
    
  • URL: /components/raw/stage-insert-startpage/stage-insert-startpage.scss
  • Filesystem Path: src/components/organisms/stage-insert-startpage/stage-insert-startpage.scss
  • Size: 3.6 KB
  • Handle: @stage-insert-startpage
  • Preview:
  • Filesystem Path: src/components/organisms/stage-insert-startpage/stage-insert-startpage.pug
  • References (2): @icon, @form

There are no notes for this item.