JHU Sustainability Component Library

Footer 

<!-- Footer -->
<footer class="footer" id="footer">
    <div class="footer_bar">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="footer_bar_inner">

                    <div class="social_nav" itemprop="creator" itemscope itemtype="http://schema.org/">
                        <div class="social_nav_header">
                            <h2 class="social_nav_title">
                                <span class="social_nav_title_icon">
                                    <svg class="icon icon_connect">
                                        <use href="/images/icons.svg#connect" />
                                    </svg>
                                </span>
                                <span class="social_nav_title_label">Stay Connected</span>
                            </h2>
                        </div>
                        <ul class="social_nav_list" aria-label="Stay Connected">
                            <li class="social_nav_item">
                                <a class="social_nav_link social_nav_link_" href="" target="_blank" rel="noopener" itemprop="sameAs">
                                    <span class="social_nav_icon">
                                        <svg class="icon icon_twitter">
                                            <use href="/images/icons.svg#twitter" />
                                        </svg>
                                    </span>
                                    <span class="social_nav_label">Twitter</span>
                                </a>
                            </li>
                            <li class="social_nav_item">
                                <a class="social_nav_link social_nav_link_" href="" target="_blank" rel="noopener" itemprop="sameAs">
                                    <span class="social_nav_icon">
                                        <svg class="icon icon_instagram">
                                            <use href="/images/icons.svg#instagram" />
                                        </svg>
                                    </span>
                                    <span class="social_nav_label">Instagram</span>
                                </a>
                            </li>
                            <li class="social_nav_item">
                                <a class="social_nav_link social_nav_link_" href="" target="_blank" rel="noopener" itemprop="sameAs">
                                    <span class="social_nav_icon">
                                        <svg class="icon icon_newsletter">
                                            <use href="/images/icons.svg#newsletter" />
                                        </svg>
                                    </span>
                                    <span class="social_nav_label">Newletter</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_primary">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="footer_primary_inner">
                    <div class="footer_primary_inner_item is_left">
                        <div class="footer_logo_wrap">
                            <a href="#" aria-label="Main Logo">

                                <svg class="icon icon_logo">
                                    <use href="/images/icons.svg#logo" />
                                </svg>

                            </a>
                        </div>

                        <div class="meta_info" id="meta_info" itemprop="creator" itemscope itemtype="http://schema.org/">
                            <h2 class="meta_info_name visually_hide" itemprop="name">JHU Sustainability</h2>
                            <meta content="http://jhu-sustainability.dev.fastspot.com/images/logo-schema.png" itemprop="logo">
                            <div class="meta_info_details">
                                <div class="meta_info_details_item">
                                    <h3 class="meta_info_details_label">Address</h3>
                                    <div class="meta_info_detail meta_detail_address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                                        <div class="meta_info_detail_label">
                                            <span class="meta_info_address_street" itemprop="streetAddress">3910 N. Keswick Road</span>
                                            <span class="meta_info_address_group">
                                                <span class="meta_info_address_city" itemprop="addressLocality">Baltimore</span>,
                                                <span class="meta_info_address_state" itemprop="addressRegion">MD</span>
                                                <span class="meta_info_address_zip" itemprop="postalCode">21211</span>
                                            </span>
                                        </div>
                                        <a class="meta_info_detail_link" href="//www.google.com/maps/place/?q=place_id:ChIJbeTf8SUFyIkRCCNaPJaCdeE" target="_blank" rel="noopener">Get Directions</a>
                                    </div>
                                </div>
                                <div class="meta_info_details_item">
                                    <h3 class="meta_info_details_label">Contact</h3>
                                    <div class="meta_info_detail meta_detail_phone">
                                        <span class="meta_info_detail_icon">
                                            <svg class="icon icon_phone">
                                                <use href="/images/icons.svg#phone" />
                                            </svg>
                                        </span>
                                        <a class="meta_info_detail_label meta_info_detail_link" href="tel:4439976319" itemprop="telephone"><span class="meta_info_detail_label_hint">Phone:</span> (443) 997-6319</a>
                                    </div>
                                    <div class="meta_info_detail meta_detail_email">
                                        <span class="meta_info_detail_icon">
                                            <svg class="icon icon_mail">
                                                <use href="/images/icons.svg#mail" />
                                            </svg>
                                        </span>
                                        <a class="meta_info_detail_label meta_info_detail_link" href="mailto:sustainability@jhu.edu" itemprop="email"><span class="meta_info_detail_label_hint">Email:</span> sustainability@jhu.edu</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="footer_primary_inner_item is_right">

                        <nav class="js-nav js-footer-nav nav footer_nav" aria-labelledby="footer_nav_title">
                            <div class="nav_header footer_nav_header">
                                <h2 class="nav_title footer_nav_title" id="footer_nav_title">Footer</h2>
                            </div>
                            <ul class="js-nav-list js-footer-nav-list nav_list footer_nav_list" aria-labelledby="footer_nav_title">
                                <li class="js-nav-item js-footer-nav-item js-footer-nav-item-1 nav_item footer_nav_item ">
                                    <div class="nav_item_inner footer_nav_item_inner">
                                        <a class="js-nav-link js-footer-nav-link nav_link footer_nav_link" href="#">
                                            <div class="nav_link_inner footer_nav_link_inner">
                                                <span class="nav_link_icon footer_nav_link_icon" aria-hidden="true">
                                                    <svg class="icon icon_external">
                                                        <use href="/images/icons.svg#external" />
                                                    </svg>
                                                </span>
                                                <span class="nav_link_label footer_nav_link_label">Johns Hopkins University</span>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="js-nav-item js-footer-nav-item js-footer-nav-item-2 nav_item footer_nav_item ">
                                    <div class="nav_item_inner footer_nav_item_inner">
                                        <a class="js-nav-link js-footer-nav-link nav_link footer_nav_link" href="#">
                                            <div class="nav_link_inner footer_nav_link_inner">
                                                <span class="nav_link_label footer_nav_link_label">Contact</span>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="js-nav-item js-footer-nav-item js-footer-nav-item-3 nav_item footer_nav_item ">
                                    <div class="nav_item_inner footer_nav_item_inner">
                                        <a class="js-nav-link js-footer-nav-link nav_link footer_nav_link" href="#">
                                            <div class="nav_link_inner footer_nav_link_inner">
                                                <span class="nav_link_label footer_nav_link_label">Faculty & Research Directory</span>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="js-nav-item js-footer-nav-item js-footer-nav-item-4 nav_item footer_nav_item ">
                                    <div class="nav_item_inner footer_nav_item_inner">
                                        <a class="js-nav-link js-footer-nav-link nav_link footer_nav_link" href="#">
                                            <div class="nav_link_inner footer_nav_link_inner">
                                                <span class="nav_link_label footer_nav_link_label">Events</span>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_ribbon">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="footer_ribbon_inner">

                    <nav class="js-nav js-legal-nav nav legal_nav" aria-labelledby="legal_nav_title">
                        <div class="nav_header legal_nav_header">
                            <h2 class="nav_title legal_nav_title" id="legal_nav_title">Legal</h2>
                        </div>
                        <ul class="js-nav-list js-legal-nav-list nav_list legal_nav_list" aria-labelledby="legal_nav_title">
                            <li class="js-nav-item js-legal-nav-item js-legal-nav-item-1 nav_item legal_nav_item ">
                                <div class="nav_item_inner legal_nav_item_inner">
                                    <a class="js-nav-link js-legal-nav-link nav_link legal_nav_link" href="#">
                                        <div class="nav_link_inner legal_nav_link_inner">
                                            <span class="nav_link_label legal_nav_link_label">Privacy Statement</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li class="js-nav-item js-legal-nav-item js-legal-nav-item-2 nav_item legal_nav_item ">
                                <div class="nav_item_inner legal_nav_item_inner">
                                    <a class="js-nav-link js-legal-nav-link nav_link legal_nav_link" href="#">
                                        <div class="nav_link_inner legal_nav_link_inner">
                                            <span class="nav_link_label legal_nav_link_label">Accessibility</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </nav>

                    <p class="copyright">
                        <span class="copyright_icon">2024</span>
                        <span class="copyright_holder">
                            <span class="copyright_holder_name">JHU Sustainability</span>
                            All Rights Reserved.
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="js-alert-wrapper">
    </div>
</footer>
<!-- END: Footer -->
 
<!-- Footer -->
<footer class="footer" id="footer">
	<div class="footer_bar">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="footer_bar_inner">
					{% include '@navigation-social' with {
						title: 'Stay Connected',
						links: navigation.social
					} %}
				</div>
			</div>
		</div>
	</div>
	<div class="footer_primary">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="footer_primary_inner">
					<div class="footer_primary_inner_item is_left">
						<div class="footer_logo_wrap">
							<a href="#" aria-label="Main Logo">
								{{ icon('logo') }}
							</a>
						</div>

						{% render '@partial-meta' %}
					</div>

					<div class="footer_primary_inner_item is_right">
						{% include '@navigation-basic' with {
							class: 'footer_nav',
							modifier: '',
							title: 'Footer',
							toggle_icon: '',
							active_index: '',
							links: navigation.footer
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer_ribbon">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="footer_ribbon_inner">
					{% include '@navigation-basic' with {
						class: 'legal_nav',
						modifier: '',
						title: 'Legal',
						toggle_icon: '',
						active_index: '',
						links: navigation.utility
					} %}

					{% render '@partial-copyright' %}
				</div>
			</div>
		</div>
	</div>
	<div class="js-alert-wrapper">
		{% if page.alert == true %}
			{% set alert_path = page.alert_path|default('/components/render/partial-alert') %}
			<!-- WordPress / Drupal, use AlertURL to target the script that returns this content. For BigTree, enter the alert markup here. -->
			<script>
				var AlertURL = "{{ alert_path|path }}";
			</script>
		{% endif %}
	</div>
</footer>
<!-- END: Footer -->

No notes defined.