@e-fellows/website-2022

Call-To-Action Box: Default 

<div class="cta-box u-inverted">
    <div class="cta-box__headline">
        <h2 class="headline headline--2"><span class="headline__text">Sichere dir deine Teilnahme und melde dich für den IT-Day 2022 an</span></h2>
    </div>

    <div class="cta-box__button">
        <a class="button u-underline" href="#">Jetzt anmelden</a>
    </div>

    <svg class="icon icon--whirl cta-box__icon" viewBox="0 0 200 200" aria-hidden="true">
        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#whirl"></use>
    </svg>
</div>
 
{% set level = level ??? 2 -%}

<div {{ html_attributes({
  id: id ?? false,
  class: 'cta-box u-inverted',
}, attrs ?? {}) }}>
  {% if headline|default %}
    <div class="cta-box__headline">
      {% include '@headline' with headline | merge({
        size: 2,
        level: level,
      }) only %}
    </div>
  {% endif %}

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

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

  {% include '@icon' with {
    icon: 'whirl',
    class: 'cta-box__icon',
  } only %}
</div>
 
{
  "headline": {
    "text": "Sichere dir deine Teilnahme und melde dich für den IT-Day 2022 an"
  },
  "button": {
    "link": "#",
    "text": "Jetzt anmelden"
  }
}
  • Content: 
    :root {
  --cta-box-background-color: var(--color-midnight);
  --cta-box-color: var(--color-white);
  --cta-box-z-index: #{z-index('default')};
}

.cta-box {
  background-color: var(--cta-box-background-color);
  color: var(--cta-box-color);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
  z-index: var(--cta-box-z-index);

  @include use-responsive-sizing(padding-block, responsive-map(xs 3rem, xl 5rem));
  @include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 5rem));
}

.cta-box__text {
  line-height: var(--line-height-body);

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

.cta-box__headline,
.cta-box__text,
.cta-box__button {
  position: relative;
  z-index: 2;
}

.cta-box__icon {
  color: var(--color-orange);
  inset-block-start: 100%;
  inset-inline: 100%;
  position: absolute;
  transform: translate(-115%, -70%) rotate(60deg);
  z-index: 1;

  @include use-responsive-sizing(font-size, responsive-map(xs 12rem, l 17rem));

  @include mq($from: l) {
    transform: translate(calc(-100% + 2rem), -66%) rotate(50deg);
  }
}
  • URL: /components/raw/cta-box/cta-box.scss
  • Filesystem Path: src/components/2-molecules/cta-box/cta-box.scss
  • Size: 1.1 KB

No notes defined.