Country Select
v0.0.0
The Country Select combines the following components:
These components make up country switch and work in close conjunction.
Select your country website
Provide instructions to inform users what to do when the IP they connect from, is not from a country with a country site.
North America
International Markets
North America
Toggle
North America
International Markets
Toggle
International Markets
Europe
Toggle
Europe
<!-- contained within: -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Country Select Layout -->
<div class="vi-country-select-layout">
<div class="vi-country-select-layout__section--title">
<!-- Use h1-h6 depending page hierarchy -->
<h1 class="vi-country-select-layout__title">Select your country website</h1>
</div>
<div class="vi-country-select-layout__section--lookup">
<!-- Country Select Lookup -->
<div class="vi-country-select-lookup vi-typesystem" data-countries='[{"cc":"US","name":"United States","url":"#url-to-US","flag":"/assets/images/flags/square/us_80x80.png"},{"cc":"CA","name":"Canada","url":"#url-to-CA","flag":"/assets/images/flags/square/ca_80x80.png"},{"cc":"AR","name":"Argentina","url":"#url-to-AR","flag":"/assets/images/flags/square/ar_80x80.png"},{"cc":"AZ","name":"Azerbaijan","url":"#url-to-AZ","flag":"/assets/images/flags/square/az_80x80.png"},{"cc":"AU","name":"Australia","url":"#url-to-AU","flag":"/assets/images/flags/square/au_80x80.png"},{"cc":"BY","name":"Belarus","url":"#url-to-BY","flag":"/assets/images/flags/square/by_80x80.png"},{"cc":"BR","name":"Brazil","url":"#url-to-BR","flag":"/assets/images/flags/square/br_80x80.png"},{"cc":"CL","name":"Chile","url":"#url-to-CL","flag":"/assets/images/flags/square/cl_80x80.png"},{"cc":"CN","name":"China","url":"#url-to-CN","flag":"/assets/images/flags/square/cn_80x80.png"},{"cc":"IN","name":"India","url":"#url-to-IN","flag":"/assets/images/flags/square/in_80x80.png"},{"cc":"IL","name":"Israel","url":"#url-to-IL","flag":"/assets/images/flags/square/il_80x80.png"},{"cc":"JP","name":"Japan","url":"#url-to-JP","flag":"/assets/images/flags/square/jp_80x80.png"},{"cc":"KZ","name":"Kazakstan","url":"#url-to-KZ","flag":"/assets/images/flags/square/kz_80x80.png"},{"cc":"KG","name":"Kyrgyzstan","url":"#url-to-KG","flag":"/assets/images/flags/square/kg_80x80.png"},{"cc":"MX","name":"Mexico","url":"#url-to-MX","flag":"/assets/images/flags/square/mx_80x80.png"},{"cc":"PE","name":"Peru","url":"#url-to-PE","flag":"/assets/images/flags/square/pe_80x80.png"},{"cc":"RU","name":"Russian Federation","url":"#url-to-RU","flag":"/assets/images/flags/square/ru_80x80.png"},{"cc":"SG","name":"Singapore","url":"#url-to-SG","flag":"/assets/images/flags/square/sg_80x80.png"},{"cc":"ZA","name":"South Africa","url":"#url-to-ZA","flag":"/assets/images/flags/square/za_80x80.png"},{"cc":"KR","name":"Korea","url":"#url-to-KR","flag":"/assets/images/flags/square/kr_80x80.png"},{"cc":"TH","name":"Thailand","url":"#url-to-TH","flag":"/assets/images/flags/square/th_80x80.png"},{"cc":"TR","name":"Turkey","url":"#url-to-TR","flag":"/assets/images/flags/square/tr_80x80.png"},{"cc":"UA","name":"Ukraine","url":"#url-to-UA","flag":"/assets/images/flags/square/ua_80x80.png"},{"cc":"UY","name":"Uruguay","url":"#url-to-UY","flag":"/assets/images/flags/square/uy_80x80.png"},{"cc":"UZ","name":"Uzbekistan","url":"#url-to-UZ","flag":"/assets/images/flags/square/uz_80x80.png"},{"cc":"AT","name":"Austria","url":"#url-to-AT","flag":"/assets/images/flags/square/at_80x80.png"},{"cc":"BE","name":"Belgium","url":"#url-to-BE","flag":"/assets/images/flags/square/be_80x80.png"},{"cc":"BA","name":"Bosnia And Herzegovina","url":"#url-to-BA","flag":"/assets/images/flags/square/ba_80x80.png"},{"cc":"BG","name":"Bulgaria","url":"#url-to-BG","flag":"/assets/images/flags/square/bg_80x80.png"},{"cc":"HR","name":"Croatia","url":"#url-to-HR","flag":"/assets/images/flags/square/hr_80x80.png"},{"cc":"CZ","name":"Czech Republic","url":"#url-to-CZ","flag":"/assets/images/flags/square/cz_80x80.png"},{"cc":"DK","name":"Denmark","url":"#url-to-DK","flag":"/assets/images/flags/square/dk_80x80.png"},{"cc":"EE","name":"Estonia","url":"#url-to-EE","flag":"/assets/images/flags/square/ee_80x80.png"},{"cc":"FI","name":"Finland","url":"#url-to-FI","flag":"/assets/images/flags/square/fi_80x80.png"},{"cc":"FR","name":"France","url":"#url-to-FR","flag":"/assets/images/flags/square/fr_80x80.png"},{"cc":"DE","name":"Germany","url":"#url-to-DE","flag":"/assets/images/flags/square/de_80x80.png"},{"cc":"GR","name":"Greece","url":"#url-to-GR","flag":"/assets/images/flags/square/gr_80x80.png"},{"cc":"HU","name":"Hungary","url":"#url-to-HU","flag":"/assets/images/flags/square/hu_80x80.png"},{"cc":"IS","name":"Iceland","url":"#url-to-IS","flag":"/assets/images/flags/square/is_80x80.png"},{"cc":"IE","name":"Ireland","url":"#url-to-IE","flag":"/assets/images/flags/square/ie_80x80.png"},{"cc":"IT","name":"Italy","url":"#url-to-IT","flag":"/assets/images/flags/square/it_80x80.png"},{"cc":"LV","name":"Latvia","url":"#url-to-LV","flag":"/assets/images/flags/square/lv_80x80.png"},{"cc":"LT","name":"Lithuania","url":"#url-to-LT","flag":"/assets/images/flags/square/lt_80x80.png"},{"cc":"MK","name":"Macedonia","url":"#url-to-MK","flag":"/assets/images/flags/square/mk_80x80.png"},{"cc":"MC","name":"Monaco","url":"#url-to-MC","flag":"/assets/images/flags/square/mc_80x80.png"},{"cc":"NL","name":"Netherlands","url":"#url-to-NL","flag":"/assets/images/flags/square/nl_80x80.png"},{"cc":"NO","name":"Norway","url":"#url-to-NO","flag":"/assets/images/flags/square/no_80x80.png"},{"cc":"PL","name":"Poland","url":"#url-to-PL","flag":"/assets/images/flags/square/pl_80x80.png"},{"cc":"PT","name":"Portugal","url":"#url-to-PT","flag":"/assets/images/flags/square/pt_80x80.png"},{"cc":"RO","name":"Romania","url":"#url-to-RO","flag":"/assets/images/flags/square/ro_80x80.png"},{"cc":"RS","name":"Serbia","url":"#url-to-RS","flag":"/assets/images/flags/square/rs_80x80.png"},{"cc":"SK","name":"Slovakia","url":"#url-to-SK","flag":"/assets/images/flags/square/sk_80x80.png"},{"cc":"ES","name":"Spain","url":"#url-to-ES","flag":"/assets/images/flags/square/es_80x80.png"},{"cc":"SE","name":"Sweden","url":"#url-to-SE","flag":"/assets/images/flags/square/se_80x80.png"},{"cc":"CH","name":"Switzerland","url":"#url-to-CH","flag":"/assets/images/flags/square/ch_80x80.png"},{"cc":"GB","name":"United Kingdom","url":"#url-to-GB","flag":"/assets/images/flags/square/gb_80x80.png"}]' data-ipstack-key="6751675a13e2f097805aa47e57aa73bf">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<div class="vi-typesystem vi-typesystem--content vi-typesystem--collapse-last">
<!-- WYSIWYG -->
<p>Provide instructions to <a href="#sample">inform users</a> what to do when
the IP they connect from, is not from a country with a country site.</p>
</div>
</div>
</div>
</div>
</div>
<div class="vi-country-select-layout__section--countries">
<div class="vi-country-select-countries">
<!-- Utility classes for hiding and showing -->
<div class="d-none d-xl-block">
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--vgap-30">
<div class="col-lg-4 col-xxl-2">
<!-- Use h1-h6 depending page hierarchy -->
<h2 class="vi-country-select-countries__title">North America</h2>
<ul class="vi-country-select-countries__list vi-country-select-countries__list--north-america-expanded">
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#us-cc210c" hreflang="us">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/us_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">United States</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ca-2527a7" hreflang="ca">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ca_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Canada</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="col-lg-8 col-xxl-4">
<!-- Use h1-h6 depending page hierarchy -->
<h2 class="vi-country-select-countries__title">International Markets</h2>
<ul class="vi-country-select-countries__list vi-country-select-countries__list--international-expanded">
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ar-ce860d" hreflang="ar">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ar_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Argentina</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#az-a42e2a" hreflang="az">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/az_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Azerbaijan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#au-ebb900" hreflang="au">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/au_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Australia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#by-97b944" hreflang="by">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/by_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Belarus</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#br-d31c4e" hreflang="br">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/br_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Brazil</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#cl-eeea82" hreflang="cl">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cl_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Chile</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#cn-7c31ed" hreflang="cn">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cn_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">China</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#in-26adab" hreflang="in">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/in_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">India</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#il-51da73" hreflang="il">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/il_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Israel</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#jp-c11183" hreflang="jp">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/jp_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Japan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#kz-dab1a6" hreflang="kz">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kz_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Kazakstan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#kg-079dc1" hreflang="kg">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kg_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Kyrgyzstan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#mx-e19313" hreflang="mx">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mx_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Mexico</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#pe-5346c3" hreflang="pe">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pe_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Peru</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ru-5bb550" hreflang="ru">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ru_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Russian Federation</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#sg-a245ee" hreflang="sg">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sg_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Singapore</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#za-e7a33c" hreflang="za">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/za_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">South Africa</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#kr-143448" hreflang="kr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Korea</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#th-1d5c87" hreflang="th">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/th_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Thailand</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#tr-64232e" hreflang="tr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/tr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Turkey</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ua-3e9be7" hreflang="ua">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ua_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Ukraine</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#uy-d0a3d7" hreflang="uy">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uy_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Uruguay</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#uz-223dea" hreflang="uz">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uz_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Uzbekistan</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="col-lg-12 col-xxl-6">
<!-- Use h1-h6 depending page hierarchy -->
<h2 class="vi-country-select-countries__title">Europe</h2>
<ul class="vi-country-select-countries__list vi-country-select-countries__list--europe-expanded">
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#at-0e45be" hreflang="at">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/at_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Austria</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#be-969c54" hreflang="be">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/be_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Belgium</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ba-42623e" hreflang="ba">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ba_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Bosnia And Herzegovina</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#bg-7033d4" hreflang="bg">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/bg_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Bulgaria</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#hr-edb9b0" hreflang="hr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Croatia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#cz-470082" hreflang="cz">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cz_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Czech Republic</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#dk-9e7d7b" hreflang="dk">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/dk_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Denmark</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ee-a4821d" hreflang="ee">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ee_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Estonia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#fi-327c86" hreflang="fi">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fi_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Finland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#fr-806be0" hreflang="fr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">France</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#de-43abc0" hreflang="de">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/de_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Germany</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#gr-48dcba" hreflang="gr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Greece</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#hu-80255d" hreflang="hu">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hu_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Hungary</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#is-826180" hreflang="is">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/is_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Iceland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ie-2288e3" hreflang="ie">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ie_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Ireland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#it-d79d35" hreflang="it">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/it_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Italy</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#lv-08cdb3" hreflang="lv">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lv_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Latvia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#lt-bc74d4" hreflang="lt">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lt_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Lithuania</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#mk-a78442" hreflang="mk">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mk_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Macedonia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#mc-9561ca" hreflang="mc">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mc_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Monaco</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#nl-c0e1ec" hreflang="nl">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/nl_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Netherlands</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#no-03c9ec" hreflang="no">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/no_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Norway</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#pl-5ab99b" hreflang="pl">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pl_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Poland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#pt-04717d" hreflang="pt">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pt_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Portugal</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ro-00129d" hreflang="ro">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ro_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Romania</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#rs-bdecbd" hreflang="rs">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/rs_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Serbia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#sk-ab1032" hreflang="sk">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sk_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Slovakia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#es-a80d02" hreflang="es">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/es_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Spain</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#se-89a59d" hreflang="se">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/se_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Sweden</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ch-227ab1" hreflang="ch">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ch_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Switzerland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#gb-4ed367" hreflang="gb">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gb_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">United Kingdom</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="d-block d-xl-none">
<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion" data-autoclose="false">
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-3603c5">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-4a142c">North America</h4>
<a aria-controls="region-b92e35" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-3603c5" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
North America</span></div>
</a>
</div>
<div aria-labelledby="heading-4a142c" class="vi-accordion-refine__main vi-accordion__main" id="region-b92e35" role="region">
<div class="vi-accordion-refine__content vi-accordion__content">
<ul class="vi-country-select-countries__list vi-country-select-countries__list--north-america-collapsed">
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#us-cc210c" hreflang="us">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/us_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">United States</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ca-2527a7" hreflang="ca">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ca_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Canada</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-d26763">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-4623bd">International Markets</h4>
<a aria-controls="region-d2c531" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-d26763" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
International Markets</span></div>
</a>
</div>
<div aria-labelledby="heading-4623bd" class="vi-accordion-refine__main vi-accordion__main" id="region-d2c531" role="region">
<div class="vi-accordion-refine__content vi-accordion__content">
<ul class="vi-country-select-countries__list vi-country-select-countries__list--international-collapsed">
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ar-ce860d" hreflang="ar">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ar_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Argentina</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#az-a42e2a" hreflang="az">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/az_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Azerbaijan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#au-ebb900" hreflang="au">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/au_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Australia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#by-97b944" hreflang="by">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/by_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Belarus</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#br-d31c4e" hreflang="br">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/br_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Brazil</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#cl-eeea82" hreflang="cl">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cl_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Chile</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#cn-7c31ed" hreflang="cn">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cn_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">China</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#in-26adab" hreflang="in">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/in_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">India</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#il-51da73" hreflang="il">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/il_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Israel</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#jp-c11183" hreflang="jp">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/jp_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Japan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#kz-dab1a6" hreflang="kz">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kz_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Kazakstan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#kg-079dc1" hreflang="kg">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kg_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Kyrgyzstan</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#mx-e19313" hreflang="mx">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mx_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Mexico</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#pe-5346c3" hreflang="pe">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pe_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Peru</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ru-5bb550" hreflang="ru">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ru_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Russian Federation</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#sg-a245ee" hreflang="sg">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sg_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Singapore</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#za-e7a33c" hreflang="za">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/za_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">South Africa</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#kr-143448" hreflang="kr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Korea</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#th-1d5c87" hreflang="th">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/th_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Thailand</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#tr-64232e" hreflang="tr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/tr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Turkey</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ua-3e9be7" hreflang="ua">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ua_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Ukraine</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#uy-d0a3d7" hreflang="uy">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uy_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Uruguay</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#uz-223dea" hreflang="uz">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uz_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Uzbekistan</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-c41720">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-147cd0">Europe</h4>
<a aria-controls="region-735609" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-c41720" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Europe</span></div>
</a>
</div>
<div aria-labelledby="heading-147cd0" class="vi-accordion-refine__main vi-accordion__main" id="region-735609" role="region">
<div class="vi-accordion-refine__content vi-accordion__content">
<ul class="vi-country-select-countries__list vi-country-select-countries__list--europe-collapsed">
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#at-0e45be" hreflang="at">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/at_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Austria</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#be-969c54" hreflang="be">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/be_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Belgium</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ba-42623e" hreflang="ba">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ba_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Bosnia And Herzegovina</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#bg-7033d4" hreflang="bg">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/bg_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Bulgaria</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#hr-edb9b0" hreflang="hr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Croatia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#cz-470082" hreflang="cz">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cz_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Czech Republic</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#dk-9e7d7b" hreflang="dk">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/dk_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Denmark</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ee-a4821d" hreflang="ee">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ee_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Estonia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#fi-327c86" hreflang="fi">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fi_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Finland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#fr-806be0" hreflang="fr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">France</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#de-43abc0" hreflang="de">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/de_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Germany</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#gr-48dcba" hreflang="gr">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gr_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Greece</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#hu-80255d" hreflang="hu">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hu_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Hungary</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#is-826180" hreflang="is">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/is_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Iceland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ie-2288e3" hreflang="ie">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ie_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Ireland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#it-d79d35" hreflang="it">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/it_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Italy</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#lv-08cdb3" hreflang="lv">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lv_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Latvia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#lt-bc74d4" hreflang="lt">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lt_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Lithuania</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#mk-a78442" hreflang="mk">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mk_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Macedonia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#mc-9561ca" hreflang="mc">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mc_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Monaco</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#nl-c0e1ec" hreflang="nl">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/nl_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Netherlands</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#no-03c9ec" hreflang="no">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/no_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Norway</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#pl-5ab99b" hreflang="pl">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pl_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Poland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#pt-04717d" hreflang="pt">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pt_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Portugal</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ro-00129d" hreflang="ro">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ro_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Romania</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#rs-bdecbd" hreflang="rs">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/rs_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Serbia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#sk-ab1032" hreflang="sk">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sk_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Slovakia</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#es-a80d02" hreflang="es">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/es_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Spain</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#se-89a59d" hreflang="se">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/se_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Sweden</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#ch-227ab1" hreflang="ch">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ch_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">Switzerland</div>
</div>
</div>
</a>
</li>
<li class="vi-country-select-countries__item">
<!-- Country Select Link -->
<a class="vi-country-select-link" href="#gb-4ed367" hreflang="gb">
<!-- Media object (mods: --gap-10) -->
<div class="vi-media-object vi-media-object--gap-10">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gb_80x80.png"></div>
</div>
<div class="align-self-center vi-media-object__body">
<div class="vi-country-select-link__label">United Kingdom</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
JavaScript #
The following javascripts are required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Added
- Adjustments to support IP lookup version of Country Select Lookup
- Initial draft