OffHealth component library

Link component: Has Icon 

<a href="url.com" class="n7-link ">
    Link text

    <svg class="inline-block align-middle fill-current w-1e h-1e ml-2" aria-hidden="true" focusable="false" role="img">
        <use xlink:href="../../icons.svg#mini--arrow-right" />
    </svg>

</a>
 
<a href="{{ href }}"{% 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 %}
    {%- endblock -%}
    {%- block icon -%}
        {% if hasIcon %}
            {% render '@icon--small', { id: icon, size: 'w-1e h-1e', classes: 'ml-2' }, true %}
        {% endif %}
        {% if iconOnly %}
            {% render '@icon--medium', { id: icon, size: 'w-1e h-1e' }, true %}
        {% endif %}
    {%- endblock -%}
</a>
 
{
  "label": "Link text",
  "icon": "mini--arrow-right",
  "href": "url.com",
  "hasIcon": true
}

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

  • iconOnly: true to display only an icon (no visible text)

You can configure: icon, classes, label