Vebego Component Library

Nav Link: Default 

<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nav link</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>
 
{
  "modifier": "",
  "href": "#",
  "text": "Nav link",
  "title": "Nav link",
  "isExternal": false,
  "target": "",
  "ariaLabel": "",
  "icon": false
}
  • Content: 
    .atm-nav-link {
    @apply text-h4 lg:text-h3 text-black select-none;
    @apply flex items-center transition-colors cursor-pointer font-display;
    /**
     * 👆 `cursor-pointer` is necessary because this class is also used in
     * other components, like `header-nav`.
    */

    &:hover {
        @apply text-secondary-col-1;
    }

    .atm-icon {
        @apply ml-6 text-md lg:text-lg;
    }

    > .fa-chevron-down {
        @apply hidden md:block;
    }

    > .slash {
        @apply hidden;
    }
}
  • URL: /components/raw/nav-link/nav-link.css
  • Filesystem Path: src\components\02-atoms\nav-link\nav-link.css
  • Size: 538 Bytes

No notes defined.