4.8 Footer View in a new window
Example
Markup
{% set data = data|default({
"respectText": "We pay respect to the Traditional Custodians and First Peoples of NSW, and acknowledge their continued connection to their country and culture.",
"copyright": "Copyright © 2019",
"svgUrl":".",
"sectionLinks": [
{
"title": "Section Link",
"url": "#",
"links": [
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
}
]
},
{
"title": "Section Link",
"url": "#",
"links": [
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
}
]
},
{
"title": "Section Link",
"url": "#",
"links": [
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
}
]
},
{
"title": "Section Link",
"url": "#",
"links": [
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
},
{
"text": "Highlight link",
"url": "#"
}
]
}
],
"footerLinks": [
{
"text": "Tertiary",
"url": "#"
},
{
"text": "Tertiary",
"url": "#"
},
{
"text": "Tertiary",
"url": "#"
},
{
"text": "Tertiary",
"url": "#"
}
]
}) %}
<footer class="nsw-footer {{modifier_class}}">
<div class="nsw-footer__upper">
<div class="nsw-container section-links">
{% for item in data.sectionLinks %}
<div class="section-links__group">
<h3 class="section-links__heading d-sm-block d-none"><a href="{{item.url}}">{{item.title}}</a></h3>
<h3 class="section-links__heading d-sm-none section-links__accordian" data-toggle="collapse" data-target="#footer-{{ loop.index0 }}" aria-expanded="false" aria-controls="footer-{{ loop.index0 }}">
<span>{{item.title}}</span>
<img src="{{data.svgUrl}}/images/chevron-blue.svg">
</h3>
<nav role="navigation" class="section-links__navigation">
<ul class="section-links__list collapse" aria-labelledby="footer-{{ loop.index0 }}" id="footer-{{ loop.index0 }}">
{% for link in item.links %}
<li class="section-links__item"><a href="{{link.url}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</nav>
</div>
{% endfor %}
</div>
</div>
<div class="nsw-footer__lower">
<div class="nsw-container">
<p>{{data.respectText}}</p>
<hr>
<ul class="nsw-footer-links">
{% for link in data.footerLinks %}
<li class="nsw-footer-links__item">
<a href="{{link.url}}" class="nsw-footer-links__link">{{link.text}}</a>
</li>
{% endfor %}
</ul>
<div class="nsw-footer__info">
<p class="nsw-footer__copyright">{{data.copyright}}</p>
</div>
</div>
</div>
</footer>