Vebego Component Library

Nav Link 

<!-- Default -->
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nav link</a>


<!-- With Icon -->
<a class="atm-nav-link " href="#" title="Nav link with icon" aria-label="" target="">Nav link with icon<span class="atm-icon  far fa-external-link   "></span></a>


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


/* With Icon */
{
  "modifier": "",
  "href": "#",
  "text": "Nav link with icon",
  "title": "Nav link with icon",
  "isExternal": false,
  "target": "",
  "ariaLabel": "",
  "icon": {
    "icon": "fa-external-link",
    "style": "far"
  }
}
  • Content: 
    .atm-nav-link
{
    @apply font-display text-md font-semibold select-none;

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

No notes defined.