<!-- Explore -->
<div class="js-anim explore">
<div class="explore_small">
<div class="explore_inner">
<div class="explore_header">
<h2 class="explore_title">
<span class="explore_title_label">Explore Our Communities</span>
</h2>
</div>
<div class="explore_body">
<div class="js-slick explore_items" data-slick='{"regionLabel": "Explore Our Communities", "arrows": false, "dots": true, "appendDots": ".explore_body_pagination"}'>
<div class="explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">Campus Excitement</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_media">
<div class="explore_item_media_background"></div>
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/14">
<source src="/videos/test.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="explore_item_body_group">
<div class="explore_item_description">
<p>You'll join education colleagues in a close-knit, supportive graduate school environment adjacent to the sprawling 140-acre Homewood campus, where more than 29,000 full- and part-time students study at America's first research university. Close by: Johns Hopkins' East Baltimore campus, which houses our medical, nursing, and public health schools.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">Homewood Campus</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">Local Connections</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_media">
<div class="explore_item_media_background"></div>
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/13">
<source src="/videos/test-alt.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="explore_item_body_group">
<div class="explore_item_description">
<p>Baltimore is more than just our hometown—it's an extension of our campus, offering unique learning opportunities. Partnerships with school districts, nonprofits, corporations, community agencies, and other Johns Hopkins divisions are an important part of our working and learning opportunities.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">Life In Baltimore</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">National Representation</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_media">
<div class="explore_item_media_background"></div>
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/12">
<source src="/videos/test.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="explore_item_body_group">
<div class="explore_item_description">
<p>Situated in Washington, D.C., blocks from the U.S. Capitol, Johns Hopkins' premier research, education, and public engagement facility at 555 Pennsylvania Ave. provides an anchor for advancing knowledge and the principles of freedom of expression worldwide. You'll join this exciting extension of our Baltimore community.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">555 Pennsylvania Avenue</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">Global Network</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_media">
<div class="explore_item_media_background"></div>
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/11">
<source src="/videos/test-alt.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="explore_item_body_group">
<div class="explore_item_description">
<p>Johns Hopkins has a presence in nearly every corner of the globe. Nearly 6,000 international undergraduate and graduate students study at Johns Hopkins, hailing from 111 countries. Students and faculty conduct research on six continents; and more than 20 percent of the university's students come from countries outside the United States.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">Hopkins Around the World</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="explore_body_pagination carousel_pagination"></div>
</div>
</div>
</div>
<div class="explore_large">
<div class="fs-row">
<div class="fs-cell">
<div class="explore_inner">
<div class="js-explore-media explore_media">
<div class="explore_media_inner">
<img class="explore_connection" src="/images/explore_curve.svg" alt="">
<div class="explore_media_group">
<div class="explore_media_background"></div>
<div class="js-explore-media-item explore_media_item">
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/14">
<source src="/videos/test.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="js-explore-media-item explore_media_item">
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/13">
<source src="/videos/test-alt.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="js-explore-media-item explore_media_item">
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/12">
<source src="/videos/test.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="js-explore-media-item explore_media_item">
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/11">
<source src="/videos/test-alt.mp4" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="explore_content">
<div class="explore_header">
<h2 class="explore_title">
<span class="explore_title_label">Explore Our Communities</span>
</h2>
</div>
<div class="explore_body">
<div class="js-explore-item explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">Campus Excitement</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_description">
<p>You'll join education colleagues in a close-knit, supportive graduate school environment adjacent to the sprawling 140-acre Homewood campus, where more than 29,000 full- and part-time students study at America's first research university. Close by: Johns Hopkins' East Baltimore campus, which houses our medical, nursing, and public health schools.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">Homewood Campus</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="js-explore-item explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">Local Connections</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_description">
<p>Baltimore is more than just our hometown—it's an extension of our campus, offering unique learning opportunities. Partnerships with school districts, nonprofits, corporations, community agencies, and other Johns Hopkins divisions are an important part of our working and learning opportunities.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">Life In Baltimore</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="js-explore-item explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">National Representation</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_description">
<p>Situated in Washington, D.C., blocks from the U.S. Capitol, Johns Hopkins' premier research, education, and public engagement facility at 555 Pennsylvania Ave. provides an anchor for advancing knowledge and the principles of freedom of expression worldwide. You'll join this exciting extension of our Baltimore community.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">555 Pennsylvania Avenue</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="js-explore-item explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">Global Network</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_description">
<p>Johns Hopkins has a presence in nearly every corner of the globe. Nearly 6,000 international undergraduate and graduate students study at Johns Hopkins, hailing from 111 countries. Students and faculty conduct research on six continents; and more than 20 percent of the university's students come from countries outside the United States.</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
<a href="#" class="explore_item_link">
<span class="explore_item_link_inner">
<span class="explore_item_link_label">Hopkins Around the World</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Explore -->
{#
{% include '@component-explore' with {
title: 'Title',
items: [
{
title: 'Item Title',
image: '1',
video: '',
description: 'Item Description',
links: {
title: 'Link Title',
url: '#'
}
}
]
} %}
#}
<!-- Explore -->
<div class="js-anim explore">
<div class="explore_small">
<div class="explore_inner">
<div class="explore_header">
<h2 class="explore_title">
<span class="explore_title_label">{{ title }}</span>
</h2>
</div>
<div class="explore_body">
<div class="js-slick explore_items" data-slick='{"regionLabel": "{{ title }}", "arrows": false, "dots": true, "appendDots": ".explore_body_pagination"}'>
{% for item in items %}
<div class="explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">{{ item.title }}</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_media">
<div class="explore_item_media_background"></div>
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/{{ item.image }}">
<source src="{{ item.video }}" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">{{ icon("play") }}</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">{{ icon("pause") }}</span>
</button>
</div>
</div>
</div>
<div class="explore_item_body_group">
<div class="explore_item_description">
<p>{{ item.description }}</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
{% include '@partial-link' with {
class: 'explore_item',
title: item.link.title,
url: item.link.url
} %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="explore_body_pagination carousel_pagination"></div>
</div>
</div>
</div>
<div class="explore_large">
<div class="fs-row">
<div class="fs-cell">
<div class="explore_inner">
<div class="js-explore-media explore_media">
<div class="explore_media_inner">
<img class="explore_connection" src="/images/explore_curve.svg" alt="">
<div class="explore_media_group">
<div class="explore_media_background"></div>
{% for item in items %}
<div class="js-explore-media-item explore_media_item">
<div class="js-explore-video explore_video">
<video class="js-explore-video-player explore_video_player" autoplay muted loop playsinline poster="https://images.fastspot.com/jhusoe/980x980/{{ item.image }}">
<source src="{{ item.video }}" type="video/mp4">
</video>
<div class="explore_video_controls">
<button class="js-explore-video-play explore_video_control play">
<span class="explore_video_control_label">Play</span>
<span class="explore_video_control_icon">{{ icon("play") }}</span>
</button>
<button class="js-explore-video-pause explore_video_control pause">
<span class="explore_video_control_label">Pause</span>
<span class="explore_video_control_icon">{{ icon("pause") }}</span>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="explore_content">
<div class="explore_header">
<h2 class="explore_title">
<span class="explore_title_label">{{ title }}</span>
</h2>
</div>
<div class="explore_body">
{% for item in items %}
<div class="js-explore-item explore_item">
<div class="explore_item_inner">
<div class="explore_item_header">
<h3 class="explore_item_title">{{ item.title }}</h3>
</div>
<div class="explore_item_body">
<div class="explore_item_description">
<p>{{ item.description }}</p>
</div>
<div class="explore_item_links">
<div class="explore_item_link_item">
{% include '@partial-link' with {
class: 'explore_item',
title: item.link.title,
url: item.link.url
} %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Explore -->
No notes defined.