Kistenkoning components for Magento 2

Logo 

<a class="logo " href="#" aria-label="Homepage">
    <img class="logo__image " src="/images/logo/logo.svg" alt="Kappersmagazijn 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": "Kappersmagazijn Logo",
  "imageAttributes": "",
  "imageClass": "",
  "imageSrcSet": "",
  "imageSrc": "/images/logo/logo.svg",
  "href": "#"
}
  • Content: 
    $logo__max-width           : 30% !default;
$logo__max-width\@medium   : 250px !default;
$logo__max-width\@large    : 250px !default;
$logo__image-height        : 50px !default;
$logo__image-height\@medium: 75px !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-l) {
        justify-content: flex-start;
        max-width: $logo__max-width\@large;
    }

    &__image {
        height: $logo__image-height;
        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;
        }
    }
}
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: build/components/Molecules/logo/_logo.scss
  • Size: 858 Bytes

There are no notes for this item.