<a class="link" data-link-type="tel" href="tel:+4980011111111"><span class="link__icon"><svg class="icon icon--phone" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#phone"></use>
</svg></span><span class="link__text u-underline">0800 111 111 11</span></a>
{% set link = link | default(null) %}
{% set current = current ?? false %}
{% set showInternal = showInternal ?? false %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, showInternal=showInternal) %}
{% set iconPosition = iconPosition ?? 'before' %}
{% set block = block ?? false %}
{% set whitespace = block ? '' : '' %}
{% set tag = link ? 'a' : 'button' -%}
{% set linkComponent = html_cva(
base: 'link',
variants: {
overlay: {
false: null,
true: 'u-overlay-link',
},
},
) %}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: linkComponent.apply({
overlay: overlay ?? false,
}),
type: not link ? (type ??? 'button'),
title: title ?? false,
'data-link-block': block,
'data-link-type': linkType,
'aria-current': current is same as true ? 'true' : current,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>{% apply spaceless %}
{%- if (icon and iconPosition == 'before') or leftIcon|default -%}
<span class="link__icon">
{%- include '@icon' with { icon: leftIcon ?? icon } only -%}
{{- whitespace | raw -}}
</span>
{%- endif -%}
<span class="link__text u-underline">
{{- text | componentize(inline_only=true) -}}
</span>
{%- if (icon and iconPosition == 'after') or rightIcon|default -%}
<span class="link__icon">
{{- whitespace | raw -}}
{%- include '@icon' with { icon: rightIcon ?? icon } only -%}
</span>
{%- endif -%}
{% endapply %}</{{ tag }}>
{
"text": "0800 111 111 11",
"link": "tel:+4980011111111"
}
.link {
--_link-icon-size: var(--link-icon-size, 0.9em);
background-color: var(--link-background-color, transparent);
border-radius: var(--link-border-radius, 0);
box-decoration-break: clone;
color: var(--link-color, var(--color-orange-700));
display: var(--link-display, inline);
font-family: inherit;
font-size: inherit;
font-variation-settings: inherit;
font-weight: var(--link-font-weight, inherit);
line-height: inherit;
padding-block: var(--link-padding-block, 0);
padding-inline: var(--link-padding-inline, 0);
transition-property: color;
&:is(button:not([disabled]), :any-link):is(:hover, :focus-visible) {
color: var(--link-color--engaged, var(--color-steel-800));
}
&:is([data-link-block]) {
--link-icon-margin-block: calc((1lh - var(--_link-icon-size)) / 2);
--link-icon-vertical-align: 0;
--link-icon-display: flex;
align-items: flex-start;
display: flex;
inline-size: 100%;
justify-content: flex-start;
}
}
.link__text {
--underline-color: var(--link-underline-color, currentColor);
--underline-color--engaged: var(--link-underline-color--engaged, transparent);
--underline-thickness: var(--link-underline-thickness, 1px);
--underline-offset: var(--link-underline-offset, 0.25em);
}
.link__icon {
--icon-size: var(--_link-icon-size);
color: var(--link-icon-color, inherit);
display: var(--link-icon-display, inline);
flex-shrink: 0;
margin-block: var(--link-icon-margin-block, 0);
transition-property: color;
vertical-align: var(--link-icon-vertical-align, 0.1em);
white-space: nowrap;
&:first-child {
margin-inline-end: var(--link-icon-gap, 0.5em);
margin-inline-start: var(--link-icon-puffer, 0.1em);
}
&:last-child {
margin-inline-end: var(--link-icon-puffer, 0.1em);
margin-inline-start: var(--link-icon-gap, 0.5em);
}
}
No notes defined.