26 #langselect Language select (Page)

Language selector for a page content.

Examples

.lang-select-page--transparent

Transparent background

<div class="lang-select-page [modifier class]">
  <span class="lang-select-page__icon icon icon--generic-lang"></span>
  <ul class="lang-select-page__list">
    <li class="lang-select-page__option lang-select-page__unavailable">français</li>
    <li class="lang-select-page__option is-selected">English</li>
    <li class="lang-select-page__option"><a href="/nl" hreflang="nl" lang="nl" rel="alternate">Nederlands</a></li>
    <li class="lang-select-page__option"><a href="/hr" hreflang="hr" lang="hr" rel="alternate">hrvatski</a></li>
    <li class="lang-select-page__option"><a href="/it" hreflang="it" lang="it" rel="alternate">italiano</a></li>
    <li class="lang-select-page__option"><a href="/lv" hreflang="lv" lang="lv" rel="alternate">latviesu</a></li>
    <li class="lang-select-page__option"><a href="/hu" hreflang="hu" lang="hu" rel="alternate">magyar</a></li>
  </ul>
</div>

26.1 #langselect.dropdown Language select (Dropdown)

Demonstrates the language switcher for mobile and small viewports.

Examples

.lang-select-page--transparent

Transparent background

<div class="lang-select-page [modifier class]">
  <span class="lang-select-page__icon icon icon--generic-lang"></span>
  <ul class="lang-select-page__list">
    <li class="lang-select-page__option lang-select-page__unavailable">français</li>
    <li style="display: none;" class="lang-select-page__option is-selected">English</li>
    <li style="display: none;" class="lang-select-page__option"><a href="/nl" hreflang="nl" lang="nl" rel="alternate">Nederlands</a></li>
    <li style="display: none;" class="lang-select-page__option"><a href="/hr" hreflang="hr" lang="hr" rel="alternate">hrvatski</a></li>
    <li style="display: none;" class="lang-select-page__option"><a href="/it" hreflang="it" lang="it" rel="alternate">italiano</a></li>
    <li style="display: none;" class="lang-select-page__option"><a href="/lv" hreflang="lv" lang="lv" rel="alternate">latviesu</a></li>
    <li style="display: none;" class="lang-select-page__option"><a href="/hu" hreflang="hu" lang="hu" rel="alternate">magyar</a></li>
  </ul>
  <select style="display: inline-block;" class="lang-select-page__list">
    <option selected="selected" lang="en">English</option>
    <option value="/nl" lang="nl">Nederlands</option>
    <option value="/hr" lang="hr">hrvatski</option>
    <option value="/it" lang="it">italiano</option>
    <option value="/lv" lang="lv">latviesu</option>
    <option value="/hu" lang="hu">magyar</option>
  </select>
</div>