@e-fellows/website-2022

Nudging-Box 

<div 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">
                <h2 class="headline headline--3"><span class="headline__text">Willkommen zurück!</span></h2>
            </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>
 
{% set level = level ??? 2 -%}

<div {{ html_attributes({
  id: id ?? false,
  class: 'nudging-box',
}, attrs ?? {}) }}>
  <div class="nudging-box__inner">
    {% if image|default %}
      <div class="nudging-box__image-container">
        {% include '@image' with image | merge({
          placeholder: false,
          decorative: true,
          attrs: {
            class: 'nudging-box__image',
          },
        }) only %}
      </div>
    {% endif %}

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

      {% if text|default %}
        <div class="nudging-box__text">
          {{ text | componentize }}
        </div>
      {% endif %}

      {% if button|default %}
        <div class="nudging-box__button">
          {% include '@button' with button only %}
        </div>
      {% endif %}

      {% if ctaText|default %}
        <div class="nudging-box__cta-text">
          {{ ctaText | componentize }}
        </div>
      {% endif %}
    </div>
  </div>
</div>
 
{
  "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 {
  --nudging-box-background-color: var(--color-cyan-light);
  --nudging-box-padding-inline: var(--inner-container-padding);
}

.nudging-box {
  background-color: var(--nudging-box-background-color);
  padding-block: 4rem;
  padding-inline: var(--nudging-box-padding-inline);
}

.nudging-box__inner {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  text-align: center;

  @include use-responsive-sizing(gap, $gaps, $start-breakpoint: m);

  @include mq($from: m) {
    grid-template-columns: 4fr 8fr;
    text-align: start;
  }
}

.nudging-box__image-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nudging-box__image {
  max-inline-size: 20rem;
}

.nudging-box__headline {
  margin-block-end: 1rem;
}

.nudging-box__text {
  font-size: 1.4rem;
  margin-block-end: 3rem;
}

.nudging-box__button {
  @include mq($from: m) {
    --button-width: 100%;
  }
}

.nudging-box__cta-text {
  --link-color: var(--color-orange);
  --line-underline-color: var(--color-orange);
  --link-font-weight: var(--font-weight-semibold);

  font-size: 1.6rem;
  font-weight: var(--font-weight-semibold);
  margin-block-start: 1.5rem;
}
  • URL: /components/raw/nudging-box/nudging-box.scss
  • Filesystem Path: src/components/2-molecules/nudging-box/nudging-box.scss
  • Size: 1.2 KB

No notes defined.