<nav aria-label="Sub" class="Internal-menu">
<ul role="list">
<li>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>The team</span></a>
</li>
<li>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Jobs</span></a>
</li>
<li>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Our timeline</span></a>
</li>
</ul>
</nav>
<nav aria-label="Sub" class="Internal-menu">
<ul role="list">
{% for item in menu %}
<li>
{% include '@twi' with {
icon: 'arrow-right',
text: item.text,
link: item.url
} %}
</li>
{% endfor %}
</ul>
</nav>
{
"menu": [
{
"text": "The team",
"url": "#"
},
{
"text": "Jobs",
"url": "#"
},
{
"text": "Our timeline",
"url": "#"
}
]
}
.Internal-menu {
ul {
display: flex;
flex-wrap: wrap;
& > * {
margin-right: var(--space-s);
}
@media screen and (min-width: 50rem) {
flex-direction: column;
padding-top: var(--space-s);
& > * + * {
margin-top: var(--space-2xs);
}
}
}
}
No notes defined.