Net7 UI Kit

Link component: Has Icon 

<a href="" class="n7-link
      n7-link--has-icon
">
    Link text

    <svg class="n7-icon inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--pencil-square" />
    </svg>

</a>
 
{% extends '@link' %}

{% block classes %}
    {{ super() }} n7-link--has-icon
{% endblock %}
 
{
  "label": "Link text",
  "icon": "mini--pencil-square",
  "iconSize": "w-1e h-1e",
  "href": null,
  "hasIcon": true
}
  • Content: 
    /* 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;
    }
}
  • URL: /components/raw/link/link.css
  • Filesystem Path: components/02-atoms/link/link.css
  • Size: 379 Bytes

Link component.

Configurations:

  • icon: value - icon id
  • classes: value - set classes
  • label: value - set link label
  • iconSize: value - set icon size classes
  • accessibleLabel: value - eventual accessible text for screen reader (gives more context for “read more” link text)
  • 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)