Swegon Component Library

Market Sites 

<div class="markets">
    <div class="row">
        <div class="col col--span-12 col--span-l-3">
            <div class="markets-sidebar">
                <h4>Swegon Group AB</h4>

                <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>
                            JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Stourbridge Road, Bridgnorth, Shropshire, WV15 5BB
                        </span>
                    </li>
                    <li class="contact-list__item">
                        <a href=+46(0)31-895800>
                            <svg class="icon contact-list__icon" focusable="false">
                                <use xlink:href="#icon-mobile"></use>
                            </svg>
                            Tel +46 (0)31-89 58 00
                        </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>
                </ul>
            </div>
        </div>

        <div class="col col--span-12 col--span-l-9 col--gutter-xlarge-l">
            <div class="markets-links">
                <h4>Swegon Markets</h4>
                <ul class="flag-list">
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--be" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Belgium (België)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--be" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Belgium (Belgique)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--ca" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Canada</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--dk" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Denmark (Danmark)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--fi" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Finland</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--fr" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>France</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--de" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Germany (Deutschland)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--it" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Italy (Italia)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--no" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Norway (Norge)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--pl" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Poland (Polska)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--ru" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Russia (Россия)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--es" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Spain (España)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--ch" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Switzerland (Schweiz)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--ch" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Switzerland (Suisse)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--ch" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Switzerland (Svizzera)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--se" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>Sweden (Sverige)</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--gb" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>UK</span>
                        </a>
                    </li>
                    <li class="flag-list__item ">
                        <a class="flag-list__link flag-list__link--us" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                            <span>United States</span>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
 
<div class="markets">
    <div class="row">
        <div class="col col--span-12 col--span-l-3">
            <div class="markets-sidebar">
                <h4>{{groupTitle}}</h4>
                {{>@contact-list}}
            </div>
        </div>

        <div class="col col--span-12 col--span-l-9 col--gutter-xlarge-l">
            <div class="markets-links">
                <h4>{{marketsTitle}}</h4>
                {{render '@flag-list'}}
            </div>
        </div>
    </div>
</div>
 
{
  "groupTitle": "Swegon Group AB",
  "marketsTitle": "Swegon Markets",
  "contactLinks": [
    {
      "description": "JA Wettergrens gata 7, SE-421 30 Västra Frölunda, Stourbridge Road, Bridgnorth, Shropshire, WV15 5BB",
      "icon": "map-pin"
    },
    {
      "description": "Tel +46 (0)31-89 58 00",
      "href": "+46(0)31-895800",
      "icon": "mobile",
      "tag": "a"
    },
    {
      "description": "kungstensvent.anders@gmail.com",
      "href": "mailto:kungstensvent.anders@gmail.com",
      "icon": "mail",
      "tag": "a"
    }
  ]
}
  • Content: 
    .markets {

    .contact-list {
        @include breakpoint($l) {
            padding-top: 8px;
        }
    }

    .flag-list {
        padding-top: 16px;
        margin: 0 -8px;
    }

    h4 {
        margin-bottom: 8px;

        @include breakpoint($l) {
            margin-bottom: 16px;
        }
    }
}

.markets-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-width: 0 0 1px 0;
    padding-bottom: 8px;
    border-style: solid;
    border-color: $color-gray-2;

    @include breakpoint($m) {
        padding-bottom: 16px;
    }

    @include breakpoint($l) {
        padding-bottom: 0;
        padding-right: 28px;
        border-width: 0 1px 0 0;
    }
}

.markets-links {
    margin: 32px 0 0;

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

    @include breakpoint($l) {
        margin: 0;
    }
}
  • URL: /components/raw/market-sites/market-sites.scss
  • Filesystem Path: src/components/market-sites/market-sites.scss
  • Size: 863 Bytes

No notes defined.