@e-fellows/website-2022

Geteilte Formularseite 

<div id="split-form-page-53942-50224" class="split-form-page u-inverted">
    <div class="split-form-page__image">
        <picture class="image image--cover">
            <img class="image__img" src="https://bildermangel.de/900x900/fe7c09/130f26.webp" width="900" height="900" alt="" loading="lazy" role="presentation" />
        </picture>
    </div>

    <div class="split-form-page__inner">
        <div class="split-form-page__content">
            <div class="split-form-page__close">
                <a class="icon-button" title="Schließen" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
                        </svg> </span>

                </a>
            </div>

            <div class="split-form-page__icon">
                <svg class="icon icon--thumbs-up" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#thumbs-up"></use>
                </svg>
            </div>

            <div class="split-form-page__headline">
                <h1 class="headline headline--3"><span class="headline__text">Willkommen</span></h1>
            </div>

            <form id="split-form-page-53942-50224-form" class="split-form-page__form" method="post" enctype="multipart/form-data" accept-charset="utf-8">

                <div id="split-form-page-53942-50224-field-76518-97411" class="field split-form-page__field">
                    <label class="field__label" for="split-form-page-53942-50224-field-76518-97411-control">
                        <span class="label">Nutzername oder E-Mail</span>
                    </label>

                    <div id="split-form-page-53942-50224-field-76518-97411-errors" class="field__errors" hidden>
                        <div class="notice notice--error">
                            <svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
                            </svg>
                            <span class="notice__text"></span>
                        </div>
                    </div>

                    <div class="field__controls field__controls--stacked">
                        <div class="field__control">
                            <div class="input">
                                <div class="input__inner">
                                    <input class="input__input input__input--text" id="split-form-page-53942-50224-field-76518-97411-control" name="username-field" required aria-required="true" type="text" />

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="field__footer">

                    </div>
                </div>

                <div id="split-form-page-53942-50224-field-15034-73371" class="field split-form-page__field">
                    <label class="field__label" for="split-form-page-53942-50224-field-15034-73371-control">
                        <span class="label">Passwort</span>
                    </label>

                    <div id="split-form-page-53942-50224-field-15034-73371-errors" class="field__errors" hidden>
                        <div class="notice notice--error">
                            <svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
                            </svg>
                            <span class="notice__text"></span>
                        </div>
                    </div>

                    <div class="field__controls field__controls--stacked">
                        <div class="field__control">
                            <div class="input">
                                <div class="input__inner">
                                    <input class="input__input input__input--password" id="split-form-page-53942-50224-field-15034-73371-control" name="password-field" required aria-required="true" type="password" spellcheck="false" />

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="field__footer">

                    </div>
                </div>

                <div class="split-form-page__submit">
                    <button class="button u-underline" type="submit">Login</button>
                </div>

                <div class="split-form-page__buttons-splitter">
                    <span class="split-form-page__buttons-splitter-text">oder</span>
                </div>

                <div class="split-form-page__buttons">
                    <div class="split-form-page__button">
                        <a class="button button--outline u-underline" href="#">Mit Einmalcode einloggen</a>
                    </div>
                </div>
            </form>

            <div class="split-form-page__outro">
                <p class="paragraph"><a class="link link--internal" href="#"><span class="link__text u-underline">Passwort vergessen</span></a><br>Neu hier? <a class="link link--internal" href="#"><span class="link__text u-underline">Kostenlos anmelden</span></a></p>

            </div>

            <div class="split-form-page__lang-switcher">
                <a class="lang-switcher" title="Switch to English" rel="alternate" hreflang="en" href="#">
                    <img class="lang-switcher__flag" src="/assets/images/en-flag.583699d9c6.svg" width="50" height="30" role="presentation" loading="lazy" alt="">
                </a>
            </div>
        </div>
    </div>
</div>
 
{% set id = id ??? html_id('split-form-page') %}

<div {{ html_attributes({
  id: id,
  class: 'split-form-page u-inverted',
}, attrs ?? {}) }}>
  {% if image|default %}
    <div class="split-form-page__image">
      {% include '@image' with image | merge({
        decorative: true,
        cover: true,
      }) only %}
    </div>
  {% endif %}

  <div class="split-form-page__inner">
    <div class="split-form-page__content">
      {% if closeUrl|default %}
        <div class="split-form-page__close">
          {% include '@icon-button' with {
            title: 'Close' | t('site'),
            link: closeUrl,
            icon: 'cross',
          } only %}
        </div>
      {% endif %}

      {% if icon|default %}
        <div class="split-form-page__icon">
          {% include '@icon' with {
            icon: icon,
          } only %}
        </div>
      {% endif %}

      {% if headline|default %}
        <div class="split-form-page__headline">
          {% include '@headline' with headline | merge({
            level: 1,
            size: 3,
          }) only %}
        </div>
      {% endif %}

      {% if intro|default %}
        <div class="split-form-page__intro">
          {{ intro | componentize }}
        </div>
      {% endif %}

      {% for alert in alerts|default([]) %}
        <div class="split-form-page__alert">
          {% include '@alert' with alert only %}
        </div>
      {% endfor %}

      {% if fields|default or forceForm|default %}
        <form {{ html_attributes({
          id: 'form' | namespaceInputId(id),
          class: 'split-form-page__form',
          action: action ??? '',
          method: method ??? 'post',
          enctype: 'multipart/form-data',
          'accept-charset': 'utf-8',
        }, formAttrs ?? {}) }}>
          {{ csrf|default ? csrfInput({ autocomplete: 'false' }) }}
          {{ actionUrl|default ? actionInput(actionUrl) }}
          {{ redirectUrl|default ? redirectInput(redirectUrl) }}

          {% for name, value in hiddenInputs|default %}
            {{ value ? hiddenInput(name, value) }}
          {% endfor %}

          {% for name, value in hashedHiddenInputs|default %}
            {{ value ? hiddenInput(name, value | hash) }}
          {% endfor %}

          {% for field in fields|default([]) %}
            {% include '@field' with field | merge({
              id: field.id | default(html_id('field')) | namespaceInputId(id),
              formId: id,
              attrs: field.attrs | default({}) | merge({
                class: html_classes(field.attrs.class ?? '', 'split-form-page__field'),
              }),
            }) only %}
          {% endfor %}

          <div class="split-form-page__submit">
            {% include '@button' with submitButton | default({
              text: 'Submit' | t('site'),
            }) | merge({
              type: 'submit',
              block: true,
            }) only %}
          </div>

          {% if buttons|default %}
            {% if buttonSpliter|default %}
              <div class="split-form-page__buttons-splitter">
                <span class="split-form-page__buttons-splitter-text">
                  {{- buttonSpliter -}}
                </span>
              </div>
            {% endif %}

            <div class="split-form-page__buttons">
              {% for button in buttons %}
                <div class="split-form-page__button">
                  {% include '@button' with button | merge({
                    outline: true,
                    block: true,
                  }) only %}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        </form>
      {% endif %}

      {% if outro|default %}
        <div class="split-form-page__outro">
          {{ outro | componentize }}
        </div>
      {% endif %}

      {% if langSwitcher|default %}
        <div class="split-form-page__lang-switcher">
          {% include '@lang-switcher' with langSwitcher only %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
 
{
  "image": {
    "src": "https://bildermangel.de/900x900/fe7c09/130f26.webp",
    "width": 900,
    "height": 900,
    "alt": "Das ist ein Platzhalter-Bild"
  },
  "closeUrl": "#",
  "langSwitcher": {
    "link": "#",
    "title": "Switch to English",
    "language": "EN"
  }
}
  • Content: 
    :root {
  --split-form-page-background-color: var(--color-midnight);
  --split-form-page-close-size: 4.4rem;
  --split-form-page-color: var(--color-white);
  --split-form-page-content-max-width: 40rem;
  --split-form-page-icon-color: var(--color-orange);
  --split-form-page-image-max-width: 90rem;
}

.split-form-page {
  background-color: var(--split-form-page-background-color);
  color: var(--split-form-page-color);
  display: flex;
  inline-size: 100vw;
  min-block-size: 100vh;
}

.split-form-page__image {
  display: none;
  flex-basis: 50%;
  flex-grow: 1;
  flex-shrink: 0;
  max-inline-size: var(--split-form-page-image-max-width);

  @include mq($from: m) {
    display: flex;
  }

  @include mq($from: l) {
    flex-basis: 55%;
  }
}

.split-form-page__inner {
  flex-basis: 50%;
  flex-grow: 1;
  flex-shrink: 0;
  padding-block: clamp(2rem, 5vw, 6rem);
  padding-inline: clamp(2rem, 5vw, 3rem);
}

.split-form-page__content {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  justify-content: center;
  margin-inline: auto;
  max-inline-size: var(--split-form-page-content-max-width);
  min-block-size: 100%;
  padding-block-end: 3rem;
  padding-block-start: calc(var(--split-form-page-close-size) + 3rem);
  position: relative;
}

.split-form-page__icon {
  color: var(--split-form-page-icon-color);
  font-size: 6.6rem;
  margin-block-end: 2.5rem;
  text-align: center;
}

.split-form-page__headline {
  --headline-kicker-font-size: 1.8rem;
  --headline-kicker-line-height: var(--line-height-default);

  margin-block-end: 2rem;
  text-align: center;
}

.split-form-page__alert {
  background-color: var(--color-white);
  margin-block: 2rem;
}

.split-form-page__intro {
  font-size: 1.6rem;
  line-height: var(--line-height-body);
  margin-block-end: 4rem;
  text-align: center;

  > * + * {
    margin-block-start: 1rem;
  }
}

.split-form-page__field {
  & + & {
    margin-block-start: 2rem;
  }
}

.split-form-page__submit {
  --button-width: 100%;

  margin-block-start: 3rem;
}

.split-form-page__buttons-splitter {
  font-size: var(--split-form-page-buttons-splitter-font-size, 1.4rem);
  line-height: 1;
  margin-block-start: 2rem;
  position: relative;

  &::before {
    background-color: var(--color-midnight-offset);
    block-size: 1px;
    content: '';
    inline-size: 100%;
    inset-block-start: calc(50% - 0.5px);
    inset-inline-start: 0;
    position: absolute;
    z-index: 1;
  }
}

.split-form-page__buttons-splitter-text {
  background-color: var(--color-midnight);
  display: block;
  inline-size: min-content;
  margin-inline: auto;
  padding-inline: 1em;
  position: relative;
  z-index: 2;
}

.split-form-page__buttons {
  --button-width: 100%;

  display: grid;
  gap: 2rem;
  margin-block-start: 2rem;
}

.split-form-page__outro {
  font-size: 1.6rem;
  line-height: var(--line-height-body);
  margin-block-start: 3rem;
  text-align: center;
}

.split-form-page__lang-switcher {
  margin-block-start: 6rem;
}

.split-form-page__close {
  --icon-button-background-color: transparent;
  --icon-button-icon-color: var(--split-form-page-icon-color);
  --icon-button-size: var(--split-form-page-close-size);
  --icon-button-icon-size: 0.5em;
  --icon-button-border-size: 2px;
  --icon-button-background-color-active: var(--split-form-page-icon-color);
  --icon-button-icon-color-active: var(--split-form-page-background-color);

  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
}
  • URL: /components/raw/split-form-page/split-form-page.scss
  • Filesystem Path: src/components/3-organisms/split-form-page/split-form-page.scss
  • Size: 3.5 KB

No notes defined.