<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 }}"
src="{{ imageSrc }}"
alt="{{ imageAlt }}"
{{{ imageAttributes }}}
>
</a>
{
"class": "",
"ariaLabel": "Homepage",
"imageAlt": "Alpaca Logo",
"imageAttributes": "",
"imageClass": "",
"imageSrc": "/images/logo/logo.svg",
"href": "#"
}
$logo__max-width : 220px !default;
$logo__max-width\@medium : 381px !default;
$logo__image-height : 20px !default;
$logo__image-height\@medium : 34px !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;
}
&__image {
height: $logo__image-height;
@include mq($screen-s) {
height: $logo__image-height\@medium;
}
}
}
There are no notes for this item.