<!-- Programs -->
<div class="js-anim js-programs programs">
<figure class="programs_hero_figure">
<img class="programs_hero_image" srcset="https://images.fastspot.com/jhusoe/500x282/5 500w, https://images.fastspot.com/jhusoe/300x169/5 300w" sizes="(min-width: 980px) 0px, 100vw" src="https://images.fastspot.com/jhusoe/300x169/5" alt="" loading="lazy" width="300" height="169">
</figure>
<div class="programs_content">
<div class="fs-row">
<div class="fs-cell">
<div class="programs_content_inner">
<div class="programs_header">
<h2 class="programs_pretitle">Find a Program</h2>
<p class="programs_title">Find a Program that's Right For Your Path</p>
</div>
<div class="programs_body">
<div class="programs_body_group">
<div class="js-menu-item-group programs_menu_group">
<div class="programs_menu_group_inner">
<button class="js-swap js-menu-trigger js-programs-menu-trigger programs_menu_trigger" data-swap-target=".programs_menu_group">
<span class="programs_menu_trigger_icon" aria-hidden="true">
<svg class="icon icon_list">
<use href="/images/icons.svg#list" />
</svg>
</span>
<span class="programs_menu_trigger_label">Explore by career path.</span>
</button>
<div class="js-menu-panel programs_menu_panel">
<ul class="programs_menu_list">
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_1" data-swap-target="#programs_category_1" data-swap-group="programs_categories" data-swap-linked="programs_category_1">
<span class="programs_menu_list_link_label">Counselor</span>
</a>
</li>
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_2" data-swap-target="#programs_category_2" data-swap-group="programs_categories" data-swap-linked="programs_category_2">
<span class="programs_menu_list_link_label">Health Professional</span>
</a>
</li>
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_3" data-swap-target="#programs_category_3" data-swap-group="programs_categories" data-swap-linked="programs_category_3">
<span class="programs_menu_list_link_label">Learning Design Specialist</span>
</a>
</li>
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_4" data-swap-target="#programs_category_4" data-swap-group="programs_categories" data-swap-linked="programs_category_4">
<span class="programs_menu_list_link_label">Pre-K-12 Teacher</span>
</a>
</li>
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_5" data-swap-target="#programs_category_5" data-swap-group="programs_categories" data-swap-linked="programs_category_5">
<span class="programs_menu_list_link_label">Research of Policy Expert</span>
</a>
</li>
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_6" data-swap-target="#programs_category_6" data-swap-group="programs_categories" data-swap-linked="programs_category_6">
<span class="programs_menu_list_link_label">School Leader</span>
</a>
</li>
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_7" data-swap-target="#programs_category_7" data-swap-group="programs_categories" data-swap-linked="programs_category_7">
<span class="programs_menu_list_link_label">Special Educator</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="programs_results">
<div class="js-programs-result-1 js-programs-result programs_result" id="programs_category_1" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching Counselor</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_1" data-swap-group="programs_categories" data-swap-linked="programs_category_1">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="Counselor Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">MS in Special Ed: Mild-to-Moderate Disabilities</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">MS in Special Ed: Severe Disabilities with an Emphasis in Autism Spectrum Disorders</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">MS in Special Ed: Severe Disabilties with an Emphasis in Applied Behavior Analysis</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
<div class="js-programs-result-2 js-programs-result programs_result two_column" id="programs_category_2" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching Health Professional</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_2" data-swap-group="programs_categories" data-swap-linked="programs_category_2">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="Health Professional Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Lorem ipsum dolor sit amet</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Donec quam felis ultricies nec pellentesque eu</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Aenean leo ligula porttitor eu consequat vitae eleifend ac enim</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero sit amet adipiscing sem neque sed ipsum</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
<div class="js-programs-result-3 js-programs-result programs_result" id="programs_category_3" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching Learning Design Specialist</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_3" data-swap-group="programs_categories" data-swap-linked="programs_category_3">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="Learning Design Specialist Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Donec quam felis ultricies nec pellentesque eu</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
<div class="js-programs-result-4 js-programs-result programs_result" id="programs_category_4" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching Pre-K-12 Teacher</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_4" data-swap-group="programs_categories" data-swap-linked="programs_category_4">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="Pre-K-12 Teacher Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Donec quam felis ultricies nec pellentesque eu</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
<div class="js-programs-result-5 js-programs-result programs_result" id="programs_category_5" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching Research of Policy Expert</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_5" data-swap-group="programs_categories" data-swap-linked="programs_category_5">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="Research of Policy Expert Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Donec quam felis ultricies nec pellentesque eu</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
<div class="js-programs-result-6 js-programs-result programs_result" id="programs_category_6" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching School Leader</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_6" data-swap-group="programs_categories" data-swap-linked="programs_category_6">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="School Leader Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Donec quam felis ultricies nec pellentesque eu</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
<div class="js-programs-result-7 js-programs-result programs_result" id="programs_category_7" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching Special Educator</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_7" data-swap-group="programs_categories" data-swap-linked="programs_category_7">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
<ul class="programs_result_list" aria-label="Special Educator Path">
<li class="programs_result_item">
<a href="#" class="programs_result_link">
<span class="programs_result_link_inner">
<span class="programs_result_link_label">Donec quam felis ultricies nec pellentesque eu</span>
<span class="programs_result_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="programs_media">
<ul class="programs_media_list">
<li class="js-program-media-item programs_media_item one">
<figure class="programs_media_figure">
<img class="programs_media_item_image" srcset="https://images.fastspot.com/jhusoe/500x282/5 500w, https://images.fastspot.com/jhusoe/300x169/5 300w" sizes="(min-width: 1394px) 518px, (min-width: 1220px) 452px, (min-width: 980px) 362px, 0px" src="https://images.fastspot.com/jhusoe/300x169/5" alt="" loading="lazy" width="300" height="169">
</figure>
</li>
<li class="js-program-media-item programs_media_item two">
<figure class="programs_media_figure">
<img class="programs_media_item_image" srcset="https://images.fastspot.com/jhusoe/500x500/2 500w, https://images.fastspot.com/jhusoe/300x300/2 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 252px, (min-width: 980px) 202px, (min-width: 740px) 278px, 40vw" src="https://images.fastspot.com/jhusoe/300x300/2" alt="" loading="lazy" width="300" height="300">
</figure>
</li>
<li class="js-program-media-item programs_media_item three">
<figure class="programs_media_figure">
<img class="programs_media_item_image" srcset="https://images.fastspot.com/jhusoe/334x500/6 334w, https://images.fastspot.com/jhusoe/200x300/6 200w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 252px, (min-width: 980px) 202px, (min-width: 740px) 402px, 50vw" src="https://images.fastspot.com/jhusoe/200x300/6" alt="" loading="lazy" width="200" height="300">
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Programs -->
{#
{% include '@component-programs' with {
title: 'Title',
paths: [
{
label: 'label',
items: [
{
label: 'label',
url: '#'
}
],
}
],
gallery: [
{
alt: 'alt',
image: '1'
}
]
} %}
#}
<!-- Programs -->
<div class="js-anim js-programs programs">
<figure class="programs_hero_figure">
{% include '@partial-image' with {
class: 'programs_hero',
alt: gallery[0].alt,
image: gallery[0].image,
loading: 'lazy',
sources: [
img.wide.xsml,
img.wide.xxsml
],
sizes: [
'(min-width: 980px) 0px',
'100vw'
]
} %}
</figure>
<div class="programs_content">
<div class="fs-row">
<div class="fs-cell">
<div class="programs_content_inner">
<div class="programs_header">
<h2 class="programs_pretitle">Find a Program</h2>
<p class="programs_title">{{ title }}</p>
</div>
<div class="programs_body">
<div class="programs_body_group">
<div class="js-menu-item-group programs_menu_group">
<div class="programs_menu_group_inner">
<button class="js-swap js-menu-trigger js-programs-menu-trigger programs_menu_trigger" data-swap-target=".programs_menu_group">
<span class="programs_menu_trigger_icon" aria-hidden="true">{{ icon("list") }}</span>
<span class="programs_menu_trigger_label">Explore by career path.</span>
</button>
<div class="js-menu-panel programs_menu_panel">
<ul class="programs_menu_list">
{% for path in paths %}
<li class="js-swap js-menu-panel-item programs_menu_list_item">
<a class="js-swap js-question-category-link programs_menu_list_link" href="#programs_category_{{ loop.index }}" data-swap-target="#programs_category_{{ loop.index }}" data-swap-group="programs_categories" data-swap-linked="programs_category_{{ loop.index }}">
<span class="programs_menu_list_link_label">{{ path.label }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="programs_results">
{% for path in paths %}
<div class="js-programs-result-{{ loop.index }} js-programs-result programs_result{% if path.items|length > 3 %} two_column{% endif %}" id="programs_category_{{ loop.index }}" tabindex="-1">
<div class="programs_result_header">
<h3 class="programs_result_title">Programs Matching {{ path.label }}</h3>
<button class="js-swap programs_result_close" data-swap-target="#programs_category_{{ loop.index }}" data-swap-group="programs_categories" data-swap-linked="programs_category_{{ loop.index }}">
<span class="programs_result_close_label">Close</span>
<span class="programs_result_close_icon">{{ icon("close") }}</span>
</button>
</div>
<ul class="programs_result_list" aria-label="{{ path.label }} Path">
{% for item in path.items %}
<li class="programs_result_item">
{% include '@partial-link' with {
class: 'programs_result',
title: item.label,
url: item.url,
icon: 'chevron_right'
} %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
<div class="programs_media">
<ul class="programs_media_list">
<li class="js-program-media-item programs_media_item one">
<figure class="programs_media_figure">
{% include '@partial-image' with {
class: 'programs_media_item',
alt: gallery[0].alt,
image: gallery[0].image,
loading: 'lazy',
sources: [
img.wide.xsml,
img.wide.xxsml
],
sizes: [
'(min-width: 1394px) 518px',
'(min-width: 1220px) 452px',
'(min-width: 980px) 362px',
'0px'
]
} %}
</figure>
</li>
<li class="js-program-media-item programs_media_item two">
<figure class="programs_media_figure">
{% include '@partial-image' with {
class: 'programs_media_item',
alt: gallery[1].alt,
image: gallery[1].image,
loading: 'lazy',
sources: [
img.square.xsml,
img.square.xxsml
],
sizes: [
'(min-width: 1394px) 290px',
'(min-width: 1220px) 252px',
'(min-width: 980px) 202px',
'(min-width: 740px) 278px',
'40vw'
]
} %}
</figure>
</li>
<li class="js-program-media-item programs_media_item three">
<figure class="programs_media_figure">
{% include '@partial-image' with {
class: 'programs_media_item',
alt: gallery[2].alt,
image: gallery[2].image,
loading: 'lazy',
sources: [
img.portraitClassic.xsml,
img.portraitClassic.xxsml
],
sizes: [
'(min-width: 1394px) 290px',
'(min-width: 1220px) 252px',
'(min-width: 980px) 202px',
'(min-width: 740px) 402px',
'50vw'
]
} %}
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Programs -->
No notes defined.