Vebego Component Library

Vacancy page hero: Jobalert 

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

    <div class="hero-content-wrapper">
        <div class="hero-content">
            <h2 class="atm-heading ">Job alert</h2>

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

    <div class="hero-content-wrapper">
        <div class="hero-content">
            {{render '@heading' heading}}
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Job alert",
    "tag": "h2"
  },
  "image": {
    "src": "https://picsum.photos/id/250/263/360"
  },
  "content": true
}
  • 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;
        grid-area: 1/1;
        @apply flex items-center justify-between flex-wrap backdrop-blur-[20px];
        background: linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0.45) 100%
        );
        @apply p-6;

        .hero-content {
            @apply flex flex-col max-w-max w-full;
            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;
            }
        }
    }

    .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;
    }
}

.hero-content-wrapper.is-sticky
    ~ *
    .mol-contact-info-cta
    #contact-cta-link-wrapper,
.hero-content-wrapper.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 {
        @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: 1.9 KB
  • Content: 
    const hero = document.querySelector(
    '.tpl-vacancy-page-vacancies .hero-content-wrapper'
);

// Only run if hero element exists
if (hero) {
    const placeholder = document.createElement('div');
    const originalOffset = hero.getBoundingClientRect().top + window.scrollY; // vaste startpositie

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

    let isSticky = false; // voorkomt constant togglen

    window.addEventListener('scroll', () => {
        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;
        }
    });
}
  • URL: /components/raw/vacancy-page-hero/vacancy-page-hero.js
  • Filesystem Path: src\components\04-organisms\vacancy-page-hero\vacancy-page-hero.js
  • Size: 976 Bytes

No notes defined.