Vebego Component Library

Vacancy page hero: Vacancy Page Hero 

<section class="org-vacancy-page-hero" data-hero-section>
    <picture class="atm-image ">
        <img class="" src="https://picsum.photos/id/250/263/360" alt="">
    </picture>

    <div class="hero-content-wrapper" data-vacancy-bar>
        <div class="hero-content">
            <h2 class="atm-heading ">Relevant voor jou</h2>

            <div class="mol-specs-list">
                <ul>
                    <li>
                        <i class="atm-icon  fas fa-circle  fa-xs "></i>

                        Locatie
                    </li>
                    <li>
                        <i class="atm-icon  fas fa-circle  fa-xs "></i>

                        Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
                    </li>
                    <li>
                        <i class="atm-icon  fas fa-circle  fa-xs "></i>

                        Aantal uren
                    </li>
                    <li>
                        <i class="atm-icon  fas fa-circle  fa-xs "></i>

                        Salaris
                    </li>
                </ul>
            </div>
        </div>

        <div class="hero-links">
            <a class="atm-button atm-button-primary  button-md icon-left   ">
                <div class="button-content-wrapper">
                    <span class="button-content">
                        <i class="atm-icon  fal fa-arrow-right   "></i>

                        <span>Button</span>
                    </span>
                </div>
                <span class="button-triangle"></span>
            </a>

            <div class="mol-contact-info-cta" data-contact-cta data-contact-cta-state="not-active">
                <button class="contact-cta-toggle atm-button atm-button-primary button-md icon-only  button-icon-only">
                    <div class="button-content-wrapper">
                        <span class="button-content">
                            <i class="atm-icon not-active far fa-message fa-fw" style="--scale: 1;"></i>
                            <i class="atm-icon active far fa-xmark fa-fw" style="--scale: 1;"></i>
                        </span>
                    </div>
                    <span class="button-triangle" style="--scale: 1;"></span>
                </button>

                <div id="contact-cta-link-wrapper">
                    <div id="back-to-top">
                        <a href="">
                            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="50" cy="50" r="46" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" />
                                <defs>
                                    <radialGradient id="gradient" cx="1" cy="1" r="1.5">
                                        <stop offset="0%" stop-color="#990D7F" />
                                        <stop offset="100%" stop-color="#990D7F" />
                                    </radialGradient>
                                </defs>
                            </svg>
                            <span class="atm-icon fa-light fa-arrow-up"></span>
                        </a>
                    </div>
                    <a class="atm-button atm-button-primary contact-cta-link button-md icon-only  button-icon-only ">
                        <div class="button-content-wrapper">
                            <span class="button-content">

                                <i class="atm-icon  far fa-phone   fa-fw"></i>

                            </span>
                        </div>
                        <span class="button-triangle"></span>
                    </a>

                    <a class="atm-button atm-button-primary contact-cta-link button-md icon-only  button-icon-only ">
                        <div class="button-content-wrapper">
                            <span class="button-content">

                                <i class="atm-icon  far fa-envelope   fa-fw"></i>

                            </span>
                        </div>
                        <span class="button-triangle"></span>
                    </a>

                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="org-vacancy-page-hero" data-hero-section>
    {{render '@image' image}}

    <div class="hero-content-wrapper" data-vacancy-bar>
        <div class="hero-content">
            {{render '@heading' heading}}
            {{render '@specs-list' specsList}}
        </div>
        
        <div class="hero-links">
          {{ render '@button-primary--icon-left-md' button merge=true}}
          {{render '@contact-cta' contactCta}}
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Relevant voor jou",
    "tag": "h2"
  },
  "image": {
    "src": "https://picsum.photos/id/250/263/360"
  }
}
  • Content: 
    .org-vacancy-page-hero {
    @apply relative grid items-end rounded-2xl;
    @apply pb-4 md:pb-0 min-h-[540px] h-[70vh] md:mx-16 mt-5 mb-14;

    .atm-image {
        @apply relative h-full transition-all;
        grid-area: 1/1;

        img {
            @apply w-full h-full object-cover absolute md:rounded-2xl;
        }
    }

    .hero-content-wrapper {
        @apply relative z-10 transition-all m-8 rounded-2xl;
        @apply flex items-center justify-between gap-4 flex-wrap backdrop-blur-[20px];
        @apply p-6;
        grid-area: 1/1;
        background: linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0.45) 100%
        );

        .hero-content {
            @apply flex flex-col w-full max-w-3xl;
            hyphens: auto;

            .atm-heading {
                @apply mb-3;
            }
        }

        .hero-links {
            @apply flex items-center gap-4 flex-wrap;

            .mol-contact-info-cta {
                @apply relative top-0 right-0;
            }

            .atm-button {
                @apply m-0;
            }
        }
    }

    .hero-content-wrapper.is-sticky {
        @apply fixed w-full z-[1000] shadow-[0_4px_10px_rgba(0,0,0,0.1)] m-0 left-0 top-0 bg-white;
    }
}

.mol-contact-info-cta #contact-cta-link-wrapper {
    @apply absolute bottom-12 cursor-default;

    .mol-social-media {
        @apply mb-4 inline-flex;
    }
}


:is(.hero-content-wrapper, .hero-content-wrapper-ab).is-sticky
  ~ *
  .mol-contact-info-cta
  #contact-cta-link-wrapper,
:is(.hero-content-wrapper, .hero-content-wrapper-ab).is-sticky
  .mol-contact-info-cta
  #contact-cta-link-wrapper {
  @apply top-full bottom-auto mt-2;
}


.org-vacancy-page-hero.job-alert {
    @apply h-[50vh];

    .hero-content-wrapper, .hero-content-wrapper-ab {
        @apply bg-secondary-col-1 bg-none p-8;

        .atm-heading {
            @apply mb-0 text-white;
        }
    }
}

.org-vacancy-page-hero-ab {
    @apply relative grid items-end lg:rounded-3xl overflow-hidden;
    @apply min-h-[540px] h-[70vh] lg:mx-16 mb-14;

    .atm-image {
        @apply relative h-full transition-all;
        grid-area: 1/1;

        img {
            @apply w-full h-full object-cover absolute;
        }
    }

    .hero-content-wrapper-ab {
        @apply relative z-10 rounded-2xl m-4 lg:m-8;
        @apply flex items-center justify-between gap-4 flex-wrap;
        @apply backdrop-blur-[20px];
        grid-area: 1/1;
        background: linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0.45) 100%
        );
        @apply p-4 lg:p-6;

        &.is-sticky {
            @apply fixed w-full z-[1000] shadow-[0_4px_10px_rgba(0,0,0,0.1)] m-0 left-0 top-0 bg-white;
        }

        .hero-content {
            @apply flex flex-col max-w-3xl w-full mb-4;
            hyphens: auto;
            /* transition: all 0.3s ease-in-out; */

            .atm-heading {
                @apply mb-3;
            }

            .mol-specs-list {
                &.mobile-sticky {
                    @apply hidden;
                }
            }
        }

        .hero-links {
            @apply flex items-center gap-4;
            transition: all 0.3s ease-in-out;

            .atm-button {
                @apply m-0;
            }

            .mol-contact-info-cta {
                @apply relative top-0 right-0;
            }

            .button-apply-sticky {
                @apply hidden;
            }
        }

        &.is-fixed {
            @apply fixed bottom-[-100%] left-0 w-full z-[100] bg-white rounded-none m-0 grid grid-cols-12 items-center;
            @apply shadow-[0_-4px_6px_-1px_rgb(0_0_0_/_0.1),0_-2px_4px_-2px_rgb(0_0_0_/_0.1)];
            transition: bottom 0.5s ease-in-out;

            @media (prefers-reduced-motion: reduce) {
                transition: opacity 0.2s ease-in-out;
                transform: none;
                opacity: 0;

                &.is-visible {
                    opacity: 1;
                }
            }

            &.is-visible {
                @apply bottom-0;
                transition: bottom 0.2s ease-in-out;
            }

            .hero-content {
                @apply mb-0 col-span-8;

                .atm-heading {
                    @apply text-h4 lg:text-h1;
                    @apply max-w-full text-ellipsis overflow-hidden whitespace-nowrap;
                    @apply m-0;
                }

                .mol-specs-list {
                    @apply hidden md:block;
                    &.mobile-sticky {
                        @apply block md:hidden;
                    }
                }
            }

            .hero-links {
                @apply col-span-4 justify-end;

                .atm-button {
                    @apply m-0;
                }
                .mol-contact-info-cta {
                    @apply hidden md:flex;
                }

                .button-apply {
                    @apply hidden md:inline-block;
                }

                .button-apply-sticky {
                    @apply inline-block md:hidden;
                }
            }

            &.no-specs {
                .hero-content {
                    @apply hidden md:block;
                }

                .hero-links {
                    @apply col-span-12 justify-center md:col-span-4 md:justify-end;
                }
            }
        }
    }
}

.org-vacancy-page-hero-ab.job-alert {
    @apply h-[50vh];

    .hero-content-wrapper {
        @apply bg-secondary-col-1 bg-none p-8;

        .atm-heading {
            @apply mb-0 text-white;
        }
    }
}
  • URL: /components/raw/vacancy-page-hero/vacancy-page-hero.css
  • Filesystem Path: src/components/04-organisms/vacancy-page-hero/vacancy-page-hero.css
  • Size: 5.7 KB
  • Content: 
    const hero = document.querySelector(
    '.tpl-vacancy-page-vacancies .hero-content-wrapper'
);

// Only run if hero element exists
if (hero) {
    setStickyUpper(hero);
}

const heroSection = document.querySelector('.org-vacancy-page-hero-ab');

if (heroSection) {
    const vacancyBar = heroSection.querySelector('.hero-content-wrapper-ab');
    const isTabletOrMobile = window.innerWidth < 769;

    if (vacancyBar) {
        if (isTabletOrMobile) {
            setStickyLower(vacancyBar);
        }
        else {
            setStickyUpper(vacancyBar);
        }
    }
}

function setStickyUpper(hero) {
    const placeholder = document.createElement('div');
    const originalOffset = hero.getBoundingClientRect().top + window.scrollY; // vaste startpositie
    console.log(originalOffset);

    placeholder.style.height = `${hero.offsetHeight}px`;
    placeholder.style.display = 'none';
    hero.parentNode.insertBefore(placeholder, hero);

    let isSticky = false; // voorkomt constant togglen

    window.addEventListener('scroll', () => {
        console.log(window.scrollY, isSticky)
        if (window.scrollY > originalOffset && !isSticky) {
            hero.classList.add('is-sticky');
            placeholder.style.display = 'block';
            isSticky = true;
        } else if (window.scrollY <= originalOffset && isSticky) {
            hero.classList.remove('is-sticky');
            placeholder.style.display = 'none';
            isSticky = false;
        }
    });
}

function setStickyLower(vacancyBar) {
    const specsList = vacancyBar.querySelector('.mol-specs-list:not(.mobile-sticky) li');
        if (!specsList) {
            vacancyBar.classList.add('no-specs');
        }

        let hasAnimated = false;
        let animationTimeout = null;

        const heroObserver = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (!entry.isIntersecting) {
                        vacancyBar.classList.add('is-fixed');
                        if (!hasAnimated) {
                            hasAnimated = true;
                            animationTimeout = setTimeout(() => {
                                vacancyBar.classList.add('is-visible');
                            }, 100);
                        }
                    } else {
                        if (animationTimeout) {
                            clearTimeout(animationTimeout);
                            animationTimeout = null;
                        }
                        vacancyBar.classList.remove('is-visible', 'is-fixed');
                        hasAnimated = false;
                    }
                });
            },
            {
                threshold: 0,
                rootMargin: '0px'
            }
        );

        const slideDownObserver = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        vacancyBar.classList.remove('is-visible');
                    }
                });
            },
            {
                threshold: 0,
                rootMargin: '0px'
            }
        );

        const footer = document.querySelector('footer');
        if (footer) {
            const footerObserver = new IntersectionObserver(
                (entries) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            vacancyBar.classList.remove('is-visible');
                        } else if (vacancyBar.classList.contains('is-fixed')) {
                            vacancyBar.classList.add('is-visible');
                        }
                    });
                },
                {
                    threshold: 0,
                    rootMargin: '0px'
                }
            );

            footerObserver.observe(footer);
        }

        heroObserver.observe(heroSection);
        slideDownObserver.observe(heroSection);
}
  • URL: /components/raw/vacancy-page-hero/vacancy-page-hero.js
  • Filesystem Path: src/components/04-organisms/vacancy-page-hero/vacancy-page-hero.js
  • Size: 4.1 KB

No notes defined.