Logo

<a class="logo " href="/components/preview/home" aria-label="Homepage">
    <img
        class="logo__image "
        src="/images/logo/logo_cruc.jpeg"
        alt="Cruc 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": "Cruc Logo",
  "imageAttributes": "",
  "imageClass": "",
  "imageSrcSet": "",
  "imageSrc": "/images/logo/logo_cruc.jpeg",
  "href": "/components/preview/home"
}
  • Content:
    $logo__max-width           : 30% !default;
    $logo__max-width\@medium   : 150px !default;
    $logo__max-width\@large    : 250px !default;
    $logo__image-height        : 30px !default;
    $logo__image-height\@medium: 45px !default;
    $logo__image-width\@medium : auto !default;
    
    .logo {
        display: flex;
        align-items: center;
        flex: 1 $logo__max-width;
        justify-content: center;
        max-width: calc(#{$logo__max-width} * 2);
        order: 2;
        @include mq($screen-m) {
            justify-content: flex-start;
            max-width: $logo__max-width\@medium;
            margin: 15px 0;
        }
        @include mq($screen-l) {
            justify-content: flex-start;
            max-width: $logo__max-width\@large;
        }
    
        &__image {
            height: $logo__image-height;
            width: auto;
            margin: 5px 0;
            //filter: invert(44%) sepia(26%) saturate(840%) hue-rotate(353deg) brightness(94%) contrast(82%);
    
            @include mq($screen-l) {
                height: $logo__image-height\@medium;
                width: $logo__image-width\@medium;
                margin: 0;
            }
        }
    }
    
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: build/components/Molecules/logo/_logo.scss
  • Size: 1.1 KB

There are no notes for this item.