Page Countries
v0.0.0
The Page Countries wraps the Country Select and shows a 'close' button. It is used inside an overlay that is part of Page Layout.
When content exceeds height of containing element it will be scrollable. The content is wrapped inside a Container.
Page Countries is part of the Page component.
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
<!-- Page Countries -->
<div class="vi-page-countries">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-countries__head">
<div class="vi-page-countries__trigger">
<!-- Button type: close -->
<button data-trigger="countries" type="button" class="vi-btn-close vi-btn"><span class="vi-btn-close__label vi-btn__label">Press to close the select your country window or navigate to it's content.</span></button>
</div>
</div>
</div>
<div class="vi-page-countries__main">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-countries__content">
<!-- 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-9b6627" 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-57680c" 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-dbe700" 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-d9e90e" 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-56d29e" 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-d07929" 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-9de44a" 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-db5e0a" 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-2d6840" 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-55a868" 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-e77ac8" 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-59a081" 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-107646" 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-7e1de6" 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-a1cec2" 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-5bad34" 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-195a45" 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-7b428a" 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-6210e6" 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-5d859c" 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-d6b5ec" 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-695ad6" 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-056437" 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-b55493" 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-ca0986" 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-e1461e" 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-7c0db8" 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-298d88" 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-9b9a0b" 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-bccae3" 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-b80db3" 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-17403c" 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-a419ac" 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-60362d" 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-7bcd3a" 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-48982c" 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-1b0a4a" 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-319295" 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-254260" 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-2dee21" 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-e70e49" 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-c7bc47" 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-c859e1" 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-e7587e" 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-41631a" 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-030b22" 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-2a4b2a" 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-177405" 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-4eb0d2" 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-bb749e" 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-223257" 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-090ce2" 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-83dc77" 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-89ca8d" 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-455ebd" 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-4a847e" 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)-ac2c81">
<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-1e4381">North America</h4>
<a aria-controls="region-07e669" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-ac2c81" 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-1e4381" class="vi-accordion-refine__main vi-accordion__main" id="region-07e669" 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-9b6627" 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-57680c" 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)-81179e">
<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-4dd035">International Markets</h4>
<a aria-controls="region-ad9274" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-81179e" 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-4dd035" class="vi-accordion-refine__main vi-accordion__main" id="region-ad9274" 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-dbe700" 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-d9e90e" 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-56d29e" 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-d07929" 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-9de44a" 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-db5e0a" 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-2d6840" 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-55a868" 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-e77ac8" 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-59a081" 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-107646" 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-7e1de6" 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-a1cec2" 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-5bad34" 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-195a45" 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-7b428a" 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-6210e6" 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-5d859c" 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-d6b5ec" 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-695ad6" 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-056437" 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-b55493" 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-ca0986" 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)-c07bea">
<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-0194ba">Europe</h4>
<a aria-controls="region-718673" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-c07bea" 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-0194ba" class="vi-accordion-refine__main vi-accordion__main" id="region-718673" 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-e1461e" 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-7c0db8" 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-298d88" 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-9b9a0b" 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-bccae3" 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-b80db3" 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-17403c" 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-a419ac" 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-60362d" 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-7bcd3a" 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-48982c" 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-1b0a4a" 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-319295" 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-254260" 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-2dee21" 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-e70e49" 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-c7bc47" 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-c859e1" 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-e7587e" 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-41631a" 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-030b22" 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-2a4b2a" 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-177405" 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-4eb0d2" 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-bb749e" 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-223257" 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-090ce2" 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-83dc77" 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-89ca8d" 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-455ebd" 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-4a847e" 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>
</div>
</div>
</div>Stylesheets #
The following stylesheet is required to display this component.
The following additional stylesheets are used to display the example(s).
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Added
- RTL support
- Initial draft