@e-fellows/website-2022

Kontaktstörer 

<div class="float-contact u-inverted">
    <div class="float-contact__floater">
        <div class="float-contact__headline">
            <h2 class="headline"><span class="headline__text">Dein Einstieg bei Deloitte</span></h2>
        </div>

        <div class="float-contact__button">
            <a class="icon-button" href="#">
                <span class="icon-button__icon">
                    <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                    </svg> </span>

                <span class="icon-button__text u-underline">Name der Seite</span>

            </a>
        </div>
    </div>
</div>
 
<div {{ html_attributes({
  id: id ?? false,
  class: ['float-contact', 'u-inverted'],
}, attrs ?? {}) }}>
  <div class="float-contact__floater">
    {% if text|default %}
      <div class="float-contact__headline">
        {% include '@headline' with {
          text: text,
          level: 2,
          size: false,
        } only %}
      </div>
    {% endif %}

    {% if button|default %}
      <div class="float-contact__button">
        {% include '@icon-button' with button only %}
      </div>
    {% endif %}
  </div>
</div>
 
{
  "text": "Dein Einstieg bei Deloitte",
  "button": {
    "text": "Name der Seite",
    "link": "#"
  }
}
  • Content: 
    .float-contact {
  display: inline;
}

.float-contact__floater {
  background-color: var(--color-midnight);
  color: var(--color-white);
  inline-size: 100vw;
  inset-block-end: -1rem;
  inset-inline-end: 0;
  margin-inline: auto;
  padding: var(--inner-container-padding);
  padding-block-end: calc(var(--inner-container-padding) + 1rem);
  position: sticky;
  transform: translateX(calc(var(--body-padding) * -1));
  z-index: z-index('float-contact');

  &::after {
    background-color: var(--color-midnight);
    block-size: 1rem;
    content: '';
    inline-size: 100vw;
    inset-block-end: 0;
    inset-inline-end: 100%;
    position: absolute;
    z-index: -1;
  }

  @include mq($from: 440px) {
    max-inline-size: 40rem;
    padding: 2.4rem;
    padding-block-end: 3.4rem;
    transform: translateX(calc((100vw - 100%) / 2));
  }
}

.float-contact__headline {
  margin-block-end: 2rem;

  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2rem, xl 2.6rem));
}

.float-contact__button {
  @include use-responsive-sizing(--icon-button-size, responsive-map(xs 3.6rem, xl 6.2rem));
  @include use-responsive-sizing(--icon-button-text-size, responsive-map(xs 1.6rem, xl 1.8rem));
}
  • URL: /components/raw/float-contact/float-contact.scss
  • Filesystem Path: src/components/2-molecules/float-contact/float-contact.scss
  • Size: 1.2 KB

No notes defined.