<a href="#" class="supt-button-link " download="true">
<span>
Read more
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 17" fill="none">
<path d="M2 7L7.64645 12.6464C7.84171 12.8417 8.15829 12.8417 8.35355 12.6464L14 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M8.02818 0.778183L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M15.005 16L1.00501 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</span>
</a>
No notes defined.
{% if attrs.target == '_blank' %}
{% set icon = 'external-link' %}
{% elseif attrs.download == true or attrs.download == 'true' %}
{% set icon = 'download' %}
{% elseif icon is not defined %}
{% set icon = 'chevron' %}
{% set icon_modifiers = ['right'] %}
{% endif %}
<a href="{{ href }}" class="supt-button-link {{ modifiers|modifiersAttr }}" {{ attrs|attrs }}>
<span>
{{ text }}
{% include "02-icons/"~ icon ~"-icon.twig" with { modifiers: icon_modifiers } %}
</span>
</a>
{
"modifiers": [],
"href": "#",
"text": "Read more",
"attrs": {
"download": "true"
}
}
.supt-button-link {
@extend %t-body-s, %link-underline-reversed;
font-weight: 500;
color: $color-main;
letter-spacing: 0;
text-decoration: none;
outline: none;
span {
position: relative;
display: inline-flex;
align-items: baseline;
gap: $spacing-1-5;
}
svg {
display: inline-flex;
align-items: center;
vertical-align: middle;
width: 10px;
height: 10px;
&.-right {
transform: rotate(-90deg);
}
}
&:hover {
color: $color-main;
}
&:focus-visible {
color: $color-medium;
background-size: 100% 2px;
}
&.-back,
&[rel='prev'] {
svg {
order: -1;
transform: rotate(90deg);
}
}
}