Working together for the ultimate brand experience

Royal Canin Design Language

Country and language picker

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

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

Copied!