<div class="o-container" data-bkg-theme="base">
<div class="c-breadcrumbs">
<h2 class="u-sr-only">Breadcrumbs</h2>
<nav aria-label="Breadcrumbs">
<ol class="c-breadcrumbs__items" aria-label="Breadcrumbs">
<li class="c-breadcrumbs__item">
<a href="#" class="f-text--breadcrumb c-breadcrumbs__link"><span class="u-hover-drawline--thin">Impact</span></a>
<span class="c-breadcrumb__sep"><svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L4 4L1 7" class="u-ct-stroke--dark" />
</svg>
</span>
</li>
<li class="c-breadcrumbs__item">
<a href="#" class="f-text--breadcrumb c-breadcrumbs__link"><span class="u-hover-drawline--thin">Collections and Biodiversity</span></a>
<span class="c-breadcrumb__sep"><svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L4 4L1 7" class="u-ct-stroke--dark" />
</svg>
</span>
</li>
<li class="c-breadcrumbs__item">
<a href="#" class="f-text--breadcrumb c-breadcrumbs__link" aria-current="page"><span class="u-hover-drawline--thin">Featured Projects</span></a>
</li>
</ol>
</nav>
</div>
</div>
<div class="o-container" data-bkg-theme="base">
<div class="c-breadcrumbs">
<h2 class="u-sr-only">Breadcrumbs</h2>
<nav aria-label="Breadcrumbs">
<ol class="c-breadcrumbs__items" aria-label="Breadcrumbs">
{% for item in items %}
<li class="c-breadcrumbs__item">
<a href="{{item.src}}" class="f-text--breadcrumb c-breadcrumbs__link"{% if loop.last %} aria-current="page"{% endif %}><span class="u-hover-drawline--thin">{{ item.title }}</span></a>
{% if not loop.last %}<span class="c-breadcrumb__sep">{% include "03-icons/right-carrat" %}</span>{% endif %}
</li>
{% endfor %}
</ol>
</nav>
</div>
</div>
{
"pageColorTheme": "teal",
"items": [
{
"title": "Impact",
"src": "#"
},
{
"title": "Collections and Biodiversity",
"src": "#"
},
{
"title": "Featured Projects",
"src": "#"
}
]
}
.c-breadcrumbs {
margin-bottom: 1.1rem;;
}
.c-breadcrumbs__item {
display: inline-block;
}
.c-breadcrumb__sep {
padding: 0 0.3rem;
display: inline-block;
svg {
display: block;
}
}
No notes defined.