@e-fellows/website-2022

Merklisten-Overlay: Anmeldung notwendig 

<div id="bookmark-overlay-92154-32306" class="overlay overlay--centered bookmark-overlay" aria-labelledby="bookmark-overlay-92154-32306-headline" data-destroy-after-close="false" data-redirect-after-close="false">
    <div class="overlay__backdrop"></div>

    <div class="overlay__overlay u-inverted" role="document">
        <div class="overlay__bar">

            <button class="overlay__close" type="button" title="Schließen">
                <svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
                </svg> </button>
        </div>

        <div class="overlay__content">
            <div class="bookmark-overlay__inner">
                <div class="bookmark-overlay__headline" id="bookmark-overlay-92154-32306-headline">
                    <svg class="icon icon--bookmark-cross bookmark-overlay__headline-icon" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bookmark-cross"></use>
                    </svg>
                    <h2 class="headline headline--2"><span class="headline__text">Merken nicht möglich</span></h2>
                </div>

                <div class="bookmark-overlay__text">
                    <p class="paragraph">Du musst bei e-fellows.net-Konto angemeldet sein, um dir Artikel zu merken. Es dauert nur wenige Minuten!</p>

                </div>

                <div class="bookmark-overlay__buttons">
                    <div class="bookmark-overlay__button">
                        <a class="button u-underline" href="#">Jetzt einloggen</a>
                    </div>
                    <div class="bookmark-overlay__button">
                        <a class="button button--outline u-underline" href="#">Kostenlos anmelden</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
{% set level = level ??? 2 %}
{% set id = id ??? html_id('bookmark-overlay') -%}

{% embed '@overlay' with {
  id: id,
  centered: true,
  open: open ?? false,
  destroyAfterClose: destroyAfterClose ?? false,
  labelledby: 'headline' | namespaceInputId(id),
  classes: {
    'bookmark-overlay': true,
  },
} %}
  {% block content %}
    <div class="bookmark-overlay__inner">
      {% if headline|default %}
        <div class="bookmark-overlay__headline" id="{{ 'headline' | namespaceInputId(id) }}">
          {% if icon|default %}
            {% include '@icon' with {
              icon: icon,
              class: 'bookmark-overlay__headline-icon',
            } only %}
          {% endif %}

          {% include '@headline' with headline | merge({
            level: level,
            size: 2,
          }) only %}
        </div>
      {% endif %}

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

      {% if buttons|default %}
        <div class="bookmark-overlay__buttons">
          {% for button in buttons %}
            <div class="bookmark-overlay__button">
              {% include '@button' with button | merge({
                outline: not loop.first,
              }) only %}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  {% endblock %}
{% endembed %}
 
{
  "open": true,
  "icon": "bookmark-cross",
  "headline": {
    "text": "Merken nicht möglich"
  },
  "text": "<p>Du musst bei e-fellows.net-Konto angemeldet sein, um dir Artikel zu merken. Es dauert nur wenige Minuten!</p>\n",
  "buttons": [
    {
      "link": "#",
      "text": "Jetzt einloggen"
    },
    {
      "link": "#",
      "text": "Kostenlos anmelden"
    }
  ]
}
  • Content: 
    .bookmark-overlay {
  --overlay-max-width: 60rem;
  --overlay-animation: slide-slightly-from-bottom;
  --overlay-footer-height: 0;
  --overlay-icon-color: var(--color-orange);

  @include use-responsive-sizing(--overlay-icon-size, responsive-map(xs 2.6rem, xl 3.6rem));
}

.bookmark-overlay__inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 3rem;
  justify-content: center;
}

.bookmark-overlay__headline {
  display: flex;
  gap: 1rem;
}

.bookmark-overlay__headline-icon {
  color: var(--overlay-icon-color);
  flex-shrink: 0;
  font-size: var(--overlay-icon-size);
  margin-block: 0.1em;
}

.bookmark-overlay__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
  • URL: /components/raw/bookmark-overlay/bookmark-overlay.scss
  • Filesystem Path: src/components/3-organisms/bookmark-overlay/bookmark-overlay.scss
  • Size: 699 Bytes

No notes defined.