<!-- 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 <i class="atm-icon far fa-external-link "></i>
</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"
}
}
.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;
}
}
No notes defined.