Vebego Component Library

Vacancy overview hero 

<section class="org-vacancy-overview-hero">
    <div class="hero-content">
        <div class="hero-content-wrapper">
            <h1 class="atm-heading heading-with-styling">
                <i>Altijd een baan</i>
                <strong>om snel geld te verdienen</strong>
            </h1>

        </div>
    </div>
    <div class="hero-wrapper">
        <svg class="hero-path-mask" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1216 406" fill="none" preserveAspectRatio="none">
            <path d="M-9 126C-9 126 273 307 692.185 400.971C700.309 402.137 775.031 410.385 775.031 410.385C912.293 421.859 1070.55 414.239 1227 361.104M654.991 -47C654.991 -47 889.345 126.34 1150.87 136.538C1150.87 136.538 1189.04 95.7509 1220.91 44.7666" stroke="#DDD2E6" stroke-width="3.48" stroke-miterlimit="10" />
        </svg>
    </div>
</section>
 
<section class="org-vacancy-overview-hero">
  <div class="hero-content">
    <div class="hero-content-wrapper">
        {{#if heading}}
          {{render '@heading-with-styling' heading merge=true}}
        {{/if}}
    </div>
  </div>
    <div class="hero-wrapper">
      <svg class="hero-path-mask" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1216 406" fill="none" preserveAspectRatio="none">
        <path d="M-9 126C-9 126 273 307 692.185 400.971C700.309 402.137 775.031 410.385 775.031 410.385C912.293 421.859 1070.55 414.239 1227 361.104M654.991 -47C654.991 -47 889.345 126.34 1150.87 136.538C1150.87 136.538 1189.04 95.7509 1220.91 44.7666" stroke="#DDD2E6" stroke-width="3.48" stroke-miterlimit="10"/>
      </svg>
  </div>
</section>
 
{
  "heading": {
    "topText": "Altijd een baan",
    "bottomText": "om snel geld te verdienen",
    "tag": "h1"
  }
}
  • Content: 
    .org-vacancy-overview-hero {
    @apply flex items-center justify-center relative bg-[#EEE9F3] py-16 md:py-0 m-0 md:m-8 rounded-2xl overflow-hidden;
    @apply md:min-h-[400px] md:h-[40vh] h-[60vh] pb-4 md:pb-0;

    .atm-heading {
        @apply z-10;
    }

    .hero-content {
        @apply w-full max-w-4xl mx-auto px-8 text-center relative z-10;

        .hero-content-wrapper {
            .atm-heading {
                @apply my-4 text-secondary-col-1;
            }
        }
    }

    .hero-wrapper {
        @apply absolute top-0 left-0 z-0 h-full w-full flex flex-col-reverse md:flex-row pointer-events-none;

        .hero-path-mask {
            @apply absolute right-0 bottom-0;
            min-height: 100%;
        }
    }
}
  • URL: /components/raw/vacancy-overview-hero/vacancy-overview-hero.css
  • Filesystem Path: src\components\04-organisms\vacancy-overview-hero\vacancy-overview-hero.css
  • Size: 771 Bytes

No notes defined.