Swegon Component Library

Contact Card: Default 

<div class="contact-card contact-card--person ">
    <div class="contact-card__body">
        <div class="contact-card__top-img">
            <img src="/mocks/img/alexander-miletti.png" alt="Contact Page Image" class="contact-card__icon">
        </div>
        <strong class="contact-card__label">Air Diffusion - Diffusers/Grilles</strong>
        <div class="contact-card__bottom-body">
            <div class="contact-card__role-text-wrapper">
                <div class="contact-card__role">Role</div>
                <div class="contact-card__free-text">Rouler</div>
            </div>
            <div class="js-options-limiter" data-option-selector=".js-option" data-option-limit="3">
                <div class="js-option">Product area</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>

    <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>
                            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-search-small"></use>
                            </svg>
                            Find a person
                        </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": "Find a person",
      "href": "#",
      "icon": "search-small",
      "tag": "a"
    }
  ],
  "cardType": "default",
  "additionalClasses": "contact-card--person",
  "image": {
    "src": "/mocks/img/alexander-miletti.png",
    "alt": "Contact Page Image"
  },
  "label": "Air Diffusion - Diffusers/Grilles",
  "role": "Role",
  "freeText": "Rouler",
  "text": "Product area"
}
  • Content: 
    import React from 'react';
import Icon from '../icon/index.jsx';

const ContactCard = (item, showLessLabel, showMoreLabel) => {
    const contact = item.searchHitObject.properties;
    const [showInfo, setShowInfo] = React.useState(false);
    const [initalProductAreas, setInitalProductAreas] = React.useState(2);
    return (
        <>
            <div className="contact-card contact-card--person ">
                <div className="contact-card__body">
                    {contact.ProfileImage && contact.ProfileImage.url &&
                        <div className="contact-card__top-img">
                            <img src={contact.ProfileImage.url} alt="Contact Page Image" className="contact-card__image" />
                        </div>
                    }
                    <strong className="contact-card__label">{contact.FirstName} {contact.LastName}</strong>
                    <div className="contact-card__bottom-body">
                        <div className="contact-card__role">{contact.Roles && contact.Roles.value && contact.Roles.value[0].name}</div>
                        {contact.Roles && contact.Roles.value && contact.Roles.value.length > 0 &&
                            contact.Roles.value.slice(1, 3).map((role) => {
                                return <div>{role.name}</div>;
                            })
                        }
                    </div>
                    {contact.ProductAreas && contact.ProductAreas.value && contact.ProductAreas.value.length > 0 &&
                        <div className='contact-card__product-area'>
                            {contact.AdditionalInfoText &&
                                <div className='contact-card__additional-info'>{contact.AdditionalInfoText}</div>
                            }

                            <div className='contact-card__product-area-list'>
                                {contact.ProductAreas && contact.ProductAreas.value && contact.ProductAreas.value.slice(0, initalProductAreas).map((area) => {
                                    return <span className='contact-card__product-area-item'>{area.name}</span>;
                                })}
                            </div>
                            {contact.ProductAreas && contact.ProductAreas.value && contact.ProductAreas.value.length > initalProductAreas && (
                                <button className='contact-card__show-more-button' onClick={() => setInitalProductAreas(999)}>Visa fler</button>
                            )}
                        </div>
                    }
                </div>
                {showInfo &&
                    <div className="show-info js-show-info">
                        <div className="show-info__wrapper js-show-info-wrapper">
                            <div className="show-info__content">
                                <ul className="contact-list">
                                    {contact.Offices.value[0].name && <li className="contact-list__item">
                                        <Icon icon="map-pin" additionalClasses="icon contact-list__icon"></Icon>
                                        {contact.Offices.value[0].name}
                                    </li>
                                    }
                                    {contact.PhoneList && contact.PhoneList.map((number, i) => {
                                        return <li key={number.number + '-' + i} className="contact-list__item">
                                            <a href={`tel:${number}`}>
                                                <Icon icon="phone" additionalClasses="icon contact-list__icon"></Icon>
                                                {number.number}
                                            </a>
                                        </li>;
                                    })
                                    }
                                    {contact.Email &&
                                        <li className="contact-list__item">
                                            <a href={`mailto:${contact.Email}`}>
                                                <Icon icon="mail" additionalClasses="icon contact-list__icon"></Icon>
                                                {contact.Email}
                                            </a>
                                        </li>
                                    }

                                </ul>
                            </div>
                        </div>
                    </div >
                }
                <div class="show-info__btn-holder js-show-info-btn-holder">
                    <button class="show-info__btn js-show-info-btn" onClick={() => setShowInfo(!showInfo)}>
                        {showInfo ? showLessLabel : showMoreLabel}
                        <Icon icon='close' additionalClasses={`show-info__btn-icon ${showInfo ? 'active' : ''}`} ></Icon>
                    </button>
                </div >
            </div >
        </>
    );

};

export default ContactCard;
  • URL: /components/raw/contact-card/ContactCard.jsx
  • Filesystem Path: src/components/contact-card/ContactCard.jsx
  • Size: 5.1 KB
  • 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;

}

.contact-card__product-area {
    width: 100%;

    & p {
        margin-bottom: 0;
    }
}

.contact-card__product-area-list {
    display: flex;
    flex-direction: column;

}

.contact-card__show-more-button {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

.search-result-page {
    & .contact-card__role {
        margin-bottom: 0;
    }
}
  • URL: /components/raw/contact-card/contact-card.scss
  • Filesystem Path: src/components/contact-card/contact-card.scss
  • Size: 3.8 KB

No notes defined.