Swegon Component Library

Contact Card: As Partner 

<div class="contact-card contact-card--no-icon ">

    <div class="contact-card__body">
        <strong class="contact-card__label">Partner, Country</strong>
    </div>

    <div id="" class="show-info js-show-info ">
        <div class="show-info__wrapper js-show-info-wrapper">
            <div class="show-info__content">

                <ul class="contact-list">
                    <li class="contact-list__item">
                        <span href=>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-map-pin"></use>
                            </svg>
                            City name
                        </span>
                    </li>
                    <li class="contact-list__item">
                        <span href=>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-fan"></use>
                            </svg>
                            Product area
                        </span>
                    </li>
                    <li class="contact-list__item">
                        <a href=https://int.swegon.com/sv/kontaktsidor/#product-area-tab>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-globe"></use>
                            </svg>
                            Visit website
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="show-info__btn-holder js-show-info-btn-holder">
            <button class="show-info__btn js-show-info-btn">
                <span class="show-info__btn-opened-text">
                    More info
                </span>
                <span class="show-info__btn-closed-text">
                    Hide info
                </span>
                <svg class="icon show-info__btn-icon" focusable="false">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </button>
        </div>
    </div>
</div>
 
<div class="contact-card {{additionalClasses}} {{ getmodifiers modifiers " contact-card" }}">
    {{#switch cardType}}
    {{#case 'default'}}
    <div class="contact-card__body">
        <div class="contact-card__top-img">
            <img src="{{ image.src }}" alt="{{ image.alt }}" class="contact-card__icon">
        </div>
        <strong class="contact-card__label">{{ label }}</strong>
        <div class="contact-card__bottom-body">
            <div class="contact-card__role-text-wrapper">
                <div class="contact-card__role">{{ role }}</div>
                {{#if freeText}}
                <div class="contact-card__free-text">{{ freeText }}</div>
                {{/if}}
            </div>
            <div class="js-options-limiter" data-option-selector=".js-option" data-option-limit="3">
                <div class="js-option">{{ text }}</div>
                <div class="js-option">Item 2</div>
                <div class="js-option">Item 3</div>
                <div class="js-option">Item 4</div>
                <div class="js-option">Item 5</div>
                <div class="button-wrapper">
                    <button type="button" class="show-more-filters">Show More</button>
                </div>
            </div>
        </div>
    </div>
    {{/case}}
    {{#case 'as-office'}}
    <div aria-controls="{{showInfo.id}}" class="contact-card__media">
        <strong class="contact-card__office-name">{{ label }}</strong>
        <figure class="contact-card__figure">
            <img src="{{ image.src }}" alt="{{ image.alt }}" class="contact-card__image">
        </figure>
    </div>
    {{/case}}

    {{#case 'as-unit'}}
    <div class="contact-card__body">
        <div class="contact-card__top-img">
            <img src="{{ image.src }}" alt="{{ image.alt }}" class="contact-card__icon">
        </div>
        <strong class="contact-card__label">{{ label }}</strong>
    </div>
    {{/case}}

    {{#case 'as-partner'}}
    <div class="contact-card__body">
        <strong class="contact-card__label">{{ label }}</strong>
    </div>
    {{/case}}
    {{/switch}}

    {{#>@show-info id=showInfo.id}}
    {{>@contact-list}}
    {{/@show-info}}
</div>
 
{
  "layoutMaxWidth": "320px",
  "showMoreText": "More info",
  "hideText": "Hide info",
  "contactLinks": [
    {
      "description": "City name",
      "icon": "map-pin"
    },
    {
      "description": "Product area",
      "icon": "fan"
    },
    {
      "description": "Visit website",
      "href": "https://int.swegon.com/sv/kontaktsidor/#product-area-tab",
      "icon": "globe",
      "tag": "a"
    }
  ],
  "cardType": "as-partner",
  "label": "Partner, Country",
  "additionalClasses": "contact-card--no-icon"
}
  • Content: 
    .contact-card {
    display: flex;
    flex-direction: column;
    padding-bottom: size(4);
    height: 100%;

    .js-options-limiter {
        &--padded {
            padding-bottom: 0;
        }

        .button-wrapper {
            position: static;
            text-align: left;
            padding: 0;

            &:after {
                display: none;
            }
        }

        .show-more-filters {
            color: $color-black;
            font-weight: 700;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }
        }
    }
}

.contact-card--person {
    .contact-card__label {
        min-height: auto;
    }

    .contact-card__body {
        min-height: 236px;
        padding: size(9) size(2) size(2);
    }
}

.contact-card--person-white {
    .contact-card__body {
        background-color: #fff;

        .contact-card__top-img {
            border: 6px solid #fff;
        }
    }
}

.contact-card--no-icon {
    .contact-card__top-img {
        display: none;
    }

    .contact-card__body {
        margin: 0;
    }
}

.contact-card--no-image {
    .contact-card__media:after {
        background: $color-gray-1;
    }

    .contact-card__office-name {
        color: $color-black;
    }
}

.contact-card__figure {
    position: relative;
    margin: 0;

    &:after {
        content: '';
        display: block;
        padding-bottom: 56%;
    }
}

.contact-card__media {
    position: relative;
    cursor: pointer;

    &:after {
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.46) 100%);
    }
}

.contact-card__office-name {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: size(1) size(2);
    margin: 0;
    z-index: 1;
    text-align: center;
    color: $color-white;
    font-size: size(3);
    line-height: size(4);
}

.contact-card__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-card__top-img {
    position: absolute;
    top: 21px;
    width: 87px;
    height: 87px;
    border: 6px solid $color-gray-1;
    border-radius: 100px;
    background: $color-gray-1;
    margin: -40px 0 6px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}

.contact-card__icon {
    width: auto;
}

.contact-card__body {
    position: relative;
    background: $color-gray-1;
    padding: size(8) size(2) size(8);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin: 18px 0 0;
}

.contact-card__label {
    text-align: center;
    font-size: size(3);
    line-height: size(4);
    min-height: 64px;
    display: flex;
    align-items: center;
}

.contact-card__bottom-body {
    width: 100%;
    color: $color-black;
}

.contact-card__role-text-wrapper:has(.contact-card__free-text) {
    & .contact-card__role {
        margin-bottom: 0;
    }
}

.contact-card__role {
    text-align: center;
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-card__free-text {
    text-align: center;
    font-weight: 500;
    margin-bottom: 6px;

}
  • URL: /components/raw/contact-card/contact-card.scss
  • Filesystem Path: src/components/contact-card/contact-card.scss
  • Size: 3.4 KB

No notes defined.