<!-- Hero -->
<div class="js-anim js-hero hero">
<figure class="js-hero-background-figure hero_background_figure">
<img class="hero_background_image" srcset="https://images.fastspot.com/jhusoe/1440x1080/4 1440w, https://images.fastspot.com/jhusoe/1220x915/4 1220w, https://images.fastspot.com/jhusoe/980x735/4 980w, https://images.fastspot.com/jhusoe/740x555/4 740w, https://images.fastspot.com/jhusoe/500x375/4 500w, https://images.fastspot.com/jhusoe/300x225/4 300w" sizes="(min-width: 980px) 100vw, 0" src="https://images.fastspot.com/jhusoe/300x225/4" alt="" loading="eager" width="300" height="225">
</figure>
<div class="hero_container">
<div class="js-hero-header hero_header">
<figure class="js-hero-header-figure hero_header_figure">
<img class="hero_header_image" srcset="https://images.fastspot.com/jhusoe/960x1440/4 960w, https://images.fastspot.com/jhusoe/814x1220/4 814w, https://images.fastspot.com/jhusoe/654x980/4 654w, https://images.fastspot.com/jhusoe/494x740/4 494w, https://images.fastspot.com/jhusoe/334x500/4 334w, https://images.fastspot.com/jhusoe/200x300/4 200w" sizes="(min-width: 980px) 0, 100vw" src="https://images.fastspot.com/jhusoe/200x300/4" alt="" loading="eager" width="200" height="300">
</figure>
<div class="fs-row">
<div class="fs-cell fs-lg-8 fs-xl-7">
<div class="js-hero-header-inner hero_header_inner">
<h1 class="hero_title" id="page_title" tabindex="-1">Driving evidence-based change in our schools and communities.</h1>
<div class="hero_header_icon">
<svg class="icon icon_arrow_down">
<use href="/images/icons.svg#arrow_down" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="hero_body">
<div class="hero_body_small">
<div class="js-slick js-hero-items hero_items" data-slick='{"regionLabel": "Driving evidence-based change in our schools and communities.", "arrows": false, "mobileFirst": true, "variableWidth": true, "infinite": false, "dots": true, "appendDots": ".hero_items_pagination_small", "responsive": [{"breakpoint": 739, "settings": {"slidesToShow": 2, "slidesToScroll": 2, "variableWidth": false}}]}'>
<div class="hero_set">
<div class="hero_set_inner">
<div class="hero_item size_single type_basic count_1">
<div class="hero_item_connect"></div>
<p class="hero_item_category">
<span class="hero_item_category_label">Research</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/5 740w, https://images.fastspot.com/jhusoe/500x334/5 500w, https://images.fastspot.com/jhusoe/300x200/5 300w" sizes="(min-width: 980px) 0, (min-width: 740px) 45vw, 310px" src="https://images.fastspot.com/jhusoe/300x200/5" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<h2 class="hero_item_title">Investigating the Knowledge Gap</h2>
<div class="hero_item_description">
<p>More affluent students succeed on ELA assessments, not because they are better at “finding the main idea,” but because they are far more likely to know more about the subject matter discussed.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="hero_set">
<div class="hero_set_inner">
<div class="hero_item size_single type_quote count_2">
<p class="hero_item_category">
<span class="hero_item_category_label">Practice</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/3 740w, https://images.fastspot.com/jhusoe/500x334/3 500w, https://images.fastspot.com/jhusoe/300x200/3 300w" sizes="(min-width: 980px) 0, (min-width: 740px) 45vw, 310px" src="https://images.fastspot.com/jhusoe/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<p class="hero_item_label">The Knowledge Map Project</p>
<figure class="hero_item_quote">
<blockquote class="hero_item_quote_content">
<p>“We now have the insight to diagnose the strengths and needs within our curriculum and the support to help prepare Baltimore students for college and career.”</p>
</blockquote>
<figcaption class="hero_item_quote_caption">
- Janice Lane, Baltimore City Public Schools
</figcaption>
</figure>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="hero_set">
<div class="hero_set_inner">
<div class="hero_item size_single type_basic count_1">
<div class="hero_item_connect"></div>
<p class="hero_item_category">
<span class="hero_item_category_label">Inquiry</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/12 740w, https://images.fastspot.com/jhusoe/500x334/12 500w, https://images.fastspot.com/jhusoe/300x200/12 300w" sizes="(min-width: 980px) 0, (min-width: 740px) 45vw, 310px" src="https://images.fastspot.com/jhusoe/300x200/12" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<h2 class="hero_item_title">Do security cameras, drug tests, and random sweeps make schools safer?</h2>
<div class="hero_item_description">
<p></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="hero_set">
<div class="hero_set_inner">
<div class="hero_item size_single type_quote count_2">
<p class="hero_item_category">
<span class="hero_item_category_label">Evidence</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/11 740w, https://images.fastspot.com/jhusoe/500x334/11 500w, https://images.fastspot.com/jhusoe/300x200/11 300w" sizes="(min-width: 980px) 0, (min-width: 740px) 45vw, 310px" src="https://images.fastspot.com/jhusoe/300x200/11" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<p class="hero_item_label">Students feel like suspects</p>
<figure class="hero_item_quote">
<blockquote class="hero_item_quote_content">
<p>“When schools feel like prisons, the impact isn't localized to the students perceived as problematic—it has collateral consequences for kids irrespective of their behavior.”</p>
</blockquote>
<figcaption class="hero_item_quote_caption">
- Odis Johnson,<br> Executive director of the Center for Safe and Healthy Schools
</figcaption>
</figure>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="hero_set">
<div class="hero_set_inner">
<div class="hero_item size_double type_basic">
<p class="hero_item_category">
<span class="hero_item_category_label">Spotlight</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/8 740w, https://images.fastspot.com/jhusoe/500x334/8 500w, https://images.fastspot.com/jhusoe/300x200/8 300w" sizes="(min-width: 980px) 0, (min-width: 740px) 45vw, 310px" src="https://images.fastspot.com/jhusoe/300x200/8" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<h2 class="hero_item_title">Building a diverse corps of secondary teachers for Baltimore</h2>
<div class="hero_item_description">
<p>TeachingWell, a new Master of Education (M.Ed.) program developed by Johns Hopkins, offers a groundbreaking model for teacher preparation.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hero_items_pagination hero_items_pagination_small carousel_pagination"></div>
</div>
<div class="hero_body_large">
<div class="js-slick js-hero-items hero_items" data-slick='{"regionLabel": "Driving evidence-based change in our schools and communities.", "arrows": true, "mobileFirst": true, "variableWidth": true, "infinite": false, "dots": true, "appendDots": ".hero_items_pagination_large"}'>
<div class="hero_set count_2">
<div class="hero_set_inner">
<div class="hero_item size_single type_basic">
<div class="hero_item_connect"></div>
<p class="hero_item_category">
<span class="hero_item_category_label">Research</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/5 740w, https://images.fastspot.com/jhusoe/500x334/5 500w, https://images.fastspot.com/jhusoe/300x200/5 300w" sizes="(min-width: 1394px) 410px, (min-width: 1220px) 358px, (min-width: 980px) 300px, 0" src="https://images.fastspot.com/jhusoe/300x200/5" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<h2 class="hero_item_title">Investigating the Knowledge Gap</h2>
<div class="hero_item_description">
<p>More affluent students succeed on ELA assessments, not because they are better at “finding the main idea,” but because they are far more likely to know more about the subject matter discussed.</p>
</div>
</div>
</a>
</div>
</div>
<div class="hero_item size_single type_quote">
<p class="hero_item_category">
<span class="hero_item_category_label">Practice</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/3 740w, https://images.fastspot.com/jhusoe/500x334/3 500w, https://images.fastspot.com/jhusoe/300x200/3 300w" sizes="(min-width: 1394px) 410px, (min-width: 1220px) 358px, (min-width: 980px) 300px, 0" src="https://images.fastspot.com/jhusoe/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<p class="hero_item_label">The Knowledge Map Project</p>
<figure class="hero_item_quote">
<blockquote class="hero_item_quote_content">
<p>“We now have the insight to diagnose the strengths and needs within our curriculum and the support to help prepare Baltimore students for college and career.”</p>
</blockquote>
<figcaption class="hero_item_quote_caption">
- Janice Lane, Baltimore City Public Schools
</figcaption>
</figure>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="hero_set count_2">
<div class="hero_set_inner">
<div class="hero_item size_single type_basic">
<div class="hero_item_connect"></div>
<p class="hero_item_category">
<span class="hero_item_category_label">Inquiry</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/12 740w, https://images.fastspot.com/jhusoe/500x334/12 500w, https://images.fastspot.com/jhusoe/300x200/12 300w" sizes="(min-width: 1394px) 410px, (min-width: 1220px) 358px, (min-width: 980px) 300px, 0" src="https://images.fastspot.com/jhusoe/300x200/12" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<h2 class="hero_item_title">Do security cameras, drug tests, and random sweeps make schools safer?</h2>
<div class="hero_item_description">
<p></p>
</div>
</div>
</a>
</div>
</div>
<div class="hero_item size_single type_quote">
<p class="hero_item_category">
<span class="hero_item_category_label">Evidence</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/11 740w, https://images.fastspot.com/jhusoe/500x334/11 500w, https://images.fastspot.com/jhusoe/300x200/11 300w" sizes="(min-width: 1394px) 410px, (min-width: 1220px) 358px, (min-width: 980px) 300px, 0" src="https://images.fastspot.com/jhusoe/300x200/11" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<p class="hero_item_label">Students feel like suspects</p>
<figure class="hero_item_quote">
<blockquote class="hero_item_quote_content">
<p>“When schools feel like prisons, the impact isn't localized to the students perceived as problematic—it has collateral consequences for kids irrespective of their behavior.”</p>
</blockquote>
<figcaption class="hero_item_quote_caption">
- Odis Johnson,<br> Executive director of the Center for Safe and Healthy Schools
</figcaption>
</figure>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="hero_set count_1">
<div class="hero_set_inner">
<div class="hero_item size_double type_basic">
<p class="hero_item_category">
<span class="hero_item_category_label">Spotlight</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="">
<figure class="hero_item_figure" aria-hidden="true">
<img class="hero_item_image" srcset="https://images.fastspot.com/jhusoe/740x494/8 740w, https://images.fastspot.com/jhusoe/500x334/8 500w, https://images.fastspot.com/jhusoe/300x200/8 300w" sizes="(min-width: 1394px) 410px, (min-width: 1220px) 358px, (min-width: 980px) 300px, 0" src="https://images.fastspot.com/jhusoe/300x200/8" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="hero_item_body">
<h2 class="hero_item_title">Building a diverse corps of secondary teachers for Baltimore</h2>
<div class="hero_item_description">
<p>TeachingWell, a new Master of Education (M.Ed.) program developed by Johns Hopkins, offers a groundbreaking model for teacher preparation.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hero_items_pagination hero_items_pagination_large carousel_pagination"></div>
</div>
</div>
</div>
</div>
<!-- END: Hero -->
{#
{% include '@component-hero' with {
title: 'Title',
image: '2',
sets: [
{
items: [
{
type: 'basic',
category: 'Category',
title: 'Title',
image: '1',
description: 'Description'
},
{
type: 'quote',
category: 'Category',
label: 'label',
quote: 'quote',
cite: 'cite',
image: '2'
}
]
}
]
} %}
#}
<!-- Hero -->
<div class="js-anim js-hero hero">
<figure class="js-hero-background-figure hero_background_figure">
{% include '@partial-image' with {
class: 'hero_background',
alt: alt,
image: image,
loading: 'eager',
sources: [
img.full.xlrg,
img.full.lrg,
img.full.med,
img.full.sml,
img.full.xsml,
img.full.xxsml
],
sizes: [
'(min-width: 980px) 100vw',
'0'
]
} %}
</figure>
<div class="hero_container">
<div class="js-hero-header hero_header">
<figure class="js-hero-header-figure hero_header_figure">
{% include '@partial-image' with {
class: 'hero_header',
alt: alt,
image: image,
loading: 'eager',
sources: [
img.portraitClassic.xlrg,
img.portraitClassic.lrg,
img.portraitClassic.med,
img.portraitClassic.sml,
img.portraitClassic.xsml,
img.portraitClassic.xxsml
],
sizes: [
'(min-width: 980px) 0',
'100vw'
]
} %}
</figure>
<div class="fs-row">
<div class="fs-cell fs-lg-8 fs-xl-7">
<div class="js-hero-header-inner hero_header_inner">
<h1 class="hero_title" id="page_title" tabindex="-1">{{ title }}</h1>
<div class="hero_header_icon">{{ icon("arrow_down") }}</div>
</div>
</div>
</div>
</div>
<div class="hero_body">
<div class="hero_body_small">
<div class="js-slick js-hero-items hero_items" data-slick='{"regionLabel": "{{ title }}", "arrows": false, "mobileFirst": true, "variableWidth": true, "infinite": false, "dots": true, "appendDots": ".hero_items_pagination_small", "responsive": [{"breakpoint": 739, "settings": {"slidesToShow": 2, "slidesToScroll": 2, "variableWidth": false}}]}'>
{% for set in sets %}
{% for item in set.items %}
<div class="hero_set">
<div class="hero_set_inner">
<div class="hero_item size_{% if set.items.length == 2 %}single{% else %}double{% endif %} type_{{ item.type }}{% if set.items.length == 2 and loop.index == 1 %} count_1{% endif %}{% if set.items.length == 2 and loop.index == 2 %} count_2{% endif %}">
{% if set.items.length == 2 and loop.index == 1 %}
<div class="hero_item_connect"></div>
{% endif %}
<p class="hero_item_category">
<span class="hero_item_category_label">{{ item.category }}</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="{{ item.url }}">
<figure class="hero_item_figure" aria-hidden="true">
{% include '@partial-image' with {
class: 'hero_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
'(min-width: 980px) 0',
'(min-width: 740px) 45vw',
'310px'
]
} %}
</figure>
<div class="hero_item_body">
{% if item.type == 'basic' %}
<h2 class="hero_item_title">{{ item.title }}</h2>
<div class="hero_item_description">
<p>{{ item.description }}</p>
</div>
{% elseif item.type == 'quote' %}
<p class="hero_item_label">{{ item.label }}</p>
<figure class="hero_item_quote">
<blockquote class="hero_item_quote_content">
<p>“{{ item.quote }}”</p>
</blockquote>
{% if item.cite %}
<figcaption class="hero_item_quote_caption">
- {{ item.cite }}
</figcaption>
{% endif %}
</figure>
{% endif %}
</div>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
<div class="hero_items_pagination hero_items_pagination_small carousel_pagination"></div>
</div>
<div class="hero_body_large">
<div class="js-slick js-hero-items hero_items" data-slick='{"regionLabel": "{{ title }}", "arrows": true, "mobileFirst": true, "variableWidth": true, "infinite": false, "dots": true, "appendDots": ".hero_items_pagination_large"}'>
{% for set in sets %}
<div class="hero_set count_{{ set.items.length }}">
<div class="hero_set_inner">
{% for item in set.items %}
<div class="hero_item size_{% if set.items.length == 2 %}single{% else %}double{% endif %} type_{{ item.type }}">
{% if set.items.length == 2 and loop.index == 1 %}
<div class="hero_item_connect"></div>
{% endif %}
<p class="hero_item_category">
<span class="hero_item_category_label">{{ item.category }}</span>
</p>
<div class="hero_item_main">
<a class="hero_item_link" href="{{ item.url }}">
<figure class="hero_item_figure" aria-hidden="true">
{% include '@partial-image' with {
class: 'hero_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
'(min-width: 1394px) 410px',
'(min-width: 1220px) 358px',
'(min-width: 980px) 300px',
'0'
]
} %}
</figure>
<div class="hero_item_body">
{% if item.type == 'basic' %}
<h2 class="hero_item_title">{{ item.title }}</h2>
<div class="hero_item_description">
<p>{{ item.description }}</p>
</div>
{% elseif item.type == 'quote' %}
<p class="hero_item_label">{{ item.label }}</p>
<figure class="hero_item_quote">
<blockquote class="hero_item_quote_content">
<p>“{{ item.quote }}”</p>
</blockquote>
{% if item.cite %}
<figcaption class="hero_item_quote_caption">
- {{ item.cite }}
</figcaption>
{% endif %}
</figure>
{% endif %}
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<div class="hero_items_pagination hero_items_pagination_large carousel_pagination"></div>
</div>
</div>
</div>
</div>
<!-- END: Hero -->
No notes defined.