Language Switcher

There are no notes for this item.

{% set Content %}
  <ul class="content links">
    <li>
      <strong>NL</strong>
    </li>
    <li>
      <a href="#" hreflang="en" title="Continue in English" lang="en">
        EN </a>
    </li>
    <li>
      <a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
        FR </a>
    </li>
    <li>
      <a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
        DE </a>
    </li>
  </ul>
{% endset %}

{% if accordion %}
  <div class="language-switcher accordion">
    <button aria-controls="{{ id | default('language_switcher_content') }}"
            aria-expanded="false"
            class="toggle accordion--button">
      NL
    </button>
    <div id="{{ id | default('language_switcher_content') }}" class="accordion--content"
         aria-hidden="true">
      {{ Content }}
    </div>
  </div>
{% else %}
  <div class="language-switcher">
    {{ Content }}
  </div>
{% endif %}
<div class="language-switcher accordion">
    <button aria-controls="language_switcher_content" aria-expanded="false" class="toggle accordion--button">
        NL
    </button>
    <div id="language_switcher_content" class="accordion--content" aria-hidden="true">
        <ul class="content links">
            <li>
                <strong>NL</strong>
            </li>
            <li>
                <a href="#" hreflang="en" title="Continue in English" lang="en">
                    EN </a>
            </li>
            <li>
                <a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
                    FR </a>
            </li>
            <li>
                <a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
                    DE </a>
            </li>
        </ul>

    </div>
</div>
{
  "accordion": true,
  "id": "language_switcher_content"
}
  • Content:
    .language-switcher {
      display: flex;
      position: relative;
      justify-content: flex-end;
    
      .accordion--button {
        @include bold-text;
    
        display: flex;
        align-items: center;
        border: 0;
        background: transparent;
        font-size: .8rem;
        cursor: pointer;
      }
    
      .accordion--content {
        @include theme('box-shadow', 'color-box-shadow-secondary-dark');
    
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: .5rem;
        transition: max-height .3s ease-in-out;
        border-radius: border-radius('radius-1');
        background: color('white');
        z-index: z('language-switcher');
      }
    
      .content {
        padding: .4rem 1.6rem 0 .8rem;
      }
    }
    
  • URL: /components/raw/language-switcher/_language-switcher.scss
  • Filesystem Path: components/31-molecules/language-switcher/_language-switcher.scss
  • Size: 662 Bytes