@e-fellows/website-2022

Angebots-Box 

<div class="offer-box">
    <div class="offer-box__offer">
        <div class="offer-box__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="offer-box__headline">
            <h2 class="headline headline--3"><span class="headline__text">6 Monate gratis</span></h2>
        </div>

        <div class="offer-box__text">
            <p class="paragraph">Dein Gutschein ist gültig bis 15.12.2022. Alle Informationen dazu erhältst du in Kürze auch noch einmal per E-Mail.
            </p>
        </div>

        <div class="offer-box__button">
            <button class="button button--outline u-underline" type="button">Jetzt abonnieren</button>
        </div>
    </div>

    <div class="offer-box__upsell u-inverted">
        <div class="offer-box__badge">

            <p class="badge">
                <span class="badge__icon">
                    <svg class="icon icon--medal" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#medal"></use>
                    </svg> </span>

                <span class="badge__text">Nur für die besten 10%</span>
            </p>
        </div>

        <div class="offer-box__headline">
            <h2 class="headline headline--3"><span class="headline__kicker">CV aktualisieren<span class="u-hidden-visually">: </span></span><span class="headline__text">12 Monate gratis holen</span></h2>
        </div>

        <div class="offer-box__text">
            <p class="paragraph">Als Stipendiat:in von e-fellows.net profitierst Du von allen Vorteilen. Aktualisiere Deinen Lebenslauf regelmäßig um Deinen Status zu behalten.
            </p>
        </div>

        <div class="offer-box__button">
            <a class="button u-underline" href="#">Lebenslauf aktualisieren</a>
        </div>

        <div class="offer-box__text">
            <p class="paragraph">Oder jetzt anmelden!</p>
        </div>
    </div>
</div>
 
{% set level = level ??? 2 -%}

<div {{ html_attributes({
  id: id ?? false,
  class: 'offer-box',
}, attrs ?? {}) }}>
  {% if offer|default %}
    <div class="offer-box__offer">
      {% if offer.icon|default %}
        <div class="offer-box__icon">
          {% include '@icon' with { icon: offer.icon } only %}
        </div>
      {% endif %}

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

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

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

  {% if upsell|default %}
    <div class="offer-box__upsell u-inverted">
      {% if upsell.badge|default %}
        <div class="offer-box__badge">
          {% include '@badge' with upsell.badge only %}
        </div>
      {% endif %}

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

      {% if upsell.introText|default %}
        <div class="offer-box__text">
          {{- upsell.introText | componentize -}}
        </div>
      {% endif %}

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

      {% if upsell.outroText|default %}
        <div class="offer-box__text">
          {{- upsell.outroText | componentize -}}
        </div>
      {% endif %}
    </div>
  {% endif %}
</div>
 
{
  "offer": {
    "icon": "thumbs-up",
    "headline": {
      "text": "6 Monate gratis"
    },
    "text": "<p>Dein Gutschein ist gültig bis 15.12.2022. Alle Informationen dazu erhältst du in Kürze auch noch einmal per E-Mail.\n",
    "button": {
      "outline": true,
      "text": "Jetzt abonnieren",
      "href": "#"
    }
  },
  "upsell": {
    "badge": {
      "icon": "medal",
      "text": "Nur für die besten 10%"
    },
    "headline": {
      "kicker": "CV aktualisieren",
      "text": "12 Monate gratis holen"
    },
    "introText": "<p>Als Stipendiat:in von e-fellows.net profitierst Du von allen Vorteilen. Aktualisiere Deinen Lebenslauf regelmäßig um Deinen Status zu behalten.\n",
    "button": {
      "text": "Lebenslauf aktualisieren",
      "link": "#"
    },
    "outroText": "<p>Oder jetzt anmelden!</p>\n"
  }
}
  • Content: 
    :root {
  --offerbox-offer-background: var(--color-cyan-light);
  --offerbox-upsell-background: var(--color-midnight);
  --offerbox-upsell-color: var(--color-white);
  --offerbox-padding-block: 5rem;

  @include use-responsive-sizing(--offerbox-padding-inline, (xs: 3.5rem, xl: 5rem));
}

.offer-box__offer {
  background-color: var(--offerbox-offer-background);
  display: grid;
  gap: 2.5rem;
  padding-block: var(--offerbox-padding-block);
  padding-inline: var(--offerbox-padding-inline);
  text-align: center;
}

.offer-box__upsell {
  background-color: var(--offerbox-upsell-background);
  color: var(--offerbox-upsell-color);
  display: grid;
  font-size: 1.4rem;
  gap: 2.5rem;
  padding-block: var(--offerbox-padding-block);
  padding-inline: var(--offerbox-padding-inline);
  position: relative;
  text-align: center;
}

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

.offer-box__headline {
  --headline-kicker-spacing: 1rem;

  &:not(:last-child) {
    margin-block-end: -1.5rem;
  }
}

.offer-box__badge {
  color: var(--color-midnight);
  display: flex;
  justify-content: center;
}

.offer-box__icon {
  color: var(--color-orange);
  font-size: 8rem;
}

.offer-box__text {
  line-height: var(--line-height-body);
  margin-inline: auto;
  max-inline-size: 50rem;
}
  • URL: /components/raw/offer-box/offer-box.scss
  • Filesystem Path: src/components/2-molecules/offer-box/offer-box.scss
  • Size: 1.6 KB

No notes defined.