Vebego Component Library

Vacancy Highlight 

<!-- Default -->
<div class="mol-vacancy-highlight">
    <div class="vacancy-image-wrapper">
        <picture class="atm-image ">
            <img class="" src="https://picsum.photos/id/250/400/200" alt="">
        </picture>
        <div class="atm-badge bg-accent-3 text-black">Stap 1</div>

    </div>
    <div class="vacancy-highlight-content">
        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

        <div class="vacancy-tags">
            <div class="mol-icon-tag">
                <i class="atm-icon  far fa-map-marker-alt  fa-sm "></i>
                Maastricht
            </div>
            <div class="mol-icon-tag">
                <i class="atm-icon  far fa-clock  fa-sm "></i>
                Vrijdag 12 oktober
            </div>
            <div class="mol-icon-tag">
                <i class="atm-icon  far fa-wallet  fa-sm "></i>
                € 2.500 - € 3.000
            </div>
            <div class="mol-icon-tag">
                <i class="atm-icon  far fa-building  fa-sm "></i>
                Groenvoorziening
            </div>
            <div class="mol-icon-tag">
                <i class="atm-icon  far fa-face-smile  fa-lg "></i>
                Opleidingen en intern doorgroeien
            </div>
        </div>

        <div class="vacancy-highlight-bottom">
            <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Bekijk vacature</a>
            <div class="button-wrapper">
                <a class="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  fal fa-arrow-right   fa-fw"></i>

                        </span>
                    </div>
                    <span class="button-triangle"></span>
                </a>

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


<!-- Image -->
<div class="mol-vacancy-highlight image">
    <div class="vacancy-image-wrapper">
        <svg class="vacancy-mask" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 862 522">
            <defs>
                <clipPath id="vacancy-clip-" clipPathUnits="userSpaceOnUse">
                    <path d="M0.0442874 92.6595C0.0442874 92.6595 221.978 365.744 576.748 521.492C576.748 521.492 745.93 440.443 861.569 350.778C860.581 283.964 861.402 0.410729 861.402 0.410729L1.61132e-05 -5.72596e-05L0.0442874 92.6595Z" />
                </clipPath>
            </defs>
            <g clip-path="url(#vacancy-clip-)">
                <image href="" preserveAspectRatio="xMidYMid slice" />
            </g>
        </svg>
    </div>
    <div class="vacancy-highlight-content">
        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

        <div class="vacancy-highlight-bottom">
            <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Bekijk vacature</a>
            <div class="button-wrapper">
                <a class="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  fal fa-arrow-right   fa-fw"></i>

                        </span>
                    </div>
                    <span class="button-triangle"></span>
                </a>

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


<!-- Default -->
<div class="mol-vacancy-highlight{{#if modifier}} {{modifier}}{{/if}}">
    {{#if image}}
    <div class="vacancy-image-wrapper">
        {{render '@image' image}}
        {{#if badge}}
            {{render '@badge' badge merge=true}}
        {{/if}}
    </div>
    {{/if}}
    <div class="vacancy-highlight-content">
        {{#if heading}}
            {{render '@heading--h4' heading merge=true}}
        {{/if}}
        {{#if paragraph}}
            {{render '@paragraph' paragraph merge=true}}
        {{/if}}
        <div class="vacancy-tags">
            {{#if location}}
                {{render '@icon-tag' location merge=true}}
            {{/if}}
            {{#if hours}}
                {{render '@icon-tag' hours merge=true}}
            {{/if}}
            {{#if salary}}
                {{render '@icon-tag' salary merge=true}}
            {{/if}}
            {{#if company}}
                {{render '@icon-tag' company merge=true}}
            {{/if}}
            {{#if personal}}
                {{render '@icon-tag' personal merge=true}}
            {{/if}}
        </div>

        <div class="vacancy-highlight-bottom">
                {{#if link}}
                    {{render '@link' link merge=true}}
                {{/if}}
                {{#if button}}
                    <div class="button-wrapper">
                        {{render '@button-primary--icon-only-md' button merge=true}}
                    </div>
                {{/if}}
        </div>
    </div>
</div>

<!-- Image -->
<div class="mol-vacancy-highlight image">
    {{#if image}}
    <div class="vacancy-image-wrapper">
        <svg class="vacancy-mask" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 862 522">
            <defs>
                <clipPath id="vacancy-clip-{{@root.id}}" clipPathUnits="userSpaceOnUse">
                    <path d="M0.0442874 92.6595C0.0442874 92.6595 221.978 365.744 576.748 521.492C576.748 521.492 745.93 440.443 861.569 350.778C860.581 283.964 861.402 0.410729 861.402 0.410729L1.61132e-05 -5.72596e-05L0.0442874 92.6595Z"/>
                </clipPath>
            </defs>
            <g clip-path="url(#vacancy-clip-{{@root.id}})">
                <image href="{{image.cropUrl}}" preserveAspectRatio="xMidYMid slice" />
            </g>
        </svg>
    </div>
    {{/if}}
    <div class="vacancy-highlight-content">
        {{#if heading}}
            {{render '@heading--h4' heading merge=true}}
        {{/if}}

        <div class="vacancy-highlight-bottom">
                {{#if link}}
                    {{render '@link' link merge=true}}
                {{/if}}
                {{#if button}}
                    <div class="button-wrapper">
                        {{render '@button-primary--icon-only-md' button merge=true}}
                    </div>
                {{/if}}
        </div>
    </div>
</div>
 
/* Default */
{
  "image": {
    "src": "https://picsum.photos/id/250/400/200"
  },
  "badge": {
    "text": "uitgelicht",
    "modifier": "bg-accent-3 text-black"
  },
  "heading": {
    "tag": "h4",
    "text": "Wat zijn de belangrijkste schoonmaakdoelen?"
  },
  "location": {
    "text": "Maastricht",
    "icon": {
      "icon": "fa-map-marker-alt",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "hours": {
    "text": "Vrijdag 12 oktober",
    "icon": {
      "icon": "fa-clock",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "salary": {
    "text": "€ 2.500 - € 3.000",
    "icon": {
      "icon": "fa-wallet",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "company": {
    "text": "Groenvoorziening",
    "icon": {
      "icon": "fa-building",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "personal": {
    "text": "Opleidingen en intern doorgroeien",
    "icon": {
      "icon": "fa-face-smile",
      "style": "far",
      "size": "fa-lg"
    }
  },
  "link": {
    "text": "Bekijk vacature",
    "url": "#"
  },
  "button": {
    "icon": {
      "style": "fal",
      "icon": "fa-arrow-right"
    }
  }
}


/* Image */
{
  "image": {
    "src": "https://picsum.photos/id/250/400/200"
  },
  "badge": {
    "text": "uitgelicht",
    "modifier": "bg-accent-3 text-black"
  },
  "heading": {
    "tag": "h4",
    "text": "Wat zijn de belangrijkste schoonmaakdoelen?"
  },
  "location": {
    "text": "Maastricht",
    "icon": {
      "icon": "fa-map-marker-alt",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "hours": {
    "text": "Vrijdag 12 oktober",
    "icon": {
      "icon": "fa-clock",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "salary": {
    "text": "€ 2.500 - € 3.000",
    "icon": {
      "icon": "fa-wallet",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "company": {
    "text": "Groenvoorziening",
    "icon": {
      "icon": "fa-building",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "personal": {
    "text": "Opleidingen en intern doorgroeien",
    "icon": {
      "icon": "fa-face-smile",
      "style": "far",
      "size": "fa-lg"
    }
  },
  "link": {
    "text": "Bekijk vacature",
    "url": "#"
  },
  "button": {
    "icon": {
      "style": "fal",
      "icon": "fa-arrow-right"
    }
  }
}
  • Content: 
    .mol-vacancy-highlight {
    @apply rounded-lg overflow-hidden border-gray-100 border-solid border-2;

    .vacancy-highlight-content {
        @apply p-8;
    }

    img {
        @apply transition duration-300;
    }

    &.overview-header-primary * {
        @apply text-white;
    }

    &.overview-header-secondary * {
        @apply text-black;
    }

    .vacancy-image-wrapper {
        @apply relative;

        .atm-badge {
            @apply absolute bottom-4 left-4;
        }
    }

    .mol-icon-badge .atm-icon {
        @apply mr-2;
    }

    .atm-image {
        @apply w-auto aspect-[16/9] md:aspect-[3/2];
        @apply overflow-hidden;

        img {
            @apply w-full;
            @apply h-full;
            object-fit: cover;
        }
    }
    &:hover {
        .atm-image {
            img {
                transform: scale(1.05);
            }
        }

        .atm-link {
            @apply no-underline;
        }

        .button-triangle {
            transform: translateY(-50%) scale(var(--scale));
        }
    }

    .atm-paragraph {
        @apply mb-5;
    }

    .vacancy-tags {
        @apply flex md:flex-col flex-wrap gap-3 gap-x-3 mb-8;

        .atm-icon {
            @apply text-lg w-5;
        }
    }

    .reading-time {
        .atm-icon {
            @apply mr-1;
        }

        .text {
            @apply text-sm;
        }
    }

    .relative-date {
        .date {
            @apply text-sm;
        }
    }

    &.img-left {
        @apply md:grid;
        @apply md:grid-cols-2;
        @apply md:gap-x-12;
    }

    .wrap-sdg {
        @apply flex;

        .atm-image {
            @apply w-16;
            @apply h-16;
            margin-right: 1px;
        }
    }

    .vacancy-highlight-bottom {
        @apply flex justify-between items-center;

        .atm-link {
            @apply text-black font-display text-md;
        }
    }

    &.image {
        @apply border-[#BBA6CD] border-4 bg-primary bg-opacity-5;

        .vacancy-image-wrapper {
            @apply relative overflow-hidden;

            .vacancy-overlay-link {
                @apply w-full h-full;
            }

            .vacancy-mask {
                @apply w-[150%] h-full ml-[-30%] mt-[-10%];

                image {
                    @apply w-full;
                }
            }
        }

        .vacancy-highlight-content {
            @apply p-8 lg:pt-4;
        }

        .atm-heading {
            @apply text-secondary-col-1 md:text-h2 text-h4;
            hyphens: auto;
        }

        .vacancy-tags {
            @apply mb-6;
        }

        .atm-paragraph {
            @apply mb-4 text-sm;
        }
    }
}
  • URL: /components/raw/vacancy-highlight/vacancy-highlight.css
  • Filesystem Path: src\components\03-molecules\vacancy-highlight\vacancy-highlight.css
  • Size: 2.8 KB

No notes defined.