UHasselt Component Library

Link: Icon Before 

<a href="#" class="link " aria-label="" title="This is what a link looks like">
    <span class="icon far fa-arrow-left   " aria-hidden="true"></span>
    <span class="text">This is what a link looks like</span>

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

    .icon {
        @apply self-center;
    }

    .span-icon-only,
    &.link-secondary {
        @apply text-black-500;
    }

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

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

No notes defined.