@e-fellows/website-2022

Honeypot 

<div id="honeypot-91723-54191" class="honeypot">
    <div class="honeypot__break-out">
        <div class="honeypot__inner">
            <div class="honeypot__message">
                <div class="honeypot__icon">
                    <svg class="icon icon--locked" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#locked"></use>
                    </svg>
                </div>

                <div class="honeypot__text">
                    <h2 class="headline headline--3"><span class="headline__text">Dieses Angebot ist exklusiv für Mitglieder von e&#8209;fellows.net</span></h2>
                </div>
            </div>

            <div class="honeypot__nudging-box">
                <div id="honeypot-91723-54191-nudging-box" class="nudging-box">
                    <div class="nudging-box__inner">
                        <div class="nudging-box__image-container">
                            <picture class="image nudging-box__image">
                                <img class="image__img" src="
/assets/images/nudging-honeypot/nudging-honeypot-1.b852c395c0.png
" width="200" height="200" alt="" loading="lazy" role="presentation" />
                            </picture>
                        </div>

                        <div class="nudging-box__content">
                            <div class="nudging-box__headline">
                                <h3 class="headline headline--3"><span class="headline__text">Willkommen zurück!</span></h3>
                            </div>

                            <div class="nudging-box__text">
                                <p class="paragraph">Logge dich jetzt ein, um diesen Artikel für dich zu speichern und für Dich relevante Inhalte zu sehen.
                                </p>
                            </div>

                            <div class="nudging-box__button">
                                <a class="button u-underline" href="#">Einloggen</a>
                            </div>

                            <div class="nudging-box__cta-text">
                                <p class="paragraph">Noch nicht dabei? <a class="link link--internal" href="#"><span class="link__text u-underline">Dann meld dich gleich an</span></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set level = level ??? 2 %}
{% set id = id ??? html_id('honeypot') -%}

<div {{ html_attributes({
  id: id,
  class: 'honeypot',
}, attrs ?? {}) }}>
  <div class="honeypot__break-out">
    <div class="honeypot__inner">
      <div class="honeypot__message">
        <div class="honeypot__icon">
          {% include '@icon' with { icon: icon } only %}
        </div>

        <div class="honeypot__text">
          {% include '@headline' with {
            level: level,
            size: 3,
            text: text,
          } only %}
        </div>
      </div>

      {% if nudgingBox|default %}
        <div class="honeypot__nudging-box">
          {% include '@nudging-box' with nudgingBox | merge({
            level: level + 1,
            id: 'nudging-box' | namespaceInputId(id),
          }) only %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
 
{
  "icon": "locked",
  "text": "Dieses Angebot ist exklusiv für Mitglieder von e-fellows.net",
  "nudgingBox": {
    "image": {
      "src": "!twig\n{{ asset('images/nudging-honeypot/nudging-honeypot-1.png') }}\n",
      "width": 200,
      "height": 200
    },
    "headline": {
      "text": "Willkommen zurück!"
    },
    "text": "<p>Logge dich jetzt ein, um diesen Artikel für dich zu speichern und für Dich relevante Inhalte zu sehen.\n",
    "button": {
      "text": "Einloggen",
      "link": "#"
    },
    "ctaText": "<p>Noch nicht dabei? <a href=\"#\">Dann meld dich gleich an</a>\n"
  }
}
  • Content: 
    :root {
  --honeypot-overlay-height: 30rem;
  --honeypot-padding-inline: var(--inner-container-padding);
  --honeypot-fadeout-color: 0, 0%, 100%;
}

.honeypot__break-out {
  margin-block-start: calc((var(--honeypot-overlay-height) * -1) + 5rem);
  padding-block-start: var(--honeypot-overlay-height);
  position: relative;

  &::before {
    background-image: linear-gradient(to bottom,
    hsla(var(--honeypot-fadeout-color), 0) 0%,
    hsla(var(--honeypot-fadeout-color), 0.013) 8.1%,
    hsla(var(--honeypot-fadeout-color), 0.049) 15.5%,
    hsla(var(--honeypot-fadeout-color), 0.104) 22.5%,
    hsla(var(--honeypot-fadeout-color), 0.175) 29%,
    hsla(var(--honeypot-fadeout-color), 0.259) 35.3%,
    hsla(var(--honeypot-fadeout-color), 0.352) 41.2%,
    hsla(var(--honeypot-fadeout-color), 0.45) 47.1%,
    hsla(var(--honeypot-fadeout-color), 0.55) 52.9%,
    hsla(var(--honeypot-fadeout-color), 0.648) 58.8%,
    hsla(var(--honeypot-fadeout-color), 0.741) 64.7%,
    hsla(var(--honeypot-fadeout-color), 0.825) 71%,
    hsla(var(--honeypot-fadeout-color), 0.896) 77.5%,
    hsla(var(--honeypot-fadeout-color), 0.951) 84.5%,
    hsla(var(--honeypot-fadeout-color), 0.987) 91.9%,
    hsl(var(--honeypot-fadeout-color)) 100%);
    block-size: var(--honeypot-overlay-height);
    content: '';
    inset-block-start: 0;
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
  }

  @include use-break-out();
}

.honeypot__inner {
  background-color: hsl(var(--honeypot-fadeout-color));

  @include use-container($start-breakpoint: m);
}

.honeypot__message {
  background-color: var(--color-orange-light);
  padding-block: 4rem 3rem;
  padding-inline: var(--honeypot-padding-inline);
  position: relative;
  text-align: center;

  &::after {
    block-size: 0;
    border-block-start: 1.5rem solid var(--color-orange-light);
    border-inline-end: 1.5rem solid transparent;
    border-inline-start: 1.5rem solid transparent;
    content: '';
    inline-size: 0;
    inset-block-end: 0;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, 100%);
  }
}

.honeypot__icon {
  color: var(--color-orange);
  font-size: 7rem;
  inset-block-start: 0;
  inset-inline-start: 50%;
  position: absolute;
  transform: translate(-50%, -70%) rotate(15deg);
}

.honeypot__nudging-box {
  --nudging-box-padding-inline: var(--honeypot-padding-inline);
}

.honeypot__message,
.honeypot__nudging-box {
  margin-inline: auto;

  @include use-responsive-sizing(width, (
    m: column-width(m, 8),
    l: column-width(l, 8),
    xl: column-width(xl, 8),
  ));
}
  • URL: /components/raw/honeypot/honeypot.scss
  • Filesystem Path: src/components/3-organisms/honeypot/honeypot.scss
  • Size: 2.6 KB

No notes defined.