Swegon Component Library

Contact List 

<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"></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>
 
{{#if additionalInfo}}
    <h4 class="additional-info-title">{{{ additionalInfoTitle }}}</h4>
    <div class="additional-info-text">{{{ additionalInfoText }}}</div>
{{/if}}

<ul class="contact-list">
    {{#each contactLinks}}
        <li class="contact-list__item">
            <{{getelement tag "span" }} href={{href}} {{{getattributes attributes}}}>
                {{> @icon id=icon additionalClasses="contact-list__icon" }}
                {{{ description }}}
            </{{getelement tag "span"}}>
        </li>
    {{/each}}
</ul>
 
{
  "additionalInfo": false,
  "additionalInfoTitle": "Title",
  "additionalInfoText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida maecenas bibendum amet integer. Sed purus, ac dui turpis faucibus varius praesent.",
  "contactLinks": [
    {
      "description": "Kompanigatan 1-2, 553 05<br/>Kalmar",
      "icon": "map-pin"
    },
    {
      "description": "031 1234 5678",
      "href": "tel:031 1234 5678",
      "icon": "mobile",
      "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"
    }
  ]
}
  • Content: 
    .contact-list {
    list-style: none;
    padding: 0;
}

.contact-list__item {
    display: flex;
    position: relative;
    padding-left: size(4);
    margin-bottom: size(1);
    word-break: break-word;
    // nudge to make icons align with card title
    margin-left: -5px;

    a {
        font-weight: $font-weight-bold;
    }
}

.contact-list__icon {
    position: absolute;
    width: size(4);
    height: size(3);
    padding-right: size(1);
    left: 0;
    top: 0;
    fill: $color-black;
}

.additional-info-title,
.additional-info-text {
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

.additional-info-title {
    font-weight: 700;
    margin: 0;
}
  • URL: /components/raw/contact-list/contact-list.scss
  • Filesystem Path: src/components/contact-list/contact-list.scss
  • Size: 684 Bytes

No notes defined.