Country Select Countries
v0.0.0
The Country Select Countries shows a the countries per market group. Two versions exist:
- the expanded where the countries are listed in grid
- the collapsed version where countries are listed in an Accordion.
The responsive example shows how to show or hide the versions on different screen sizes by using 'display' utility classes.
The Country Select Countries is part of Country Select component.
Expanded #
The expanded version shows Countries in a grid-like manner. The distribution of the countries over the columns differs per screen-width.
Use this version on larger screens.
North America
International Markets
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-country-select-countries">
<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-5acc8b" 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-87e8c9" 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-abc57e" 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-e24911" 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-709404" 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-882306" 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-0d963e" 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-5a9c63" 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-529e99" 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-52d5c4" 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-7e05ba" 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-370769" 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-701189" 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-a113e4" 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-63eb89" 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-c3b6d1" 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-54605c" 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-8d3369" 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-293ba4" 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-c7202d" 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-ed3062" 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-eba6d6" 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-c7ac61" 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-3b883e" 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-a0379a" 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-ec924e" 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-717632" 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-14c3ad" 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-60ad9a" 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-bb2674" 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-8384a6" 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-caacc0" 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-eb84a2" 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-4e1b93" 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-b02d85" 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-c7e852" 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-01ac02" 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-124787" 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-b377d1" 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-8483d3" 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-bba32b" 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-6d4d46" 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-e8a208" 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-71241a" 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-40ee89" 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-02d276" 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-744ee7" 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-d24221" 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-7777d6" 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-aea546" 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-8c0362" 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-5ea3ad" 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-ea4da5" 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-4638a4" 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-70283c" 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-3c52db" 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>Collapsed #
The collapsed version shows Countries in an Accordion component.
Use this version on smaller screens.
North America
Toggle
North America
International Markets
Toggle
International Markets
Europe
Toggle
Europe
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-country-select-countries">
<!-- 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)-40c305">
<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-c257d8">North America</h4>
<a aria-controls="region-6c06e7" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-40c305" 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-c257d8" class="vi-accordion-refine__main vi-accordion__main" id="region-6c06e7" 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-5acc8b" 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-87e8c9" 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)-9cdb25">
<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-5578a7">International Markets</h4>
<a aria-controls="region-622bb5" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-9cdb25" 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-5578a7" class="vi-accordion-refine__main vi-accordion__main" id="region-622bb5" 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-abc57e" 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-e24911" 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-709404" 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-882306" 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-0d963e" 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-5a9c63" 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-529e99" 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-52d5c4" 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-7e05ba" 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-370769" 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-701189" 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-a113e4" 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-63eb89" 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-c3b6d1" 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-54605c" 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-8d3369" 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-293ba4" 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-c7202d" 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-ed3062" 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-eba6d6" 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-c7ac61" 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-3b883e" 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-a0379a" 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)-766599">
<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-703aae">Europe</h4>
<a aria-controls="region-0528d0" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-766599" 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-703aae" class="vi-accordion-refine__main vi-accordion__main" id="region-0528d0" 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-ec924e" 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-717632" 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-14c3ad" 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-60ad9a" 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-bb2674" 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-8384a6" 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-caacc0" 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-eb84a2" 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-4e1b93" 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-b02d85" 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-c7e852" 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-01ac02" 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-124787" 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-b377d1" 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-8483d3" 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-bba32b" 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-6d4d46" 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-e8a208" 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-71241a" 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-40ee89" 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-02d276" 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-744ee7" 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-d24221" 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-7777d6" 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-aea546" 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-8c0362" 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-5ea3ad" 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-ea4da5" 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-4638a4" 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-70283c" 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-3c52db" 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>Responsive #
Use the 'display' utility classes .d-none, .d-{breakpoint}-none, .d-block and d-{breakpoint}-block to manage what version
should be seen.
North America
International Markets
North America
Toggle
North America
International Markets
Toggle
International Markets
Europe
Toggle
Europe
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-country-select-countries">
<!-- Expanded version -->
<div class="d-none d-md-block">...</div>
<!-- Collapsed version -->
<div class="d-block d-md-none">...</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheet is 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
- 07 Jul 2025 - fix(country-select-countries): height calculation because of font change rebrand
Added
- RTL support
- Allow usage inside typesystem
- Initial draft