Vebego Component Library

Language Select 

<div class='mol-language-mobile-list'>
        <div>
            <ul>
                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">English (EN)</a>
                </li>
                <li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Nederlands (NL)</a>
                </li>
                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Deutsch (DE)</a>
                </li>
            </ul>
        </div>
    </div>
 
{{#if otherLangs}}
    <div class='mol-language-mobile-list'>
        <div>
            <ul>
                {{#each otherLangs}}
                    <li class="{{#if active}}active{{/if}}">{{render '@nav-link' this}}</li>
                {{/each}}
            </ul>
        </div>
    </div>
{{/if}}
 
{
  "otherLangs": [
    {
      "text": "English (EN)",
      "href": "#",
      "active": false
    },
    {
      "text": "Nederlands (NL)",
      "href": "#",
      "active": true
    },
    {
      "text": "Deutsch (DE)",
      "href": "#",
      "active": false
    }
  ]
}
  • Content: 
    .mol-language-mobile-list {
    @apply relative mt-10;

    li {
        @apply mt-2;

        .atm-nav-link {
            @apply text-sm font-light hover:no-underline;
        }
    }

    .active {
        @apply text-primary;
    }
}
  • URL: /components/raw/language-mobile-list/language-mobile-list.css
  • Filesystem Path: src\components\03-molecules\language-mobile-list\language-mobile-list.css
  • Size: 252 Bytes

No notes defined.