JHU India Component Library

Listing 

<!-- Link Group -->
<div class="basic_listing">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
            <div class="basic_listing_inner">
                <div class="basic_listing_item has_image">
                    <figure class="basic_listing_item_figure">
                        <span class="lazy_image_wrapper basic_listing_item_image_wrapper">
                            <img class="js-lazy js-lazyload basic_listing_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x200/5" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x494/5" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x494/5 740w, //images.fastspot.com/johns-hopkins-india-institute/500x334/5 500w, //images.fastspot.com/johns-hopkins-india-institute/300x200/5 300w" alt="">
                        </span>
                        <noscript>
                            <img class="basic_listing_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x200/5" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x200/5 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x334/5 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x494/5 740w" sizes="100vw" alt="">
                        </noscript>
                    </figure>
                    <div class="basic_listing_item_group">
                        <h2 class="basic_listing_item_title">
                            <a href="#" class="basic_listing_item_title_link">
                                <span class="basic_listing_item_title_link_label">Researchers Identify Biomarker that Herald Poor Treatment Outcomes in TB Patients</span>

                                <span class="animated_circle basic_listing_item_title_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> </a>
                        </h2>
                        <span class="basic_listing_item_subtitle">Johns Hopkins India Institute, November 8, 2021</span>
                        <span class="basic_listing_item_description">Dr. Akshay Gupte, Instructor of Medicine in Infectious Diseases, and colleagues discovered that elevated concentrations of IL-6 in tuberculosis patients can predict poor treatment outcomes, showcasing a need for including IL-6 testing in clinical screenings...</span>
                    </div>
                </div>
                <div class="basic_listing_item">
                    <div class="basic_listing_item_group">
                        <h2 class="basic_listing_item_title">
                            <a href="#" class="basic_listing_item_title_link">
                                <span class="basic_listing_item_title_link_label">Gauri Dhumal and Neetal Nevrekar Receive PEER Grant Award</span>

                                <span class="animated_circle basic_listing_item_title_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> </a>
                        </h2>
                        <span class="basic_listing_item_subtitle">Johns Hopkins India Insitute, November 1, 2021</span>
                        <span class="basic_listing_item_description">Drs. Dhumal and Nevrekar received the award from USAID’s Women In Science Mentoring Program for separate pilot projects to address TB patient treatment adherence. Dr. Nishi Suryavanshi is their mentor.</span>
                    </div>
                </div>
                <div class="basic_listing_item has_image">
                    <figure class="basic_listing_item_figure">
                        <span class="lazy_image_wrapper basic_listing_item_image_wrapper">
                            <img class="js-lazy js-lazyload basic_listing_item_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="basic_listing_item_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="basic_listing_item_group">
                        <h2 class="basic_listing_item_title">
                            <a href="#" class="basic_listing_item_title_link">
                                <span class="basic_listing_item_title_link_label">A 100% COVID Vaccination Rate Is Possible — We Did It</span>

                                <span class="animated_circle basic_listing_item_title_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> </a>
                        </h2>
                        <span class="basic_listing_item_subtitle">Medpage Today, October 22, 2021</span>
                        <span class="basic_listing_item_description">With colleagues in India, Drs. Christopher G. Myers, Tinglong Dai, Amit Jain, who are faculty of the Johns Hopkins University School Medicine and Carey School of Business discuss...</span>
                    </div>
                </div>
                <div class="basic_listing_item has_image">
                    <figure class="basic_listing_item_figure">
                        <span class="lazy_image_wrapper basic_listing_item_image_wrapper">
                            <img class="js-lazy js-lazyload basic_listing_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x200/8" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x494/8" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x494/8 740w, //images.fastspot.com/johns-hopkins-india-institute/500x334/8 500w, //images.fastspot.com/johns-hopkins-india-institute/300x200/8 300w" alt="">
                        </span>
                        <noscript>
                            <img class="basic_listing_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x200/8" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x200/8 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x334/8 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x494/8 740w" sizes="100vw" alt="">
                        </noscript>
                    </figure>
                    <div class="basic_listing_item_group">
                        <h2 class="basic_listing_item_title">
                            <a href="#" class="basic_listing_item_title_link">
                                <span class="basic_listing_item_title_link_label">An Update on COVID-19 and India</span>

                                <span class="animated_circle basic_listing_item_title_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> </a>
                        </h2>
                        <span class="basic_listing_item_subtitle">Public Health on Call Podcast, September 30, 2021</span>
                        <span class="basic_listing_item_description">Drs. Vidya Mave and Brian Wahl discuss the current COVID situation in India with host Dr. Josh Sharfstein.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Link Group -->
 
<!-- Link Group -->
<div class="basic_listing">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
			<div class="basic_listing_inner">
				{% for item in items %}
				<div class="basic_listing_item{% if item.image %} has_image{% endif %}">
					{% if item.image %}
					<figure class="basic_listing_item_figure">
						{% include "@partial-image" with {
							class: "basic_listing_item",
							alt: "",
							image: item.image,
							sources: [
								img.classic.sml,
								img.classic.xsml,
								img.classic.xxsml
							]
						} %}
					</figure>
					{% endif %}
					<div class="basic_listing_item_group">
						<h2 class="basic_listing_item_title">
							<a href="{{ item.link }}" class="basic_listing_item_title_link">
								<span class="basic_listing_item_title_link_label">{{ item.title }}</span>
								{% include "@partial-animated-circle-arrow_right" with {
									class: 'basic_listing_item_title_link_icon'
								} %}
							</a>
						</h2>
						{% if item.subtitle or item.date %}
						<span class="basic_listing_item_subtitle">{% if item.subtitle %}{{ item.subtitle }}{% endif %}{% if item.date %}, {{ item.date }}{% endif %}</span>
						{% endif %}
						{% if item.excerpt %}
						<span class="basic_listing_item_description">{{ item.excerpt }}</span>
						{% endif %}
					</div>
				</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.