Country and language selector

Note on flag codes. We've used the ISO 3166-1 alpha-2 flag naming convention as it's an international standard for flags. More information

html
            <section class="rc-max-width--lg">
  <h1 class="rc-alpha rc-modal__title rc-text--center">Select your location</h1>

  <div class="rc-fade--x rc-margin-y--md" data-toggle-group>
    <ul class="rc-scroll--x rc-list rc-list--inline rc-list--align rc-list--blank" role="tablist">
      <li>
        <button class="rc-tab rc-tab--img rc-btn" data-toggle="tab-europe" role="tab">
          <figure class="rc-tab__img rc-img--round rc-img--round--md rc-img--europe">
            <figcaption class="rc-screen-reader-text">Europe</figcaption>
          </figure>
          <span class="rc-tab__label">Europe</span>
        </button>
      </li>
      <li>
        <button class="rc-tab rc-tab--img rc-btn" data-toggle="tab-asia-pacific" role="tab">
          <figure class="rc-tab__img rc-img--round rc-img--round--md rc-img--asia-pacific">
            <figcaption class="rc-screen-reader-text">Asia Pacific</figcaption>
          </figure>
          <span class="rc-tab__label">Asia Pacific</span>
        </button>
      </li>
      <li>
        <button class="rc-tab rc-tab--img rc-btn" data-toggle="tab-north-america" role="tab">
          <figure class="rc-tab__img rc-img--round rc-img--round--md rc-img--north-america">
            <figcaption class="rc-screen-reader-text">North America</figcaption>
          </figure>
          <span class="rc-tab__label">North America</span>
        </button>
      </li>
      <li>
        <button class="rc-tab rc-tab--img rc-btn" data-toggle="tab-south-america" role="tab">
          <figure class="rc-tab__img rc-img--round rc-img--round--md rc-img--south-america">
            <figcaption class="rc-screen-reader-text">South America</figcaption>
          </figure>
          <span class="rc-tab__label">South America</span>
        </button>
      </li>
      <li>
        <button class="rc-tab rc-tab--img rc-btn" data-toggle="tab-middle-east" role="tab">
          <figure class="rc-tab__img rc-img--round rc-img--round--md rc-img--middle-east">
            <figcaption class="rc-screen-reader-text">Middle East</figcaption>
          </figure>
          <span class="rc-tab__label">Middle East</span>
        </button>
      </li>
      <li>
        <button class="rc-tab rc-tab--img rc-btn" data-toggle="tab-africa" role="tab">
          <figure class="rc-tab__img rc-img--round rc-img--round--md rc-img--africa">
            <figcaption class="rc-screen-reader-text">Africa</figcaption>
          </figure>
          <span class="rc-tab__label">Africa</span>
        </button>
      </li>
    </ul>
  </div>

  <div class="rc-max-height--med rc-scroll--y">
    <div id="tab-europe" role="tabpanel">
      <ul class="rc-list rc-list--align rc-list--blank rc-list--five-column">
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-be" href="#/">Belgium</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-bg" href="#/">България</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-cz" href="#/">Česká republika</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-rs" href="#/">Србија</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-dk" href="#/">Denmark</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-de" href="#/">Deutschland</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ee" href="#/">Eesti</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-es" href="#/">España</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-gr" href="#/">Ελλάδα</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-fr" href="#/">France</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-hr" href="#/">Hrvatska</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-is" href="#/">Ísland</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-it" href="#/">Italia</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-lv" href="#/">Latvija</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-lt" href="#/">Lietuva</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-hu" href="#/">Magyarország</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-mt" href="#/">Malta</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-nl" href="#/">Nederland</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-sj" href="#/">Norge</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-at" href="#/">Österreich</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ru" href="#/">Россия</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-pl" href="#/">Polską</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-pt" href="#/">Portugal</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ro" href="#/">România</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ch" href="#/">Schweiz</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-si" href="#/">Slovenija</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-sk" href="#/">Slovensko</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-fi" href="#/">Suomi</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-se" href="#/">Sweden</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-tr" href="#/">Türkiye</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ua" href="#/">Украина</a></li>
        <li class="rc-list--item"><a class="rc-btn rc-btn--icon-label rc-flag rc-gb" href="#/">United Kingdom</a></li>
      </ul>
    </div>
    <div id="tab-asia-pacific" role="tabpanel">
      <ul class="rc-list rc-list--align rc-list--blank rc-list--five-column">
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-au" href="#/">Australia</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-cn" href="#/">中国</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-hk" href="#/">香港</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-in" href="#/">India</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-id" href="#/">Indonesia</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-jp" href="#/">日本</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-kr" href="#/">대한민국</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-my" href="#/">Malaysia</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-nz" href="#/">New Zealand</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ph" href="#/">Philippines</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-sg" href="#/">Singapore</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-tw" href="#/">台湾</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-th" href="#/">ประเทศไทย</a></li>
      </ul>
    </div>
    <div id="tab-north-america" role="tabpanel">
      <ul class="rc-list rc-list--align rc-list--blank rc-list--five-column">
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ca" href="#/">Canada (English)</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ca" href="#/">Canada (French)</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-mx" href="#/">Méjico</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-us" href="#/">USA</a></li>
      </ul>
    </div>
    <div id="tab-south-america" role="tabpanel">
      <ul class="rc-list rc-list--align rc-list--blank rc-list--five-column">
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ar" href="#/">Argentina</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-br" href="#/">Brazil</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-cl" href="#/">Chile</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-pr" href="#/">Puerto Rico</a></li>
      </ul>
    </div>
    <div id="tab-middle-east" role="tabpanel">
      <ul class="rc-list rc-list--align rc-list--blank rc-list--five-column">
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-ae" href="#/">UAE</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-il" href="#/">Israel</a></li>
      </ul>
    </div>
    <div id="tab-africa" role="tabpanel">
      <ul class="rc-list rc-list--align rc-list--blank rc-list--five-column">
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-fr" href="#/">Ile de la Réunion</a></li>
        <li class="rc-list__item"><a class="rc-btn rc-btn--icon-label rc-flag rc-za" href="#/">South Africa</a></li>
      </ul>
    </div>
  </div>

</section>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo