JHU India Component Library

Item List 

<div class="item_list">
    <div class="item_list_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-lg-justify-center">
                <h2 class="item_list_title">Explore Faculty</h2>
                <span class="item_list_description">We offer four ways to support India’s pandemic response.</span>
            </div>
        </div>
    </div>
    <div class="item_list_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="item_list_body_inner">
                    <div class="item_list_item">
                        <figure class="item_list_item_figure" aria-hidden="true">
                            <span class="lazy_image_wrapper item_list_item_image_wrapper">
                                <img class="js-lazy js-lazyload item_list_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x300/2" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x740/2" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x740/2 740w, //images.fastspot.com/johns-hopkins-india-institute/500x500/2 500w, //images.fastspot.com/johns-hopkins-india-institute/300x300/2 300w" alt="">
                            </span>
                            <noscript>
                                <img class="item_list_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x300/2" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x300/2 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x500/2 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x740/2 740w" sizes="100vw" alt="">
                            </noscript>
                        </figure>
                        <div class="item_list_item_wrapper">
                            <div class="item_list_item_header">
                                <h3 class="item_list_item_title">David Peters, MD, DrPh</h3>
                                <span class="item_list_item_subtitle">Faculty Co-Chair</span>
                                <span class="item_list_item_school">Johns Hopkins Bloomberg School of Public Health</span>
                            </div>
                            <div class="item_list_item_body">
                                <div class="item_list_item_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. 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 class="item_list_item_group">
                                    <span class="item_list_item_topics_heading">Topics</span>
                                    <ul class="item_list_item_topics_list">
                                        <li class="item_list_item_topics_list_item">Health Systems</li>
                                        <li class="item_list_item_topics_list_item">International Policy</li>
                                    </ul>
                                </div>
                                <div class="item_list_item_links">
                                    <a href="#" class="item_list_item_link">
                                        <span class="item_list_item_link_label">View Full Bio</span>

                                        <span class="animated_circle item_list_item_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>
                                    <a href="#" class="item_list_item_link">
                                        <span class="item_list_item_link_label">Visit Website</span>

                                        <span class="animated_circle item_list_item_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>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item_list_item">
                        <figure class="item_list_item_figure" aria-hidden="true">
                            <span class="lazy_image_wrapper item_list_item_image_wrapper">
                                <img class="js-lazy js-lazyload item_list_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x300/3" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x740/3" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x740/3 740w, //images.fastspot.com/johns-hopkins-india-institute/500x500/3 500w, //images.fastspot.com/johns-hopkins-india-institute/300x300/3 300w" alt="">
                            </span>
                            <noscript>
                                <img class="item_list_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x300/3" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x300/3 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x500/3 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x740/3 740w" sizes="100vw" alt="">
                            </noscript>
                        </figure>
                        <div class="item_list_item_wrapper">
                            <div class="item_list_item_header">
                                <h3 class="item_list_item_title">Amita Gupta, MD, MHS</h3>
                                <span class="item_list_item_subtitle">Faculty Co-Chair</span>
                                <span class="item_list_item_school">Johns Hopkins Bloomberg School of Public Health</span>
                            </div>
                            <div class="item_list_item_body">
                                <div class="item_list_item_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. 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 class="item_list_item_group">
                                    <span class="item_list_item_topics_heading">Topics</span>
                                    <ul class="item_list_item_topics_list">
                                        <li class="item_list_item_topics_list_item">Health Systems</li>
                                        <li class="item_list_item_topics_list_item">International Policy</li>
                                    </ul>
                                </div>
                                <div class="item_list_item_links">
                                    <a href="#" class="item_list_item_link">
                                        <span class="item_list_item_link_label">View Full Bio</span>

                                        <span class="animated_circle item_list_item_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>
                                    <a href="#" class="item_list_item_link">
                                        <span class="item_list_item_link_label">Visit Website</span>

                                        <span class="animated_circle item_list_item_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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="item_list">
	{% if title or description %}
	<div class="item_list_header">
		<div class="fs-row">
			<div class="fs-cell fs-lg-8 fs-lg-justify-center">
				{% if title %}
				<h2 class="item_list_title">{{ title }}</h2>
				{% endif %}
				{% if description %}
				<span class="item_list_description">{{ description }}</span>
				{% endif %}
			</div>
		</div>
	</div>
	{% endif %}
	{% if items %}
	<div class="item_list_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="item_list_body_inner">
					{% for item in items %}
					<div class="item_list_item">
						<figure class="item_list_item_figure" aria-hidden="true">
							{% include "@partial-image" with {
								class: "item_list_item",
								alt: "",
								image: item.image,
								sources: [
									img.square.sml,
									img.square.xsml,
									img.square.xxsml
								]
							} %}
						</figure>
						<div class="item_list_item_wrapper">
							<div class="item_list_item_header">
								<h3 class="item_list_item_title">{{ item.title }}</h3>
								{% if item.subtitle %}
								<span class="item_list_item_subtitle">{{ item.subtitle }}</span>
								{% endif %}
								{% if item.school %}
								<span class="item_list_item_school">{{ item.school }}</span>
								{% endif %}
							</div>
							<div class="item_list_item_body">
								{% if item.description %}
								<div class="item_list_item_description">
									<p>{{ item.description }}</p>
								</div>
								{% endif %}
								{% if item.topics %}
								<div class="item_list_item_group">
									<span class="item_list_item_topics_heading">Topics</span>
									<ul class="item_list_item_topics_list">
										{% for topic in item.topics %}
										<li class="item_list_item_topics_list_item">{{ topic }}</li>
										{% endfor %}
									</ul>
								</div>
								{% endif %}
								{% if item.links %}
								<div class="item_list_item_links">
									{% for link in item.links %}
									<a href="{{ link.url }}" class="item_list_item_link">
										<span class="item_list_item_link_label">{{ link.title }}</span>
										{% include "@partial-animated-circle-arrow_right" with {
											class: 'item_list_item_link_icon'
										} %}
									</a>
									{% endfor %}
								</div>
								{% endif %}
							</div>
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	{% endif %}
</div>

No notes defined.