Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Product
Primitives & components: Teva Product

Country Select Lookup

v0.0.0

The Country Select Lookup show a message based on the visitors country by using IP lookup:

When the lookup is succesful and the visitors country has a country site a message (e.g. 'We think this is your location') is displayed followed by the country flag and name and a button-link to the country site.

When the lookup is fails or visitors country has no country site a freeform text can be displayed, pointing the visitor to something useful.

Use the following data-attributes:

  • data-ipstack-key is required to fetch country information based on IP *.
  • data-countries an array with objects with following attributes cc, name (optional), url and flag, were:
    • cc is the two letter ISO 3166-1 alpha-2 code of the country.
    • name (optional) is the country name. When not provided, the API response country name is used.
    • url is the URL of the country site.
    • flag is the URL of the country flag image.
  • data-intro-text (optional) Defaults to 'We think this is your location'
  • data-button-label (optional) Defaults to 'Continue'
  • data-page-layout (optional) Defaults to 'false'. When true, loading is delayed until triggered by Page Layout

The IPStack service is used over Googles IP lookup service because of previous experiences with Googles IP lookups were not accurate enough to match the requirements.

The Country Select Lookup is part of Country Select component.

* Instead of using data-ipstack-key on every Country Select Lookup or any other IP based component, the key can also be set by creating a meta tag: <meta name="ipstack-key" id="ipstack-key" content="the-key-xyz" />

Provide instructions to inform users what to do when the IP they connect from, is not from a country with a country site.

<!-- 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>

Example #

Example of rendered output when lookup succesful.

We think this is your location

alt text

Mexico

Continue 
<!-- 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-demo="true" data-ipstack-key="6751675a13e2f097805aa47e57aa73bf">
  <div class="vi-country-select-lookup__section vi-country-select-lookup__section--intro">
    <p class="mb-0">We think this is your location</p>
  </div>
  <div class="vi-country-select-lookup__section vi-country-select-lookup__section--result">
    <!-- Media object  -->
    <div class="vi-media-object">
      <!-- Media object figure with (mods: --w-40) -->
      <div class="vi-media-object__figure vi-media-object__figure--w-40">
        <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">
        <p class="mb-0">Mexico</p>
      </div>
    </div>
  </div>
  <div class="vi-country-select-lookup__section vi-country-select-lookup__section--action">
    <!-- Button type: solid  -->
    <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Continue</a>
  </div>
</div>

Example of rendered output when lookup unsuccesful.

When unsuccesful, the default (WYSIWYG) text is rendered.

Provide instructions to inform users what to do when the IP they connect from, is not from a country with a country site.

<!-- 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-demo="true" 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>

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

Changed

Added

  • data-attribute data-page-layout, to delay loading until triggered by Page Layout
  • RTL support
  • Initial draft