<nav role="navigation" class="c-footer-nav">
<ul class="c-footer-nav__list">
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
About
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Our Space
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Stories
</span>
</a>
</li>
</ul>
<ul class="c-footer-nav__list">
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Study
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Undergraduate Degree
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Graduate Degree
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Elective
</span>
</a>
</li>
</ul>
<ul class="c-footer-nav__list">
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Innovate
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Professional Education
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Marketplace
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Tools
</span>
</a>
</li>
</ul>
<ul class="c-footer-nav__list">
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Connect
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Directory
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Events
</span>
</a>
</li>
<li class="c-footer-nav__list-item">
<a class="o-link c-footer-nav__link" href="/" target="_self">
<span class="o-link__label">
Support
</span>
</a>
</li>
</ul>
</nav>
{% set base_class = footer_nav.base_class|default('c-footer-nav') %}
{% if footer_nav.lists %}
<nav role="navigation" class="{{ bem(base_class, footer_nav.element, footer_nav.modifiers, footer_nav.extra) }}" {{ attributes(footer_nav.attributes) }}>
{% for list in footer_nav.lists %}
<ul class="{{ bem(base_class, 'list') }}">
{% for item in list.items %}
<li class="{{ bem(base_class, 'list-item') }}">
{% include "@link" with {
"link": {
"text": item.text,
"url": item.url,
"target": item.target,
"extra": bem(base_class, 'link')
}
} %}
</li>
{% endfor %}
</ul>
{% endfor %}
</nav>
{% endif %}
{
"footer_nav": {
"lists": [
{
"items": [
{
"text": "About",
"url": "/"
},
{
"text": "Our Space",
"url": "/"
},
{
"text": "Stories",
"url": "/"
}
]
},
{
"items": [
{
"text": "Study",
"url": "/"
},
{
"text": "Undergraduate Degree",
"url": "/"
},
{
"text": "Graduate Degree",
"url": "/"
},
{
"text": "Elective",
"url": "/"
}
]
},
{
"items": [
{
"text": "Innovate",
"url": "/"
},
{
"text": "Professional Education",
"url": "/"
},
{
"text": "Marketplace",
"url": "/"
},
{
"text": "Tools",
"url": "/"
}
]
},
{
"items": [
{
"text": "Connect",
"url": "/"
},
{
"text": "Directory",
"url": "/"
},
{
"text": "Events",
"url": "/"
},
{
"text": "Support",
"url": "/"
}
]
}
]
}
}
/* ------------------------------------*\
$FOOTER NAV
\*------------------------------------ */
.c-footer-nav {
display: flex;
gap: var(--ds-space);
flex-direction: column;
padding-top: var(--ds-space-md);
justify-content: space-between;
@include media(">small") {
flex-direction: row;
justify-content: flex-start;
}
&__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--ds-space-xxs);
flex: 1;
}
&__link {
@extend .o-detail--3;
&:not(:hover) {
span:not(.o-icon)::after {
color: transparent;
}
}
}
}
No notes defined.