<!-- Topic Row -->
<div class="topics">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
<div class="topics_inner">
<div class="topics_header">
<h2 class="topics_title">
<span class="topics_title_label">Ipsum Fermentum Tristique</span>
</h2>
<div class="topics_description">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
</div>
</div>
<div class="topics_body">
<div class="topic topic_has_image">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<span class="lazy_image_wrapper topic_image_wrapper">
<img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x200/1" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x494/1" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x494/1 740w, //images.fastspot.com/johns-hopkins-india-institute/500x334/1 500w, //images.fastspot.com/johns-hopkins-india-institute/300x200/1 300w" alt="">
</span>
<noscript>
<img class="topic_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x200/1" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x200/1 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x334/1 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x494/1 740w" sizes="100vw" alt="">
</noscript>
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Leadership & Team</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="topic_links">
<a class="topic_link" href="">
<span class="topic_link_inner">
<span class="topic_link_label">Leadership & Team</span>
<span class="animated_circle topic_link_icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
<g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
<path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
</g>
<circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
</svg>
</span> </span>
</a>
</div>
</div>
</div>
</div>
<div class="topic topic_has_image">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<span class="lazy_image_wrapper topic_image_wrapper">
<img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x200/2" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x494/2" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x494/2 740w, //images.fastspot.com/johns-hopkins-india-institute/500x334/2 500w, //images.fastspot.com/johns-hopkins-india-institute/300x200/2 300w" alt="">
</span>
<noscript>
<img class="topic_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x200/2" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x200/2 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x334/2 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x494/2 740w" sizes="100vw" alt="">
</noscript>
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Faculty & Staff</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="topic_links">
<a class="topic_link" href="">
<span class="topic_link_inner">
<span class="topic_link_label">Faculty & Staff</span>
<span class="animated_circle topic_link_icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
<g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
<path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
</g>
<circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
</svg>
</span> </span>
</a>
<a class="topic_link" href="">
<span class="topic_link_inner">
<span class="topic_link_label">Faculty & Staff</span>
<span class="animated_circle topic_link_icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
<g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
<path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
</g>
<circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
</svg>
</span> </span>
</a>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Ipsum Fermentum Tristique</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
<!-- Topic Row -->
<div class="topics">
<div class="fs-row">
<div class="fs-cell {{ cell }}">
<div class="topics_inner">
{% if title or description %}
<div class="topics_header">
{% if title %}
<h2 class="topics_title">
<span class="topics_title_label">{{ title|title }}</span>
</h2>
{% endif %}
{% if description %}
<div class="topics_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
{% endif %}
<div class="topics_body">
{% for item in items %}
<div class="topic{% if item.image %} topic_has_image{% endif %}">
<div class="topic_inner">
{% if item.image %}
<figure class="topic_figure" aria-hidden="true">
{% include "@partial-image" with {
class: "topic",
alt: "",
image: item.image,
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
{% endif %}
<div class="topic_wrapper">
<div class="topic_header">
{% if title %}
<h3 class="topic_title">{{ item.title|title }}</h3>
{% else %}
<h2 class="topic_title">{{ item.title|title }}</h2>
{% endif %}
</div>
<div class="topic_body">
<div class="topic_description">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.links %}
<div class="topic_links">
{% for link in item.links %}
<a class="topic_link" href="{{ item.url }}" {% if item.icon %} target="_blank"{% endif %}>
<span class="topic_link_inner">
<span class="topic_link_label">{{ item.title }}</span>
{% include "@partial-animated-circle-arrow_right" with {
class: 'topic_link_icon'
} %}
</span>
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
No notes defined.