Vebego Component Library

Link 

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


<!-- With Icon -->
<a class="atm-link " href="#" title="Link with icon" aria-label="" target="">Link with icon</a>


<a class="atm-link {{modifier}}"
   href="{{href}}"
   title="{{title}}"
   aria-label="{{ariaLabel}}"
   target="{{target}}"
   {{#if isExternal}}rel="noopener noreferrer"{{/if}}
>{{text}}{{#if isExternal}}{{render '@icon' icon}}{{/if}}</a>
 
/* Default */
{
  "modifier": "",
  "href": "#",
  "text": "This is what a link looks like",
  "title": "This is what a link looks like",
  "isExternal": false,
  "target": "",
  "ariaLabel": ""
}


/* With Icon */
{
  "modifier": "",
  "href": "#",
  "text": "Link with icon",
  "title": "Link with icon",
  "isExternal": false,
  "target": "",
  "ariaLabel": "",
  "icon": {
    "icon": "fa-external-link",
    "style": "far"
  }
}
  • Content: 
    .atm-link {
    @apply text-cta;
    @apply underline hover:no-underline;

    .atm-icon {
        @apply ml-2;
    }
}
  • URL: /components/raw/link/link.css
  • Filesystem Path: src\components\02-atoms\link\link.css
  • Size: 128 Bytes

No notes defined.