Swegon Component Library

Contact Card: As Unit 

<div class="contact-card  ">

    <div class="contact-card__body">
        <div class="contact-card__top-img">
            <img src="/mocks/img/contact-card-icon7.png" alt="icon" class="contact-card__icon">
        </div>
        <strong class="contact-card__label">Air Diffusion - Diffusers/Grilles</strong>
    </div>

    <div id="" class="show-info js-show-info ">
        <div class="show-info__wrapper js-show-info-wrapper">
            <div class="show-info__content">
                <h4 class="additional-info-title">Title</h4>
                <div class="additional-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.</div>

                <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>
                            Kompanigatan 1-2, 553 05<br />Kalmar
                        </span>
                    </li>
                    <li class="contact-list__item">
                        <a href=tel:031 1234 5678>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-mobile-alt"></use>
                            </svg>
                            031 1234 5678
                        </a>
                    </li>
                    <li class="contact-list__item">
                        <a href=mailto:kungstensvent.anders@gmail.com>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-mail"></use>
                            </svg>
                            kungstensvent.anders@gmail.com
                        </a>
                    </li>
                    <li class="contact-list__item">
                        <a href=#>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-house"></use>
                            </svg>
                            Visit product page
                        </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": "Kompanigatan 1-2, 553 05<br/>Kalmar",
      "icon": "map-pin"
    },
    {
      "description": "031 1234 5678",
      "href": "tel:031 1234 5678",
      "icon": "mobile-alt",
      "tag": "a"
    },
    {
      "description": "kungstensvent.anders@gmail.com",
      "href": "mailto:kungstensvent.anders@gmail.com",
      "icon": "mail",
      "tag": "a"
    },
    {
      "description": "Visit product page",
      "href": "#",
      "icon": "house",
      "tag": "a"
    }
  ],
  "cardType": "as-unit",
  "label": "Air Diffusion - Diffusers/Grilles",
  "additionalInfo": true,
  "additionalInfoTitle": "Title",
  "additionalInfoText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.",
  "image": {
    "src": "/mocks/img/contact-card-icon7.png",
    "alt": "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.