<section class="org-vacancy-page-hero">
<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 ">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">
{{render '@image' image}}
<div class="hero-content-wrapper">
<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"
}
}
.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;
}
}
}
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;
}
});
}
No notes defined.