<a href="" class="n7-link ">
Link text
</a>
<{% if span %}span{% else %}a href="{{ href }}"{% endif %}{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="n7-link{%- block classes %} {{ classes }}{%- endblock -%}">
{%- block content -%}
{% if iconOnly %}
<span class="sr-only">{{ label }}</span>
{% else %}
{{ label }}
{% endif %}
{% if accessibleLabel %}<span class="sr-only">{{ accessibleLabel }}</span>{% endif %}
{%- endblock -%}
{%- block icon -%}
{% if hasIcon %}
{% render '@icon--small', { id: icon, size: iconSize, classes: iconClasses }, true %}
{% endif %}
{% if iconOnly %}
{% render '@icon--medium', { id: icon, size: iconSize, classes: iconClasses }, true %}
{% endif %}
{%- endblock -%}
</{% if span %}span{% else %}a{% endif %}>
{
"label": "Link text",
"icon": "mini--pencil-square",
"iconSize": "w-1e h-1e",
"href": null
}
/* LINK */
@layer components {
.n7-link {
@apply inline-flex gap-2 items-center n7-link-primary hover:underline hover:n7-link-primary-hover focus:text-primary-800 text-sm md:text-base;
}
.n7-link--sm {
@apply gap-1.5 text-sm;
}
.n7-link--lg {
@apply gap-2.5 text-lg;
}
.n7-link--underline {
@apply underline;
}
}
Link component.
Configurations: