<!-- Header -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-K6P58WP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<section class="header_ribbon" aria-label="Sticky Site Header">
<a class="skip_link skip_main" id="skip_main_link" href="#page_title">Skip Main Navigation</a>
<div class="fs-row">
<div class="fs-cell">
<div class="header_ribbon_inner">
<div class="header_main_nav">
<nav class="js-nav-collapse js-main-dropdown-nav dropdown_nav main_dropdown_nav" aria-labelledby="dropdown_nav_title_2">
<div class="dropdown_nav_header main_dropdown_nav_header">
<h2 class="dropdown_nav_title main_dropdown_nav_title" id="dropdown_nav_title_2">Site</h2>
</div>
<ul class="js-nav-collapse-list js-main-dropdown-nav-list dropdown_nav_list main_dropdown_nav_list" aria-labelledby="dropdown_nav_title_2">
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-1 dropdown_nav_item main_dropdown_nav_item has_children">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">About</span>
</div>
</a>
<button class="js-swap js-nav-collapse-toggle js-main-dropdown-nav-toggle dropdown_nav_toggle main_dropdown_nav_toggle" data-swap-target=".js-main-dropdown-nav-item-1" data-swap-group="main_dropdown_nav" aria-label="About" aria-haspopup="true" aria-expanded="false">
<span class="dropdown_nav_toggle_inner main_dropdown_nav_toggle_inner">
<span class="dropdown_nav_icon main_dropdown_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-collapse-children js-main-dropdown-nav-children dropdown_nav_children main_dropdown_nav_children" aria-label="About">
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Program Finder</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Master's Programs</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Doctoral Programs</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Career Paths</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Academic Calendar</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Academic Catalogue</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-2 dropdown_nav_item main_dropdown_nav_item has_children">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Impact</span>
</div>
</a>
<button class="js-swap js-nav-collapse-toggle js-main-dropdown-nav-toggle dropdown_nav_toggle main_dropdown_nav_toggle" data-swap-target=".js-main-dropdown-nav-item-2" data-swap-group="main_dropdown_nav" aria-label="Impact" aria-haspopup="true" aria-expanded="false">
<span class="dropdown_nav_toggle_inner main_dropdown_nav_toggle_inner">
<span class="dropdown_nav_icon main_dropdown_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-collapse-children js-main-dropdown-nav-children dropdown_nav_children main_dropdown_nav_children" aria-label="Impact">
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">SOE Communities</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Online and On Campus</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Student Support</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Career Planning</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-3 dropdown_nav_item main_dropdown_nav_item has_children">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Faculty & Research</span>
</div>
</a>
<button class="js-swap js-nav-collapse-toggle js-main-dropdown-nav-toggle dropdown_nav_toggle main_dropdown_nav_toggle" data-swap-target=".js-main-dropdown-nav-item-3" data-swap-group="main_dropdown_nav" aria-label="Faculty & Research" aria-haspopup="true" aria-expanded="false">
<span class="dropdown_nav_toggle_inner main_dropdown_nav_toggle_inner">
<span class="dropdown_nav_icon main_dropdown_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-collapse-children js-main-dropdown-nav-children dropdown_nav_children main_dropdown_nav_children" aria-label="Faculty & Research">
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Admissions</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Financial Aid</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Tuition & Fees</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Campus Tour</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-4 dropdown_nav_item main_dropdown_nav_item has_children">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Solutions</span>
</div>
</a>
<button class="js-swap js-nav-collapse-toggle js-main-dropdown-nav-toggle dropdown_nav_toggle main_dropdown_nav_toggle" data-swap-target=".js-main-dropdown-nav-item-4" data-swap-group="main_dropdown_nav" aria-label="Solutions" aria-haspopup="true" aria-expanded="false">
<span class="dropdown_nav_toggle_inner main_dropdown_nav_toggle_inner">
<span class="dropdown_nav_icon main_dropdown_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-collapse-children js-main-dropdown-nav-children dropdown_nav_children main_dropdown_nav_children" aria-label="Solutions">
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Faculty</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Themed Expert Pages</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Research Areas</span>
</div>
</a>
</li>
<li class="js-nav-collapse-child-item js-main-dropdown-nav-child-item dropdown_nav_child_item main_dropdown_nav_child_item">
<a class="js-nav-collapse-child-link js-main-dropdown-nav-child-link dropdown_nav_child_link main_dropdown_nav_child_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_nav_child_link_label">Centers & Institutes</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-5 dropdown_nav_item main_dropdown_nav_item">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Contact Us</span>
</div>
</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="header_ribbon_group">
<div class="header_ribbon_home">
<a class="header_ribbon_home_link" href="#">
<span class="header_ribbon_home_link_icon">
<svg class="icon icon_shield">
<use href="/images/icons.svg#shield" />
</svg>
</span>
<span class="header_ribbon_home_link_label">JHU School of Education</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<header class="js-header header header_center" id="header">
<a href="https://150.jhu.edu" parent="_blank" class="jhu-150th-bar" id="jhu-150th-bar" jhu-150th-bar-style="dark" data-js="jhu-150th-bar">
<p id="jhu-150th-name">Johns Hopkins University<span class="jhu-150th-bar-sep"></span>Est. 1876<span class="jhu-150th-bar-sep"></span></p>
<svg id="jhu-150th-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 90">
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
fill: var(--jhu-150th-bar-color);
}
.cls-3 {
fill: var(--jhu-150th-bar-accent);
}
</style>
</defs>
<path class="cls-2" d="M69.75,68.12c-3.33-.14-5.69-.2-8.4-.2-2.85,0-5.35.07-8.4.2-.42-.2-.56-1.32-.14-1.73l1.32-.21c4.24-.7,4.24-1.39,4.24-8.68v-9.79c0-2.08-.14-2.22-3.47-2.22h-19.86c-3.33,0-3.47.14-3.47,2.22v9.79c0,7.29.34,8.26,4.23,8.68l2.02.21c.41.28.28,1.53-.14,1.73-3.75-.14-6.11-.2-8.82-.2-2.99,0-5.35.13-8.06.2-.42-.2-.55-1.32-.14-1.73l1.18-.21c3.89-.7,4.03-1.39,4.03-8.68v-25c0-6.35-.01-8.02-2.85-8.58-.59-.12-1.19-.11-1.77.02-2.9.64-2.89,2.14-2.89,8.7v25.76c0,5.48-.28,10.27-1.6,13.47-2.3,5.56-7.22,10-13.68,10-.83,0-2.98-.07-2.98-1.46,0-1.18,1.04-3.2,2.5-3.2.83,0,1.67.14,2.57.42.97.28,1.94.49,2.92.49,1.46,0,2.29-.83,2.78-1.81,1.6-3.27,1.8-13.68,1.8-17.43v-26.25c0-7.71-.69-8.54-4.79-8.89l-1.73-.14c-.42-.28-.28-1.53.14-1.74,4.03.14,6.39.21,9.3.21,1.54,0,2.95-.02,4.38-.06.78-.02,1.35-.03,2.16-.07.44.01,1.08,0,1.5.02,1.78.06,3.39.11,5.25.11,2.71,0,5.07-.07,8.05-.21.42.21.56,1.46.14,1.74l-1.32.14c-4.03.42-4.16,1.46-4.16,8.75v7.99c0,2.15.14,2.22,3.47,2.22h19.86c3.33,0,3.47-.07,3.47-2.22v-7.99c0-7.29-.14-8.33-4.24-8.75l-1.32-.14c-.42-.28-.28-1.53.14-1.74,3.19.14,5.56.21,8.4.21s5.07-.07,8.2-.21c.42.21.55,1.46.14,1.74l-1.46.14c-4.03.42-4.17,1.46-4.17,8.75v25c0,7.29.14,8.2,4.17,8.68l1.67.21c.42.28.28,1.53-.14,1.73h0Z" />
<path class="cls-3" d="M126.76,26.84c6.87,0,11.55,6.45,11.55,15.07s-4.69,14.9-11.55,14.9-11.55-6.45-11.55-14.9,4.69-15.07,11.55-15.07M126.76,22.99c-10.05,0-17.16,7.87-17.16,18.92s7.95,18.75,17.16,18.75c10.05,0,17.16-7.87,17.16-18.75s-7.12-18.92-17.16-18.92" />
<path class="cls-3" d="M81.05,53.13c0,4.28-.09,5.14-3.6,5.57l-1.46.17c-.43.34-.43,1.54.09,1.8,2.4-.09,5.14-.17,7.54-.17,2.65,0,5.31.09,7.88.17.51-.26.51-1.46.09-1.8l-1.46-.17c-3.51-.43-3.6-1.28-3.6-5.57v-19.61c0-2.05,0-4.45.17-6.25,0-.34-.34-.43-.6-.43-2.31.86-5.74,2.23-10.45,3-.43.34-.43,1.28.09,1.63l2.65.26c2.48.26,2.65,1.71,2.65,4.88v16.53h0Z" />
<path class="cls-3" d="M109.02,55.87c0-6.76-3.94-11.64-9.51-15.5-1.11-.77-2.65-1.8-4.02-2.74-2.4-1.63-2.83-2.57-2.4-4.11.43-1.37.86-2.05,3.34-2.4l10.88-1.54c2.74-.43,4.28-3.6,4.88-5.48.09-.51-.17-1.03-.94-1.11-.94.6-1.54.86-4.71,1.28l-5.99.86c-2.74.43-4.45.68-5.57,1.03-1.11.34-2.65,2.91-3.77,5.57-1.11,2.57-1.88,5.39-1.88,6.85,0,3,3.08,4.71,6.77,7.36,3.68,2.65,6.94,6.51,6.94,11.9,0,9.42-8.91,15.76-13.62,17.21-.68.6-.34,1.97.69,2.4,6.25-1.88,18.92-9.76,18.92-21.58" />
<rect class="cls-1" width="144" height="90" />
</svg>
<p id="jhu-150th-tagline"><span class="jhu-150th-bar-sep"></span>America’s First Research University</p>
</a>
<div class="js-alert-wrapper">
</div>
<div class="header_small">
<a href="#menu" class="menu_toggle js-menu-toggle js-swap" data-swap-target=".menu" data-swap-linked="menu">
<span class="menu_toggle_inner_default menu_toggle_inner">
<span class="menu_toggle_label_default menu_toggle_label">Menu</span>
<span class="menu_toggle_icon_default menu_toggle_icon" aria-hidden="true">
<svg class="icon icon_menu">
<use href="/images/icons.svg#menu" />
</svg>
</span>
</span>
</a>
<div class="header_logo_small">
<div class="logo logo_header_small logo_icon">
<a class="logo_link" href="#">
<span class="logo_link_label">JHU SOE</span>
<span class="logo_link_icon light">
<svg class="icon icon_logo_light">
<use href="/images/icons.svg#logo_light" />
</svg>
</span>
<span class="logo_link_icon dark">
<svg class="icon icon_logo_dark">
<use href="/images/icons.svg#logo_dark" />
</svg>
</span>
</a>
</div>
<div class="header_small_center_name"></div>
</div>
<div class="header_small_spacer"></div>
</div>
<div class="header_group">
<div class="header_large">
<div class="header_primary">
<div class="fs-row">
<div class="fs-cell">
<div class="header_primary_inner">
<div class="header_primary_group">
<div class="header_logo_large">
<div class="logo logo_header_large logo_icon">
<a class="logo_link" href="#">
<span class="logo_link_label">JHU SOE</span>
<span class="logo_link_icon light">
<svg class="icon icon_logo_light">
<use href="/images/icons.svg#logo_light" />
</svg>
</span>
<span class="logo_link_icon dark">
<svg class="icon icon_logo_dark">
<use href="/images/icons.svg#logo_dark" />
</svg>
</span>
</a>
</div>
</div>
<div class="header_center_name"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_header">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_inner">
<div class="page_header_group">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- END: Header -->
<!-- Header -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-K6P58WP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<section class="header_ribbon" aria-label="Sticky Site Header">
<a class="skip_link skip_main" id="skip_main_link" href="#page_title">Skip Main Navigation</a>
<div class="fs-row">
<div class="fs-cell">
<div class="header_ribbon_inner">
<div class="header_main_nav">
{% include '@navigation-dropdown' with {
class: 'main_dropdown',
modifier: '',
title: 'Site',
toggle_icon: 'caret_down',
active_index: page.activePage,
links: navigation.center,
icon: '',
child_icon: ''
} %}
</div>
<div class="header_ribbon_group">
<div class="header_ribbon_home">
<a class="header_ribbon_home_link" href="#">
<span class="header_ribbon_home_link_icon">{{ icon("shield") }}</span>
<span class="header_ribbon_home_link_label">JHU School of Education</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<header class="js-header header header_center{% if page.background %} has_background{% endif %}{% if page.image %} has_media{% endif %}" id="header">
{% include "@partial-jhu-150th-bar" %}
<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>
<div class="header_small">
{% include '@partial-link-toggle' with {
class: 'menu',
js: true,
title: 'Menu',
url: '#menu',
icon: 'menu',
swap_target: '.menu',
swap_link: 'menu'
} %}
<div class="header_logo_small">
<div class="logo logo_header_small logo_icon">
<a class="logo_link" href="#">
<span class="logo_link_label">{{ config.name }}</span>
<span class="logo_link_icon light">{{ icon('logo_light') }}</span>
<span class="logo_link_icon dark">{{ icon('logo_dark') }}</span>
</a>
</div>
<div class="header_small_center_name">{{ page.center_name }}</div>
</div>
<div class="header_small_spacer"></div>
</div>
<div class="header_group">
{% if page.background %}
<figure class="header_group_figure">
{% include '@partial-picture' with {
class: 'header_group',
image: page.background,
alt: '',
loading: 'eager',
default: img.square.sml,
sources: {
'1200px': img.wide.xlrg,
'980px': img.wide.lrg,
'740px': img.wide.med,
'500px': img.square.med
}
} %}
</figure>
{% endif %}
<div class="header_large">
<div class="header_primary">
<div class="fs-row">
<div class="fs-cell">
<div class="header_primary_inner">
<div class="header_primary_group">
<div class="header_logo_large">
<div class="logo logo_header_large logo_icon">
<a class="logo_link" href="#">
<span class="logo_link_label">{{ config.name }}</span>
<span class="logo_link_icon light">{{ icon('logo_light') }}</span>
<span class="logo_link_icon dark">{{ icon('logo_dark') }}</span>
</a>
</div>
</div>
<div class="header_center_name">{{ page.center_name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if page.breadcrumbNav != false or page.title %}
<div class="page_header">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_inner">
<div class="page_header_group">
{% if 'center_general' in page.classes and page.breadcrumbNav != false %}
<div class="page_breadcrumb">
<span class="page_breadcrumb_icon">{{ icon('circles_left') }}</span>
{% render '@navigation-breadcrumb' with {
page: page,
modifier: '',
links: page.breadcrumbNav,
icon_home: 'home',
icon_divider: 'circles_right',
icon_end: ''
} %}
</div>
{% endif %}
{% if page.title or page.position %}
<div class="page_intro">
<h1 class="page_title" id="page_title" tabindex="-1">{% if page.title_short %}<span class="page_title_short">{{ page.title_short }}</span><span class="page_title_punctuation">: </span>{% endif %}<span class="page_title_long">{{ page.title }}</span></h1>
{% if 'center_landing' in page.classes and page.link %}
<div class="page_action">
<a class="page_action_link" href="{{ page.link.url }}">
<span class="page_action_link_label">{{ page.link.label }}</span>
</a>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% if page.cards %}
<div class="page_cards">
<div class="fs-row">
<div class="fs-cell">
<div class="page_cards_inner">
<ul class="page_cards_items" aria-label="{{ page.title }}">
{% for card in page.cards %}
<li class="page_cards_item">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<div class="page_cards_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "{{ group_title }}", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
{% for card in page.cards %}
<div class="carousel_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination page_cards_carousel_pagination"></div>
</div>
{% endif %}
</header>
<!-- END: Header -->
No notes defined.