Swegon Component Library

Vacancy Card: Vacancy Card Gray 

<div class="vacancy-card vacancy-card--gray">
    <a href="#" class="vacancy-card__cta">
        <div class="vacancy-card__body">
            <div class="vacancy-card__top-info">
                <span class="vacancy-card__follow-link">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-external-link"></use>
                    </svg>
                </span>
                <h4 class="vacancy-card__title">Servicetekniker til Kjøle- og varmeprodukter</h4>
                <ul class="vacancy-card__list">
                    <li>
                        <strong>Plats:</strong>
                        <span>Stanseveien 28, 0976 Oslo</span>
                    </li>
                    <li>
                        <strong>Omfang:</strong>
                        <span>Heltid</span>
                    </li>
                    <li>
                        <strong>Søknadsfrist:</strong>
                        <span>26.05.2023</span>
                    </li>
                </ul>
            </div>
            <div class="vacancy-card__description">
                <div class="heading">Heading text</div>
                <p>Vi har behov for å styrke vår avdeling innen kjøling i Bergen og søker derfor en strukturert og positiv kollega til stillingen som servicetekniker. Vil du være en del av support-teamet for Swegon Norge med ansvar for kjøle- og varmeprodukter? Har du lyst på en variert og innholdsrik arbeidsdag? Liker du å ha kontakt med mennesker? Blir du motivert av å løse tekniske problemer?</p>
            </div>
        </div>
    </a>
</div>
 
<div class="vacancy-card {{ getmodifiers modifiers "vacancy-card" }}">
    <a href="#" class="vacancy-card__cta">
        <div class="vacancy-card__body">
            <div class="vacancy-card__top-info">
                <span class="vacancy-card__follow-link">
                    {{> @icon id=linkIcon}}
                </span>
                {{#if title}}<h4 class="vacancy-card__title">{{{ title }}}</h4>{{/if}}
                <ul class="vacancy-card__list">
                    <li>
                        <strong>{{ locationTitle }}</strong>
                        <span>{{ locationInfo }}</span>
                    </li>
                    <li>
                        <strong>{{ employmentTitle }}</strong>
                        <span>{{ employmentInfo }}</span>
                    </li>
                    <li>
                        <strong>{{ deadlineTitle }}</strong>
                        <span>{{ deadlineInfo }}</span>
                    </li>
                </ul>
            </div>
            <div class="vacancy-card__description">
                <div class="heading">{{ heading }}</div>
                <p>{{ description }}</p>
            </div>
        </div> 
    </a> 
</div>
 
{
  "layoutMaxWidth": "877px",
  "title": "Servicetekniker til Kjøle- og varmeprodukter",
  "locationTitle": "Plats:",
  "locationInfo": "Stanseveien 28, 0976 Oslo",
  "employmentTitle": "Omfang:",
  "employmentInfo": "Heltid",
  "deadlineTitle": "Søknadsfrist:",
  "deadlineInfo": "26.05.2023",
  "heading": "Heading text",
  "description": "Vi har behov for å styrke vår avdeling innen kjøling i Bergen og søker derfor en strukturert og positiv kollega til stillingen som servicetekniker. Vil du være en del av support-teamet for Swegon Norge med ansvar for kjøle- og varmeprodukter? Har du lyst på en variert og innholdsrik arbeidsdag? Liker du å ha kontakt med mennesker? Blir du motivert av å løse tekniske problemer?",
  "linkIcon": "external-link",
  "modifiers": "gray"
}
  • Content: 
    .vacancy-card {
    margin: 0;
    font-size: size(2);
    line-height: size(3);

    &__cta {
        padding: 42px 25px;
        color: $color-black;
        display: block;

        @include breakpoint($m) {
            padding: 29px 41px;
        }

        &:hover {
            text-decoration: none;

            .vacancy-card__title {
                text-decoration: underline;
            }
        }
    }

    .heading {
        font-weight: 700;
        margin: 0 0 10px;
    }

    &--gray {
        background: $color-gray-1;
    }

    &__top-info {
        padding-right: 50px;
        border-bottom: 1px solid #acacac;
        position: relative;
    }

    &__title {
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 16px;

        @include breakpoint($m) {
            margin: 0 0 22px;
        }
    }

    &__list {
        margin: 0 0 18px;
        padding: 0;
        list-style: none;
        font-size: 14px;
        line-height: 20px;
        display: flex;
        flex-direction: column;

        @include breakpoint($m) {
            flex-direction: row;
        }

        li {
            margin: 4px 0 0;

            @include breakpoint($m) {
                margin: 0 0 0 30px;
            }

            &:first-child {
                margin: 0;
            }
        }
    }

    &__follow-link {
        position: absolute;
        margin-top: size(-.75);
        top: -4px;
        right: 0;
        display: flex;
        width: 42px;
        height: 42px;
        padding: size(0.75);
        border-radius: 50%;
        background-color: #d9d9d9;
        fill: $color-black;
        transition: transform .2s cubic-bezier(0.4, 0.0, 0.2, 1);

        .vacancy-card:hover & {
            transform: translateX(3px);
        }

        .icon {
            margin-right: -2px;
            width: 32px;
            height: 30px;
        }
    
        @include color-theme {
            fill: $arg-theme-color;
        }
    
        @include breakpoint($m) {
            margin-top: 0px;
            right: 0;
            top: -9px;
        }
    }

    &__description {
        margin: 18px 0 0;

        p {
            margin: 0;
        }
    }
}
  • URL: /components/raw/vacancy-card/vacancy-card.scss
  • Filesystem Path: src/components/vacancy-card/vacancy-card.scss
  • Size: 2.2 KB

No notes defined.