<!-- Footer -->
<footer class="footer" id="footer" data-js-footer>
<div class="footer__primary">
<div class="fw-container">
<div class="footer__primary-inner">
<h2 class="visually-hide">Footer</h2>
<div class="footer__primary-group">
<div class="footer__logo">
<div class="logo logo--footer">
<a class="logo__link
" href="#">
<span class="logo__link-inner"> <span class="logo__link-label">Framework</span>
<span class="logo__link-icon" aria-hidden="true">
<svg class="icon icon--logo-mono">
<use href="/images/icons.svg?1.0.0#logo-mono" />
</svg>
</span>
</span>
</a>
</div>
</div>
<div class="footer__meta">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Framework",
"logo": "//static.example.dev.fastspot.com/images/logo-schema.png",
"address": {
"@type": "PostalAddress",
"streetAddress": "2980 Falls Road",
"addressLocality": "Baltimore",
"addressRegion": "MD",
"postalCode": "21211"
},
"email": "info@fastspot.com",
"telephone": "(410) 537-5007",
"url": "//static.example.dev.fastspot.com",
"sameAs": ["//www.facebook.com", "//www.youtube.com", "//www.instagram.com", "//www.tiktok.com", "//www.flickr.com"]
}
</script>
<div class="meta-info" id="meta-info">
<h3 class="meta-info__title">Contact Information</h3>
<div class="meta-info__details">
<div class="meta-info__detail meta-info__detail--address">
<span class="meta-info__detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="meta-info__detail-label">
<span class="meta-info__address-street">2980 Falls Road,</span>
<span class="meta-info__address-group">
<span class="meta-info__address-city">Baltimore,</span>
<span class="meta-info__address-state">MD</span>
<span class="meta-info__address-zip">21211</span>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="footer__social-nav">
<div class="
social-nav
" id="social-nav-2">
<div class="social-nav__header">
<h3 class="social-nav__title" id="social-nav-2__title">Social</h3>
</div>
<ul class="social-nav__list" aria-labelledby="social-nav-2__title">
<li class="social-nav__item social-nav__item--facebook">
<a class="social-nav__item-link
" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Facebook</span>
<span class="social-nav__item-link-icon" aria-hidden="true">
<svg class="icon icon--facebook">
<use href="/images/icons.svg?1.0.0#facebook" />
</svg>
</span>
</span>
</a>
</li>
<li class="social-nav__item social-nav__item--youtube">
<a class="social-nav__item-link
" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Youtube</span>
<span class="social-nav__item-link-icon" aria-hidden="true">
<svg class="icon icon--youtube">
<use href="/images/icons.svg?1.0.0#youtube" />
</svg>
</span>
</span>
</a>
</li>
<li class="social-nav__item social-nav__item--instagram">
<a class="social-nav__item-link
" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Instagram</span>
<span class="social-nav__item-link-icon" aria-hidden="true">
<svg class="icon icon--instagram">
<use href="/images/icons.svg?1.0.0#instagram" />
</svg>
</span>
</span>
</a>
</li>
<li class="social-nav__item social-nav__item--tiktok">
<a class="social-nav__item-link
" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Tiktok</span>
<span class="social-nav__item-link-icon" aria-hidden="true">
<svg class="icon icon--tiktok">
<use href="/images/icons.svg?1.0.0#tiktok" />
</svg>
</span>
</span>
</a>
</li>
<li class="social-nav__item social-nav__item--flickr">
<a class="social-nav__item-link
" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="social-nav__item-link-inner"> <span class="social-nav__item-link-label">Flickr</span>
<span class="social-nav__item-link-icon" aria-hidden="true">
<svg class="icon icon--flickr">
<use href="/images/icons.svg?1.0.0#flickr" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer__footer-nav">
<nav class="footer-nav
" id="footer-nav-1" aria-labelledby="footer-nav-1__title">
<div class="footer-nav__header">
<h3 class="footer-nav__title" id="footer-nav-1__title">Quicklinks</h3>
</div>
<ul class="footer-nav__list" aria-labelledby="footer-nav-1__title">
<li class="
footer-nav__item
">
<a class="
footer-nav__item-link
" id="footer-nav-1__link-1item-link" href="#">
<div class="footer-nav__item-link-inner">
<span class="footer-nav__item-link-label">Make a Gift</span>
</div>
</a>
</li>
<li class="
footer-nav__item
">
<a class="
footer-nav__item-link
" id="footer-nav-1__link-2item-link" href="#">
<div class="footer-nav__item-link-inner">
<span class="footer-nav__item-link-label">Library & Information Technology</span>
</div>
</a>
</li>
<li class="
footer-nav__item
">
<a class="
footer-nav__item-link
" id="footer-nav-1__link-3item-link" href="#">
<div class="footer-nav__item-link-inner">
<span class="footer-nav__item-link-label">Offices & Services</span>
</div>
</a>
</li>
<li class="
footer-nav__item
">
<a class="
footer-nav__item-link
" id="footer-nav-1__link-4item-link" href="#">
<div class="footer-nav__item-link-inner">
<span class="footer-nav__item-link-label">Bookstore</span>
</div>
</a>
</li>
<li class="
footer-nav__item
">
<a class="
footer-nav__item-link
" id="footer-nav-1__link-5item-link" href="#">
<div class="footer-nav__item-link-inner">
<span class="footer-nav__item-link-label">Apply Now</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<div class="footer__contact-link">
<a class="button-paint
" href="#">
<span class="button-paint__inner"> <span class="button-paint__label">Reach Out</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="footer__ribbon">
<div class="fw-container">
<div class="footer__ribbon-inner">
<div class="footer__utility-nav">
<nav class="utility-nav
" id="utility-nav-1" aria-labelledby="utility-nav-1__title">
<div class="utility-nav__header">
<h3 class="utility-nav__title" id="utility-nav-1__title">Utility</h3>
</div>
<ul class="utility-nav__list" aria-labelledby="utility-nav-1__title">
<li class="
utility-nav__item
">
<a class="
utility-nav__item-link
" id="utility-nav-1__link-1item-link" href="#">
<div class="utility-nav__item-link-inner">
<span class="utility-nav__item-link-label">Accessibility</span>
</div>
</a>
</li>
<li class="
utility-nav__item
">
<a class="
utility-nav__item-link
" id="utility-nav-1__link-2item-link" href="#">
<div class="utility-nav__item-link-inner">
<span class="utility-nav__item-link-label">Contact Us</span>
</div>
</a>
</li>
<li class="
utility-nav__item
">
<a class="
utility-nav__item-link
" id="utility-nav-1__link-3item-link" href="#">
<div class="utility-nav__item-link-inner">
<span class="utility-nav__item-link-label">Employment Opportunities</span>
</div>
</a>
</li>
<li class="
utility-nav__item
">
<a class="
utility-nav__item-link
" id="utility-nav-1__link-4item-link" href="#">
<div class="utility-nav__item-link-inner">
<span class="utility-nav__item-link-label">Maps & Directions</span>
</div>
</a>
</li>
<li class="
utility-nav__item
">
<a class="
utility-nav__item-link
" id="utility-nav-1__link-5item-link" href="#">
<div class="utility-nav__item-link-inner">
<span class="utility-nav__item-link-label">Privacy Policy</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<div class="footer__copyright">
<p class="copyright">
<span class="copyright__icon">Copyright ©</span>
<time class="copyright__year">2026.
</time>
<span class="copyright__holder">Framework. All Rights Reserved.
</span>
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- END: Footer -->
{% set group_title = 'Footer' %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_level = has_group_title ? heading_level + 1 : heading_level %}
<!-- Footer -->
<footer class="footer" id="footer" data-js-footer>
<div class="footer__primary">
<div class="fw-container">
<div class="footer__primary-inner">
{% if has_group_title %}
<{{ group_heading_tag }} class="visually-hide">
{{- group_title -}}
</{{ group_heading_tag }}>
{% endif %}
<div class="footer__primary-group">
<div class="footer__logo">
{% include '@partial-logo' with {
modifiers: [ 'footer' ],
icon: 'logo-mono'
} %}
</div>
<div class="footer__meta">
{% render '@partial-meta' with {
heading_level: item_heading_level
} %}
</div>
<div class="footer__social-nav">
{% include '@navigation-social' with {
classes: {
modifiers: [],
utility: ''
},
title: 'Social',
heading_level: item_heading_level,
links: navigation.social
} only %}
</div>
</div>
<div class="footer__footer-nav">
{% include '@navigation-basic' with {
classes: {
base: 'footer-nav',
modifiers: [],
utility: ''
},
title: 'Quicklinks',
heading_level: item_heading_level,
links: navigation.footer
} only %}
</div>
<div class="footer__contact-link">
{% set contact_link_title = 'Reach Out' %}
{% set contact_link_url = '#' %}
{% include '@partial-link' with {
classes: {
base: 'button-paint',
},
title: contact_link_title,
url: contact_link_url,
icon: null
} only %}
{# {% include '@navigation-social' with {
classes: {
modifiers: [],
utility: ''
},
title: 'Social',
heading_level: item_heading_level,
links: navigation.social
} only %} #}
</div>
</div>
</div>
</div>
<div class="footer__ribbon">
<div class="fw-container">
<div class="footer__ribbon-inner">
<div class="footer__utility-nav">
{% include '@navigation-basic' with {
classes: {
base: 'utility-nav',
modifiers: [],
utility: ''
},
title: 'Utility',
heading_level: item_heading_level,
links: navigation.utility
} %}
</div>
<div class="footer__copyright">
<p class="copyright">
<span class="copyright__icon">Copyright ©</span>
<time class="copyright__year">
{{- 'now'|date('Y') -}}.
</time>
<span class="copyright__holder">
{{- config.name -}}. All Rights Reserved.
</span>
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- END: Footer -->
No notes defined.