Vebego Component Library

Vacancy homepage hero: With hero video 

<section class="org-vacancy-homepage-hero">
    <div class="hero-band ">

        <div class="atm-video">
            <video playsinline autoplay muted loop>
                <source src="https://www.vebego.nl/media/sbwp5btl/vzs_bannerbeeld.mp4" type="video/mp4">
            </video>
        </div>

        <div class="hero-wrapper">
            <svg class="hero-path-mask" preserveAspectRatio="none" viewBox="0 0 1921.38 1053.3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="hero-path-line" d="M.69,830.4s297.33,128.71,722.76,189.75c18.17,2.61,185.27,21.08,185.27,21.08,306.97,25.68,660.88,8.63,1010.78-110.32" />
                <path class="hero-path-line" d="M634.81,1.4s532.18,394.01,1126.06,417.19c0,0,86.69-92.71,159.04-208.6" />
            </svg>
        </div>

        <div class="vebego-container">
            <div class="vacancy-hero-content">
                <h1 class="atm-heading h1">Vind de baan die bij je past</h1>

                <form action="#" class="vacancy-hero-form">
                    <div class="input-wrapper">
                        <div class="input-container">
                            <div class="atm-form-input  ">
                                <input class="form-input" type="text" id="vacancy-homepage-search-name" name="input">
                                <label class="atm-form-label form-label " for="vacancy-homepage-search-name">Welke vacature zoek je?</label>

                            </div>

                            <span class="input-separator">en/of</span>
                            <div class="atm-form-input  ">
                                <input class="form-input" type="text" id="vacancy-homepage-search-location" name="input">
                                <label class="atm-form-label form-label " for="vacancy-homepage-search-location">Wat is je woonplaats?</label>

                            </div>

                            <div class="location-btn">
                                <button class="atm-button atm-button-primary  button-md  button-icon-only " type="button">
                                    <div class="button-content-wrapper">
                                        <span class="button-content">

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

                                        </span>
                                    </div>
                                </button>

                            </div>
                        </div>

                        <button type="submit" class="atm-button atm-button-primary button-md search-btn">
                            <div class="button-content-wrapper">
                                <span>Bekijk vacatures</span>
                            </div>
                        </button>
                    </div>
                </form>

                <div class="hero-tags">
                    <div class="hero-tags-heading">
                        <h2 class="atm-heading h2">Ga direct naar vacatures voor</h2>

                    </div>
                    <div class="mol-tag-bubble">
                        <a class="atm-tag on-color" title="This is a tag link" href="#">
                            <span>
                                Facility management
                            </span>
                        </a>

                        <a class="atm-tag on-color" title="This is a tag link" href="#">
                            <span>
                                Hoofdkantoor
                            </span>
                        </a>

                        <a class="atm-tag on-color" title="This is a tag link" href="#">
                            <span>
                                Zorg
                            </span>
                        </a>

                        <a class="atm-tag on-color" title="This is a tag link" href="#">
                            <span>
                                Schoonmaak
                            </span>
                        </a>

                        <a class="atm-tag on-color" title="This is a tag link" href="#">
                            <span>
                                Glas- en gevelreiniging
                            </span>
                        </a>

                        <a class="atm-tag on-color" title="This is a tag link" href="#">
                            <span>
                                Groenvoorziening
                            </span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="trailing-media">
        <div class="vebego-container">
            <div class="trailing-media-inner">
                <div class="trailing-media-desktop">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/1015/1216/384" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="trailing-media-mobile">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/1015/768/768" alt="" loading="lazy">
                    </picture>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="org-vacancy-homepage-hero">
    <div class="hero-band {{#unless image}}{{#unless video}}no-media{{/unless}}{{/unless}}">
        {{#if video}}
            {{render '@video' video merge=true}}
        {{else if image}}
            {{render '@image' image merge=true}}
        {{/if}}

        <div class="hero-wrapper">
            <svg class="hero-path-mask" preserveAspectRatio="none" viewBox="0 0 1921.38 1053.3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="hero-path-line" d="M.69,830.4s297.33,128.71,722.76,189.75c18.17,2.61,185.27,21.08,185.27,21.08,306.97,25.68,660.88,8.63,1010.78-110.32" />
                <path class="hero-path-line" d="M634.81,1.4s532.18,394.01,1126.06,417.19c0,0,86.69-92.71,159.04-208.6" />
            </svg>
        </div>

        <div class="vebego-container">
            <div class="vacancy-hero-content">
                {{render '@heading' heading merge=true}}

                <form action="#" class="vacancy-hero-form">
                    <div class="input-wrapper">
                        <div class="input-container">
                            {{render '@input' nameInput merge=true}}
                            <span class="input-separator">{{andOr}}</span>
                            {{render '@input' locationInput merge=true}}
                            <div class="location-btn">
                                {{render '@button-primary--icon-only-md' locationButton merge=true}}
                            </div>
                        </div>

                        <button type="submit" class="atm-button atm-button-primary button-md search-btn">
                            <div class="button-content-wrapper">
                                <span>{{searchText}}</span>
                            </div>
                        </button>
                    </div>
                </form>

                <div class="hero-tags">
                    <div class="hero-tags-heading">
                        {{render '@heading' tagBubbleHeading merge=true}}
                    </div>
                    {{render '@tag-bubble' tagBubble merge=true}}
                </div>
            </div>
        </div>
    </div>

    <div class="trailing-media">
        <div class="vebego-container">
            <div class="trailing-media-inner">
                {{#if trailingVideo}}
                    {{render '@video' trailingVideo merge=true}}
                {{else}}
                    <div class="trailing-media-desktop">
                        {{render '@image' trailingImage merge=true}}
                    </div>
                    <div class="trailing-media-mobile">
                        {{render '@image' trailingImageMobile merge=true}}
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
</section>
 
{
  "nameInput": {
    "type": "text",
    "id": "vacancy-homepage-search-name",
    "label": {
      "text": "Welke vacature zoek je?",
      "for": "vacancy-homepage-search-name"
    },
    "errorIcon": {
      "icon": ""
    },
    "validIcon": {
      "icon": ""
    }
  },
  "andOr": "en/of",
  "locationInput": {
    "type": "text",
    "id": "vacancy-homepage-search-location",
    "label": {
      "text": "Wat is je woonplaats?",
      "for": "vacancy-homepage-search-location"
    },
    "errorIcon": {
      "icon": ""
    },
    "validIcon": {
      "icon": ""
    }
  },
  "locationButton": {
    "element": "button",
    "type": "button",
    "modifier": "button-md",
    "icon": {
      "style": "far",
      "icon": "fa-location-arrow"
    },
    "showTriangle": false
  },
  "searchText": "Bekijk vacatures",
  "heading": {
    "text": "Vind de baan die bij je past",
    "tag": "h1",
    "modifier": "h1"
  },
  "tagBubbleHeading": {
    "text": "Ga direct naar vacatures voor",
    "tag": "h2",
    "modifier": "h2"
  },
  "tagBubble": {
    "tags": [
      {
        "text": "Facility management",
        "modifier": "on-color"
      },
      {
        "text": "Hoofdkantoor",
        "modifier": "on-color"
      },
      {
        "text": "Zorg",
        "modifier": "on-color"
      },
      {
        "text": "Schoonmaak",
        "modifier": "on-color"
      },
      {
        "text": "Glas- en gevelreiniging",
        "modifier": "on-color"
      },
      {
        "text": "Groenvoorziening",
        "modifier": "on-color"
      }
    ]
  },
  "trailingImage": {
    "src": "https://picsum.photos/id/1015/1216/384",
    "alt": "",
    "sources": false
  },
  "trailingImageMobile": {
    "src": "https://picsum.photos/id/1015/768/768",
    "alt": "",
    "sources": false
  },
  "video": {
    "url": "https://www.vebego.nl/media/sbwp5btl/vzs_bannerbeeld.mp4",
    "autoPlay": true,
    "showControls": false,
    "youtube": false,
    "vimeo": false
  }
}
  • Content: 
    .org-vacancy-homepage-hero {
    @apply relative;

    .hero-band {
        @apply relative overflow-hidden;
        @apply rounded-b-2xl;
        @apply pt-32 md:pt-40;

        &.no-media {
            @apply bg-lilac-100;

            .hero-path-line {
                stroke: var(--color-lilac);
            }
        }

        > .atm-image,
        > .atm-video {
            @apply absolute inset-0 z-0 h-full w-full p-0;

            img,
            video {
                @apply absolute inset-0 h-full w-full object-cover;
            }
        }
    }

    .hero-wrapper {
        @apply absolute top-0 left-0 z-10 h-full w-full overflow-hidden pointer-events-none;

        .hero-path-mask {
            @apply h-full absolute top-1/2 -translate-y-1/2 w-[201%] -left-full md:-left-1/2 md:w-[151%] lg:left-0 lg:w-[101%] lg:h-[90%] lg:top-0 lg:translate-y-0;
        }

        .hero-path-line {
            fill: none;
            stroke: var(--color-white);
            stroke-width: 3px;
            stroke-miterlimit: 10;
        }
    }

    .vacancy-hero-content {
        @apply relative z-20;

        padding-bottom: calc(50% + 2.5rem);

        @variant md {
            padding-bottom: calc(15.8% + 2.5rem);
        }

        /* The page title is centred above the search bar and needs more air under it than the heading atom gives on its own. */
        > .atm-heading {
            @apply mb-8 text-center text-secondary-col-1 md:mb-11;
        }
    }

    .vacancy-hero-form {
        @apply relative flex items-center bg-white;
        @apply rounded-2xl md:rounded-full;
        box-shadow: 0 2px 16px -6px rgba(0, 0, 0, 0.35);

        .input-wrapper {
            @apply flex w-full flex-col gap-2 p-2;
            @apply md:flex-row md:items-center md:gap-3 md:p-2.5;
        }

        .input-container {
            @apply relative flex w-full flex-wrap items-center gap-y-2;
            @apply md:flex-nowrap md:gap-3;

            .atm-form-input {
                @apply w-full;

                @variant md {
                    @apply flex-1;
                }

                .form-input {
                    @apply h-12 w-full rounded-full border-0 bg-gray-50 px-6;
                }

                .form-label {
                    @apply left-6;
                }
            }

            /* The name field and the "en/of" label share the first row on mobile. */
            .atm-form-input:first-of-type {
                @apply w-[calc(100%-4rem)];
            }

            .input-separator {
                @apply flex-none px-2 text-sm text-black;
            }

            .location-btn {
                @apply absolute right-2 bottom-1 h-10 w-10;

                @variant md {
                    @apply top-1/2 right-3 bottom-auto -translate-y-1/2;
                }

                .atm-button-primary {
                    @apply h-10 w-10 bg-transparent text-md text-black;

                    .button-content-wrapper {
                        @apply h-10;
                    }
                }
            }
        }

        .search-btn {
            @apply w-full shrink-0 justify-center px-6 text-center md:w-auto;

            .button-content-wrapper {
                @apply h-11 md:h-12;
            }
        }
    }

    .hero-tags {
        @apply relative mt-6 flex flex-col gap-3;
        @apply md:mt-10 md:flex-row md:items-start md:gap-8;

        @apply p-4 md:p-6;

        .hero-tags-heading {
            @apply md:w-1/4 md:shrink-0;

            .atm-heading {
                @apply text-secondary-col-1;
            }
        }
    }

    .hero-band:not(.no-media) .hero-tags::before {
        content: '';
        @apply absolute inset-0 -z-10 rounded-2xl bg-white;
    }

    /* Over a photo or video the magenta title gets the same white footing as the tag row, shrunk to the text so it still reads as a title. */
    .hero-band:not(.no-media) .vacancy-hero-content > .atm-heading {
        @apply mx-auto w-fit rounded-2xl bg-white px-6 py-3;
    }

    .trailing-media {
        @apply relative z-20;

        .trailing-media-inner {
            @apply -mt-[50%] md:-mt-[15.8%];
            @apply overflow-hidden rounded-2xl;
            @apply aspect-square md:aspect-[1216/384];

            /* A video keeps its own 16/9 padding trick, so drop it and let the media fill (and crop to) the box. */
            .atm-image,
            .atm-video {
                @apply relative h-full w-full p-0;

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

        .trailing-media-desktop {
            @apply hidden h-full w-full md:block;
        }

        .trailing-media-mobile {
            @apply block h-full w-full md:hidden;
        }
    }
}
  • URL: /components/raw/vacancy-homepage-hero/vacancy-homepage-hero.css
  • Filesystem Path: src/components/04-organisms/vacancy-homepage-hero/vacancy-homepage-hero.css
  • Size: 4.8 KB

No notes defined.