Swegon Component Library

Flag List 

<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>
 
<ul class="flag-list">
    {{#each countries}}
        <li class="flag-list__item {{ additionalClasses }}">
            <a class="flag-list__link flag-list__link--{{this.key}}" href="#" data-cookie="marketsuggestionishidden" data-cookie-consent="necessary">
                <span>{{this.value}}</span>
            </a>
        </li>
    {{/each}}
</ul>
 
{
  "countries": [
    {
      "key": "be",
      "value": "Belgium (België)"
    },
    {
      "key": "be",
      "value": "Belgium (Belgique)"
    },
    {
      "key": "ca",
      "value": "Canada"
    },
    {
      "key": "dk",
      "value": "Denmark (Danmark)"
    },
    {
      "key": "fi",
      "value": "Finland"
    },
    {
      "key": "fr",
      "value": "France"
    },
    {
      "key": "de",
      "value": "Germany (Deutschland)"
    },
    {
      "key": "it",
      "value": "Italy (Italia)"
    },
    {
      "key": "no",
      "value": "Norway (Norge)"
    },
    {
      "key": "pl",
      "value": "Poland (Polska)"
    },
    {
      "key": "ru",
      "value": "Russia (Россия)"
    },
    {
      "key": "es",
      "value": "Spain (España)"
    },
    {
      "key": "ch",
      "value": "Switzerland (Schweiz)"
    },
    {
      "key": "ch",
      "value": "Switzerland (Suisse)"
    },
    {
      "key": "ch",
      "value": "Switzerland (Svizzera)"
    },
    {
      "key": "se",
      "value": "Sweden (Sverige)"
    },
    {
      "key": "gb",
      "value": "UK"
    },
    {
      "key": "us",
      "value": "United States"
    }
  ]
}
  • Content: 
    $countries: be ca ch de dk ee es fi fr gb lv no pl ru se us it;

.flag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.flag-list__item {
    position: relative;
    list-style: none;
    padding: size(1);
    margin-bottom: size(1);
    flex: 0 0 100%;

    @include breakpoint($s) {
        flex: 1 0 percentage(1 / 2);
    }

    @include breakpoint($l) {
        flex: 0 0 percentage(1 / 3);
    }
}

.flag-list__link {
    position: relative;
    display: flex;
    align-items: center;
    height: size(3);
    padding-left: size(4.5);
    color: $color-black;
    font-weight: $font-weight-bold;

    @each $country in $countries {
        &--#{$country} {
            background: url('./img/#{$country}.svg') left center no-repeat;
        }
    }

    span {
        transform: translateY(1px); // Fix vertical alignment between flag, label and icon. Font is the problem.
    }
}
  • URL: /components/raw/flag-list/flag-list.scss
  • Filesystem Path: src/components/flag-list/flag-list.scss
  • Size: 944 Bytes

No notes defined.