<!-- Card Group -->
<div class="card_group">
<div class="card_group_header">
<div class="fs-row">
<div class="fs-cell">
<div class="card_group_header_inner">
<h2 class="card_group_title">The Latest</h2>
<div class="card_group_description">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card_group_body">
<div class="fs-row">
<div class="fs-cell">
<div role="list" class="card_group_items card_count_2 js-carousel" data-carousel-options='{"controls":false,"pagination":false,"contained":false,"maxWidth":"979px","touchEvents":true,"show":2}' aria-label="The Latest">
<div role="listitem" class="card_group_item">
<a href="#" class="card_group_item_figure_link">
<figure class="card_group_item_figure crop_wide">
<span class="lazy_image_wrapper card_group_item_image_wrapper">
<img class="js-lazy js-lazyload card_group_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/1" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x416/1" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x416/1 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/1 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/1 300w" alt="">
</span>
<noscript>
<img class="card_group_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/1" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/1 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/1 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/1 740w" sizes="100vw" alt="">
</noscript>
</figure>
</a>
<div class="card_group_item_body">
<h3 class="card_group_item_title">
<a href="#" class="card_group_item_title_link">
<span class="card_group_item_title_label">Update From Pune</span>
<span class="animated_circle card_group_item_title_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_external" fill="none" stroke-width="1.5">
<path transform="translate(6, 7)" d="M8.88889 8.88889H1.11111V1.11111H5V0H1.11111C0.494444 0 0 0.5 0 1.11111V8.88889C0 9.5 0.494444 10 1.11111 10H8.88889C9.5 10 10 9.5 10 8.88889V5H8.88889V8.88889ZM6.11111 0V1.11111H8.10556L2.64444 6.57222L3.42778 7.35556L8.88889 1.89444V3.88889H10V0H6.11111Z" />
</g>
<circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
</svg>
</span> </a>
</h3>
<span class="card_group_item_taxonomy">News</span>
<span class="card_group_item_school">Johns Hopkins Bloomberg School of Public Health</span>
<div class="card_group_item_description">
<p>Learn more about how the JHU India Institute is addressing the COVID-19 pandemic in India alongside our partners.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
{% if items|length % 4 == 0 %}
{% set card_count = 4 %}
{% elseif items|length % 3 == 0 %}
{% set card_count = 3 %}
{% else %}
{% set card_count = 2 %}
{% endif %}
{% set carousel_json = {
controls: false,
pagination: false,
contained: false,
maxWidth: "979px",
touchEvents: true,
show: 2
}|json_encode() %}
<!-- Card Group -->
<div class="card_group">
{% if title or description %}
<div class="card_group_header">
<div class="fs-row">
<div class="fs-cell">
<div class="card_group_header_inner">
{% if title %}
<h2 class="card_group_title">{{ title|title }}</h2>
{% endif %}
{% if description %}
<div class="card_group_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="card_group_body">
<div class="fs-row">
<div class="fs-cell">
<div role="list" class="card_group_items card_count_{{ card_count }} js-carousel" data-carousel-options='{{ carousel_json }}' {% if title %} aria-label="{{ title }}" {% endif %}>
{% for item in items %}
<div role="listitem" class="card_group_item">
{% if item.link %}
<a href="{{ item.link }}" class="card_group_item_figure_link">
{% endif %}
<figure class="card_group_item_figure{% if item.crop %} crop_{{ item.crop }}{% endif %}">
{% if item.crop %}
{% if item.crop == "wide" %}
{% include "@partial-image" with {
class: "card_group_item",
alt: "",
image: item.image,
sources: [
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
{% elseif item.crop == "square" %}
{% include "@partial-image" with {
class: "card_group_item",
alt: "",
image: item.image,
sources: [
img.square.sml,
img.square.xsml,
img.square.xxsml
]
} %}
{% endif %}
{% else %}
{% include "@partial-image" with {
class: "card_group_item",
alt: "",
image: item.image,
sources: [
img.item.crop.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
{% endif %}
</figure>
{% if item.link %}
</a>
{% endif %}
<div class="card_group_item_body">
{% if item.title %}
{% if title %}
<h3 class="card_group_item_title">
{% else %}
<h2 class="card_group_item_title">
{% endif %}
{% if item.link %}
<a href="{{ item.link }}" class="card_group_item_title_link">
{% endif %}
<span class="card_group_item_title_label">{{ item.title }}</span>
{% if item.external %}
{% include "@partial-animated-circle-external_alt" with {
class: 'card_group_item_title_icon'
} %}
{% endif %}
{% if item.link %}
</a>
{% endif %}
{% if title %}
</h3>
{% else %}
</h2>
{% endif %}
{% elseif item.stat %}
{% if title %}
<h3 class="card_group_item_stat">
{% else %}
<h2 class="card_group_item_stat">
{% endif %}
<span class="card_group_item_stat_figure">{{ item.stat.figure }}</span>
<span class="card_group_item_stat_context">{{ item.stat.context }}</span>
{% if title %}
</h3>
{% else %}
</h2>
{% endif %}
{% endif %}
{% if item.tax %}
<span class="card_group_item_taxonomy">{{ item.tax }}</span>
{% endif %}
{% if item.school %}
<span class="card_group_item_school">{{ item.school }}</span>
{% endif %}
<div class="card_group_item_description">
<p>{{ item.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
No notes defined.