@e-fellows/website-2022

Sprachschalter 

<a class="lang-switcher" title="Switch to English" rel="alternate" hreflang="en" href="#">
    <img class="lang-switcher__flag" src="/assets/images/en-flag.583699d9c6.svg" width="50" height="30" role="presentation" loading="lazy" alt="">
</a>
 
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set tag = link ? 'a' : 'button' -%}

<{{ tag }} {{ html_attributes({
  id: id ?? false,
  class: 'lang-switcher',
  type: not link ? (type ??? 'button'),
  title: title ?? false,
  disabled: disabled ?? false,
  target: target ?? false,
  rel: 'alternate',
  hreflang: language | lower,
  href: link,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
  <img {{ html_attributes({
    class: 'lang-switcher__flag',
    src: asset('images/en-flag.svg'),
    width: 50,
    height: 30,
    role: 'presentation',
    loading: 'lazy',
    alt: '',
  }) }}>
</{{ tag }}>
 
{
  "link": "#",
  "title": "Switch to English",
  "language": "EN"
}
  • Content: 
    .lang-switcher {
  align-items: center;
  aspect-ratio: 1;
  display: inline-flex;
  inline-size: var(--lang-switcher-size, 3.3rem);
  justify-content: flex-start;
  line-height: 1;
  text-align: start;
  user-select: none;

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.lang-switcher__flag {
  block-size: auto;
  flex-shrink: 0;
  inline-size: var(--lang-switcher-icon-size, 100%);
}
  • URL: /components/raw/lang-switcher/lang-switcher.scss
  • Filesystem Path: src/components/1-atoms/lang-switcher/lang-switcher.scss
  • Size: 407 Bytes

No notes defined.