<a href="#" class="supt-button-link ">
<span>
Read more
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M0.75 0.75L11.25 11.25" stroke-linecap="round" />
<path d="M11.25 0.75L0.75 11.25" stroke-linecap="round" />
</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",
"icon": "close"
}
.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);
}
}
}