<a class="o-link o-link--tertiary" href="/" target="_self">
<span class="o-link__label">
Link
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
{% set base_class = link.base_class|default('o-link') %}
{% set link_icon = 'arrow-right' %}
{% if link.external %}
{% set link_icon = 'external-link' %}
{% elseif link.download %}
{% set link_icon = 'download' %}
{% endif %}
{% if link.url %}
<a class="{{ bem(base_class, link.element, link.modifiers, link.extra) }}" href="{{ link.url }}"{{ link.target == '_blank' ? ' target="_blank" rel="noreferrer"' : ' target="_self"' }} {{ attributes(link.attributes) }}>
{% if link.icon_placement == "before" %}
{% if link.arrow %}
{% include "@icon" with {
"icon": {
"name": "arrow-left"
}
} %}
{% else %}
{% include "@icon" with link %}
{% endif %}
{% endif %}
{% if link.text %}
<span class="{{ bem(base_class, 'label') }}">
{{ link.text }}
</span>
{% endif %}
{% if link.icon_placement != "before" %}
{% if link.arrow %}
{% include "@icon" with {
"icon": {
"name": link_icon,
"extra": (link.animation == false) ? '' : 'transition'
}
} %}
{% else %}
{% include "@icon" with link %}
{% endif %}
{% endif %}
</a>
{% endif %}
{
"link": {
"text": "Link",
"url": "/",
"modifiers": "tertiary",
"arrow": true
}
}
/* ------------------------------------ *\
$LINKS
\* ------------------------------------ */
.o-link {
@include o-link;
}
.o-link--secondary {
@include o-link--secondary;
}
.o-link--tertiary {
@include o-link--tertiary;
}
No notes defined.