Logo

<a class="logo " href="#" aria-label="Homepage">
    <img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
<a
    class="logo {{ class }}"
    href="{{ href }}"
    aria-label="{{ ariaLabel}}"
>
    <img
        class="logo__image {{ imageClass }}"
        {{#if imageSrcSet }}
            srcset="{{ imageSrcSet }}"
        {{/if}}
        src="{{ imageSrc }}"
        alt="{{ imageAlt }}"
        {{{ imageAttributes }}}
    >
</a>
{
  "class": "",
  "ariaLabel": "Homepage",
  "imageAlt": "Alpaca Logo",
  "imageAttributes": "",
  "imageClass": "",
  "imageSrcSet": "",
  "imageSrc": "/images/logo/logo.svg",
  "href": "#"
}
  • Content:
    $logo__max-width           : 140px !default;
    $logo__max-width\@medium   : 256px !default;
    $logo__max-width\@large    : 256px !default;
    $logo__image-height        : 32px !default;
    $logo__image-height\@medium: 48px !default;
    $logo__image-width\@medium : auto !default;
    
    .logo {
        display: flex;
        align-items: center;
        flex: 1 $logo__max-width;
        justify-content: center;
        max-width: $logo__max-width;
    
        @include mq($screen-m) {
            flex: 1 $logo__max-width\@medium;
            max-width: $logo__max-width\@medium;
        }
    
        @include mq($screen-l) {
            justify-content: flex-start;
            max-width: $logo__max-width\@large;
        }
    
        &__image {
            height: $logo__image-height;
    
            @include mq($screen-m) {
                height: $logo__image-height\@medium;
                width: $logo__image-width\@medium;
            }
        }
    }
    
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: build/components/Molecules/logo/_logo.scss
  • Size: 853 Bytes

No notes defined.