Net7 design system

Link component 

<a href="" class="n7-link ">Text</a>
 
<a href=""{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="n7-link{%- block classes %} {{ classes }}{%- endblock -%}">
    {%- block content -%}
       {{ label }}
    {%- endblock -%}
    {%- block icon -%}
        {% if hasIcon %}
            {% render '@icon--small', { id: icon, size: 'w-1e h-1e', classes: 'ml-2' }, true %}
        {% endif %}
    {%- endblock -%}
</a>
 
{
  "label": "Text",
  "icon": "mini--pencil-square"
}

Link component. Configurations:

  • allyHidden: true adds attributes in order to hyde the link from keyboard and screenreader (used in card fully clickable)

  • hasIcon: true to display an icon

You can configure: icon, classes, label