UHasselt Component Library

App Link: External 

<a href="#" class="atm-link " aria-label="" title="This is what a link looks like">

    <span class="text">This is what a link looks like</span>

    <span class="atm-icon far fa-external-link   " aria-hidden="true"></span>
</a>
 
<a
  href="{{href}}"
  class="atm-link {{modifier}}"
  aria-label="{{aria_label}}"
  title="{{title}}"
  {{#if external}}target="_blank" rel="noopener noreferrer"{{/if}}>
    {{#unless isExternal}}{{#if iconBefore}}{{render '@app-icon' iconBefore merge=true}}{{/if}}{{/unless}}
    <span class="text">{{text}}</span>
    {{#unless isExternal}}{{#if iconAfter}}{{render '@app-icon' iconAfter merge=true}}{{/if}}{{/unless}}
    {{#if isExternal}}{{render '@app-icon' extIcon merge=true}}{{/if}}
  </a>
 
{
  "modifier": "",
  "href": "#",
  "title": "This is what a link looks like",
  "aria_label": "",
  "text": "This is what a link looks like",
  "isExternal": true,
  "extIcon": {
    "icon": "fa-external-link",
    "style": "far"
  }
}
  • Content: 
    .atm-link {
    @apply inline-flex no-underline text-red;

    .atm-icon {
        @apply self-center;
    }

    .atm-icon + .text,
    .text + .atm-icon {
        @apply ml-1;
    }

    &:hover {
        .text {
            @apply underline;
        }
    }
}
  • URL: /components/raw/app-link/app-link.css
  • Filesystem Path: src\components\07-app-atoms\app-link\app-link.css
  • Size: 281 Bytes

No notes defined.