🍷 Digital Wine Cellar – Pattern Library

Language selector 

<div class="lang-selector">
    <label for="lang-trigger">
        <svg class="icon " height="20" width="20" aria-hidden="true">
            <use xlink:href="../../sprite.svg#flag-gb" />
        </svg>
        English
    </label>
    <input type="checkbox" id="lang-trigger">
    <ul class="flat-list lang-list">
        <li>
            <a href="#">
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#flag-se" />
                </svg>
                Svenska
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#flag-no" />
                </svg>
                Norsk
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#flag-dk" />
                </svg>
                Dansk
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#flag-de" />
                </svg>
                Deutsch
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#flag-fr" />
                </svg>
                Français
            </a>
        </li>
    </ul>
</div>
 
<div class="lang-selector">
  <label for="lang-trigger">
    {{> @svg}}
    {{selected-lang}}
  </label>
  <input type="checkbox" id="lang-trigger">
  <ul class="flat-list lang-list">
    {{#each languages}}
    <li>
      <a href="#">
        {{> @svg}}
        {{language}}
      </a>
    </li>
    {{/each}}
  </ul>
</div>
 
{
  "selected-lang": "English",
  "icon": "flag-gb",
  "languages": [
    {
      "language": "Svenska",
      "icon": "flag-se"
    },
    {
      "language": "Norsk",
      "icon": "flag-no"
    },
    {
      "language": "Dansk",
      "icon": "flag-dk"
    },
    {
      "language": "Deutsch",
      "icon": "flag-de"
    },
    {
      "language": "Français",
      "icon": "flag-fr"
    }
  ]
}
  • Content: 
    /**
 * Language selector
 */

@media screen {

  .lang-selector {
    margin-top: 0;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.9em;
  }

  #lang-trigger {
    display: none;
  }

  .lang-list {
    background-color: var(--mid-grey);
    overflow: hidden;
    border-radius: 3px;
    max-height: 0;
    transition: 800ms ease-in-out;
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.4);
  }

  #lang-trigger:checked ~ .lang-list {
    max-height: 40rem;
  }

  .lang-list,
  .lang-list li {
    margin-top: 0;
  }

  .lang-list li + li {
    margin: 0;
  }

  .lang-selector label,
  .lang-selector a {
    display: flex;
    align-items: center;
  }

  .lang-selector a {
    color: inherit;
    text-decoration: none;
    padding: 0.25em 0.7em;
  }

  .lang-selector a:hover,
  .lang-selector a:focus,
  .lang-selector a:active {
    background-color: hsla(0, 100%, 100%, 0.1);
  }

  .lang-selector .icon {
    margin-right: 0.3em;
    width: 1.1em;
  }
}
  • URL: /components/raw/lang-selector/lang-selector.css
  • Filesystem Path: components/03_organisms/lang-selector/lang-selector.css
  • Size: 988 Bytes

Language selector

Only to be a sub-component of @off-screen-menu.