JHU India Component Library

Spotlight 

<div class="spotlight">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="spotlight_inner">
                <div class="spotlight_header">
                    <h2 class="spotlight_title">Our Initiatives</h2>
                    <span class="spotlight_description">JHII faculty, staff, and students are engaged in research and educational projects across all 28 Indian states and 8 Union territories.</span>
                </div>
                <div class="spotlight_body">
                    <div class="spotlight_item">
                        <figure class="spotlight_item_figure" aria-hidden="true">
                            <span class="lazy_image_wrapper spotlight_item_image_wrapper">
                                <img class="js-lazy js-lazyload spotlight_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x416/3" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x416/3 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/3 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/3 300w" alt="">
                            </span>
                            <noscript>
                                <img class="spotlight_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/3" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/3 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/3 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/3 740w" sizes="100vw" alt="">
                            </noscript>
                            <a href="#" class="spotlight_item_title_link">
                                <span class="spotlight_item_title_icon">
                                    <svg class="icon icon_research">
                                        <use href="/images/icons.svg#research" />
                                    </svg>
                                </span>
                                <span class="spotlight_item_title_link_label">Research</span>
                            </a>
                        </figure>
                        <div class="spotlight_item_group">
                            <span class="spotlight_item_description">Our faculty comprise of experts in across a multitude of disciplines to develop bold, world-changing ideas with India’s experts.</span>
                            <div class="spotlight_item_links_wrapper">
                                <a href="#" class="spotlight_item_link">
                                    <span class="spotlight_item_link_label">Explore Research Projects</span>

                                    <span class="animated_circle spotlight_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="spotlight_item_link">
                                    <span class="spotlight_item_link_label">Our Faculty</span>

                                    <span class="animated_circle spotlight_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="spotlight_item_link">
                                    <span class="spotlight_item_link_label">Centers & Groups</span>

                                    <span class="animated_circle spotlight_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 class="spotlight_item">
                        <figure class="spotlight_item_figure" aria-hidden="true">
                            <span class="lazy_image_wrapper spotlight_item_image_wrapper">
                                <img class="js-lazy js-lazyload spotlight_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/4" data-src="//images.fastspot.com/johns-hopkins-india-institute/740x416/4" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x416/4 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/4 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/4 300w" alt="">
                            </span>
                            <noscript>
                                <img class="spotlight_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/4" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/4 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/4 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/4 740w" sizes="100vw" alt="">
                            </noscript>
                            <a href="#" class="spotlight_item_title_link">
                                <span class="spotlight_item_title_icon">
                                    <svg class="icon icon_education">
                                        <use href="/images/icons.svg#education" />
                                    </svg>
                                </span>
                                <span class="spotlight_item_title_link_label">Education</span>
                            </a>
                        </figure>
                        <div class="spotlight_item_group">
                            <span class="spotlight_item_description">Whether you are an undergraduate, graduate, medical or doctoral student, JHU India Institute offers programs to help you gain knowledge and experience to improve society through research, education, policy and practice.</span>
                            <div class="spotlight_item_links_wrapper">
                                <a href="#" class="spotlight_item_link">
                                    <span class="spotlight_item_link_label">Degree Programs</span>

                                    <span class="animated_circle spotlight_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="spotlight_item_link">
                                    <span class="spotlight_item_link_label">Courses</span>

                                    <span class="animated_circle spotlight_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="spotlight_item_link">
                                    <span class="spotlight_item_link_label">Continuing Education</span>

                                    <span class="animated_circle spotlight_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 class="spotlight">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="spotlight_inner">
				{% if title or description %}
				<div class="spotlight_header">
					{% if title %}
					<h2 class="spotlight_title">{{ title }}</h2>
					{% endif %}
					{% if description %}
					<span class="spotlight_description">{{ description }}</span>
					{% endif %}
				</div>
				{% endif %}
				{% if items %}
				<div class="spotlight_body">
					{% for item in items %}
					<div class="spotlight_item">
						<figure class="spotlight_item_figure" aria-hidden="true">
							{% include "@partial-image" with {
								class: "spotlight_item",
								alt: "",
								image: item.image,
								sources: [
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								]
							} %}
							<a href="#" class="spotlight_item_title_link">
								<span class="spotlight_item_title_icon">{{ icon(item.icon) }}</span>
								<span class="spotlight_item_title_link_label">{{ item.title }}</span>
							</a>
						</figure>
						{% if item.description or item.links %}
						<div class="spotlight_item_group">
							{% if item.description %}
							<span class="spotlight_item_description">{{ item.description }}</span>
							{% endif %}
							{% if item.links %}
							<div class="spotlight_item_links_wrapper">
								{% for link in item.links %}
								<a href="{{ link.url }}" class="spotlight_item_link">
									<span class="spotlight_item_link_label">{{ link.title }}</span>
									{% include "@partial-animated-circle-arrow_right" with {
										class: 'spotlight_item_link_icon'
									} %}
								</a>
								{% endfor %}
							</div>
							{% endif %}
						</div>
						{% endif %}
					</div>
					{% endfor %}
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.