Vebego Component Library

Vacancy page hero 

<!-- Vacancy Page Hero -->
<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>


<!-- 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>


<!-- Vacancy Page Hero -->
<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>

<!-- Jobalert -->
<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>
 
/* Vacancy Page Hero */
{
  "heading": {
    "text": "Relevant voor jou",
    "tag": "h2"
  },
  "image": {
    "src": "https://picsum.photos/id/250/263/360"
  }
}


/* Jobalert */
{
  "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.