<nav role="navigation" class="c-quicklinks-nav">
<span class="c-quicklinks-nav__label">Quick Links:</span>
<a class="o-link c-quicklinks-nav__link" href="/" target="_self">
<span class="o-link__label">
Get in Touch
</span>
</a>
<a class="o-link c-quicklinks-nav__link" href="/" target="_self">
<span class="o-link__label">
FAQ
</span>
</a>
<a class="o-link c-quicklinks-nav__link" href="/" target="_self">
<span class="o-link__label">
Directory
</span>
</a>
<a class="o-link c-quicklinks-nav__link" href="/" target="_self">
<span class="o-link__label">
Careers
</span>
</a>
<a class="o-link c-quicklinks-nav__link" href="/" target="_self">
<span class="o-link__label">
News & Updates
</span>
</a>
<a class="o-link c-quicklinks-nav__link" href="/" target="_self">
<span class="o-link__label">
Special Initiatives
</span>
</a>
</nav>
{% set base_class = quicklinks_nav.base_class|default('c-quicklinks-nav') %}
{% if quicklinks_nav.items %}
<nav role="navigation" class="{{ bem(base_class, quicklinks_nav.element, quicklinks_nav.modifiers, quicklinks_nav.extra) }}" {{ attributes(quicklinks_nav.attributes) }}>
<span class="c-quicklinks-nav__label">Quick Links:</span>
{% for item in quicklinks_nav.items %}
{% include "@link" with {
"link": {
"text": item.text,
"url": item.url,
"target": item.target,
"extra": bem(base_class, 'link')
}
} %}
{% endfor %}
</nav>
{% endif %}
{
"quicklinks_nav": {
"items": [
{
"text": "Get in Touch",
"url": "/"
},
{
"text": "FAQ",
"url": "/"
},
{
"text": "Directory",
"url": "/"
},
{
"text": "Careers",
"url": "/"
},
{
"text": "News & Updates",
"url": "/"
},
{
"text": "Special Initiatives",
"url": "/"
}
]
}
}
/* ------------------------------------*\
$QUICKLINKS-NAV
\*------------------------------------ */
.c-quicklinks-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--ds-space-xs);
&__link {
@extend .o-detail--1;
&:not(:hover) {
span:not(.o-icon)::after {
color: transparent;
}
}
}
&__label {
@extend .o-detail--6;
}
}
No notes defined.