UHasselt Component Library

Link-external 

<!-- External -->
<a href="#" class="link-external " aria-label="" title="Faculteit Wetenschappen">
    <span class="icon fas fa-caret-right   icon-before" aria-hidden="true"></span>
    <span class="text">Faculteit Wetenschappen</span>
    <span class="icon far fa-external-link   " aria-hidden="true"></span>
</a>


<!-- External Text -->
<a href="#" class="link-external " aria-label="" title="Faculteit Wetenschappen">
    <span class="icon fas fa-caret-right   icon-before" aria-hidden="true"></span>
    <span class="text-before">Gewoon hoogleraar</span><span class="text">Faculteit Wetenschappen</span>
    <span class="icon far fa-external-link   " aria-hidden="true"></span>
</a>


<a
  href="{{href}}"
  class="link-external {{modifier}}"
  aria-label="{{aria_label}}"
  title="{{title}}"
  {{#if external}}target="_blank" rel="noopener noreferrer"{{/if}}>
    {{#if iconBefore}}{{render '@icon' iconBefore merge=true}}{{/if}}
    {{#if text-before}}<span class="text-before">{{text-before}}</span>{{/if}}<span class="text">{{text}}</span>
    {{#if isExternal}}{{render '@icon' extIcon merge=true}}{{/if}}
 </a>
 
/* External */
{
  "modifier": "",
  "href": "#",
  "title": "Faculteit Wetenschappen",
  "aria_label": "",
  "text": "Faculteit Wetenschappen",
  "iconBefore": {
    "icon": "fa-caret-right",
    "style": "fas",
    "modifier": "icon-before"
  },
  "isExternal": true,
  "extIcon": {
    "icon": "fa-external-link",
    "style": "far"
  }
}


/* External Text */
{
  "modifier": "",
  "href": "#",
  "title": "Faculteit Wetenschappen",
  "aria_label": "",
  "text": "Faculteit Wetenschappen",
  "iconBefore": {
    "icon": "fa-caret-right",
    "style": "fas",
    "modifier": "icon-before"
  },
  "isExternal": true,
  "extIcon": {
    "icon": "fa-external-link",
    "style": "far"
  },
  "text-before": "Gewoon hoogleraar"
}
  • Content: 
    .link-external {
    @apply inline-flex no-underline text-red;

    .text-before {
        @apply text-black;
    }

    .icon {
        @apply self-center;
    }

    .icon-before + .text,
    .text-before + .text,
    .icon-before + .text-before,
    .text + .icon {
        @apply ml-2;
    }

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

No notes defined.