<a class="header-button button--gray phonenumber" href="#" aria-label="Phone number">
<svg class="icon button__icon" role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#custom-tel"></use>
</svg>
<span class="header-button__text">
Contact
</span>
</a>
<a class="header-button button--gray customer-account" href="#" aria-label="Customer Account">
<svg class="icon button__icon" role="img">
<title>User's account</title>
<use xlink:href="/images/icons-sprite.svg#custom-acc"></use>
</svg>
<span class="header-button__text">
Account
</span>
</a>
{{#each button as |item| }}
<a class="header-button button--{{ item.class }}"
href="#"
aria-label="{{ item.ariaLabel }}"
>
{{ render '@icon' item.icon }}
<span class="header-button__text">
{{ text }}
</span>
</a>
{{/each}}
{
"button": [
{
"ariaLabel": "Phone number",
"text": "Contact",
"class": "gray phonenumber",
"icon": {
"id": "custom-tel",
"title": "Phone",
"class": "button__icon"
}
},
{
"ariaLabel": "Customer Account",
"text": "Account",
"class": "gray customer-account",
"icon": {
"id": "custom-acc",
"title": "User's account",
"class": "button__icon"
}
}
]
}
.header-button {
display: flex;
justify-content: center;
width: 35px;
height: 35px;
min-width: auto;
cursor: pointer;
transition: none;
padding: 0;
&__text {
@include visually-hidden();
}
& .button__icon {
width: 25px;
height: 25px;
}
}
There are no notes for this item.