Framework Component Library

Footer 

<!-- 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">
                                            <use href="/images/icons.svg?1.0.0#logo" />
                                        </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.x.com", "//www.instagram.com", "//www.youtube.com", "//www.linkedin.com"]
                            }
                        </script>

                        <div class="meta-info" id="meta-info">
                            <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">
                                        <a class="meta-info__detail-label-link" href="//www.google.com/maps/place/?q=place_id:ChIJofvP7nsEyIkRAppsAwqW4SQ" target="_blank" rel="noopener" title="opens in new window">
                                            <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>
                                        </a>
                                    </span>
                                </div>
                                <div class="meta-info__detail meta-info__detail--email">
                                    <span class="meta-info__detail-icon" aria-hidden="true">
                                        <svg class="icon icon--mail">
                                            <use href="/images/icons.svg?1.0.0#mail" />
                                        </svg>
                                    </span>
                                    <span class="meta-info__detail-label">

                                        <a class="meta-info__detail-label-link
 				" href="mailto:info@fastspot.com">
                                            <span class="meta-info__detail-label-link-inner"> <span class="meta-info__detail-label-link-label">info<wbr>@fastspot.com</span>
                                            </span>
                                        </a> </span>
                                </div>
                                <div class="meta-info__detail meta-info__detail--phone">
                                    <span class="meta-info__detail-icon" aria-hidden="true">
                                        <svg class="icon icon--phone">
                                            <use href="/images/icons.svg?1.0.0#phone" />
                                        </svg>
                                    </span>
                                    <span class="meta-info__detail-label">
                                        <span class="meta-info__detail-label-hint">
                                            Phone:&nbsp;
                                        </span>

                                        <a class="meta-info__detail-label-link
 				" href="tel:4105375007">
                                            <span class="meta-info__detail-label-link-inner"> <span class="meta-info__detail-label-link-label">(410) 537-5007</span>
                                            </span>
                                        </a> </span>
                                </div>
                            </div>
                        </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">Footer</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__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--x">

                                <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">X</span>
                                        <span class="social-nav__item-link-icon" aria-hidden="true">
                                            <svg class="icon icon--x">
                                                <use href="/images/icons.svg?1.0.0#x" />
                                            </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--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--linkedin">

                                <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">Linkedin</span>
                                        <span class="social-nav__item-link-icon" aria-hidden="true">
                                            <svg class="icon icon--linkedin">
                                                <use href="/images/icons.svg?1.0.0#linkedin" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer__footer-nav">

                <nav class="footer-nav
 				" id="footer-nav-2" aria-labelledby="footer-nav-2__title">
                    <div class="footer-nav__header">
                        <h2 class="footer-nav__title" id="footer-nav-2__title">Footer</h2>
                    </div>
                    <ul class="footer-nav__list" aria-labelledby="footer-nav-2__title">
                        <li class="
						footer-nav__item
														">
                            <a class="
							footer-nav__item-link
											" id="footer-nav-2__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-2__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-2__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-2__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-2__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__social-nav">

                <div class="
		social-nav
				
	" id="social-nav-3">
                    <div class="social-nav__header">
                        <h2 class="social-nav__title" id="social-nav-3__title">Social</h2>
                    </div>
                    <ul class="social-nav__list" aria-labelledby="social-nav-3__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--x">

                            <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">X</span>
                                    <span class="social-nav__item-link-icon" aria-hidden="true">
                                        <svg class="icon icon--x">
                                            <use href="/images/icons.svg?1.0.0#x" />
                                        </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--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--linkedin">

                            <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">Linkedin</span>
                                    <span class="social-nav__item-link-icon" aria-hidden="true">
                                        <svg class="icon icon--linkedin">
                                            <use href="/images/icons.svg?1.0.0#linkedin" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </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">&copy;</span>
                        <span class="copyright__holder">Framework</span>
                        <time class="copyright__year">2025</time>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- END: Footer -->
 
{% set heading_level = heading_level ?? 2 %}
{% set heading_tag = 'h' ~ (heading_level) %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_level = heading_level + 1 %}

<!-- Footer -->
<footer class="footer" id="footer" data-js-footer>
	<div class="footer__primary">
		<div class="fw-container">
			<div class="footer__primary-inner">
				<{{ heading_tag }} class="visually-hide">
					Footer
				</{{ heading_tag }}>
				<div class="footer__primary-group">
					<div class="footer__logo">
						{% include '@partial-logo' with {
							modifiers: [ 'footer' ],
							icon: 'logo'
						} %}
					</div>
					<div class="footer__meta">
						{% render '@partial-meta' %}
					</div>
				</div>
				<div class="footer__footer-nav">
					{% include '@navigation-basic' with {
						classes: {
							base: 'footer-nav',
							modifiers: [],
							utility: ''
						},
						title: 'Footer',
						heading_level: item_heading_level,
						links: navigation.footer
					} %}
				</div>
				<div class="footer__social-nav">
					{% include '@navigation-social' with {
						classes: {
							modifiers: [],
							utility: ''
						},
						title: 'Social',
						heading_level: item_heading_level,
						links: navigation.social
					} %}
				</div>
			</div>
			<div class="footer__footer-nav">
				{% include '@navigation-basic' with {
					classes: {
						base: 'footer-nav',
						modifiers: [],
						utility: ''
					},
					title: 'Footer',
					links: navigation.footer
				} %}
			</div>
			<div class="footer__social-nav">
				{% include '@navigation-social' with {
					classes: {
						modifiers: [],
						utility: ''
					},
					title: 'Social',
					links: navigation.social
				} %}
			</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">&copy;</span>
						<span class="copyright__holder">
							{{- config.name -}}
						</span>
						<time class="copyright__year">
							{{- 'now'|date('Y') -}}
						</time>
					</p>
				</div>
			</div>
		</div>
	</div>
</footer>
<!-- END: Footer -->

No notes defined.