JHU India Component Library

Testimonial Row 

<div class="testimonial_row theme_yellow">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="testimonial_row_inner">
                <h2 class="testimonial_row_heading">Testimonial</h2>
                <figure class="testimonial_row_figure" aria-hidden="true">
                    <span class="lazy_image_wrapper testimonial_row_image_wrapper">
                        <picture class="testimonial_row_picture">
                            <source media="(min-width: 980px)" srcset="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x740/3">
                            <source media="(min-width: 740px)" srcset="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x416/3">
                            <source media="(min-width: 500px)" srcset="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/500x282/3">
                            <img class="js-lazy js-lazyload testimonial_row_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/3" alt="">
                        </picture>
                    </span>
                    <noscript>
                        <picture class="testimonial_row_picture">
                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/johns-hopkins-india-institute/740x740/3">
                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/johns-hopkins-india-institute/740x416/3">
                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/johns-hopkins-india-institute/500x282/3">
                            <img class="js-lazy js-lazyload testimonial_row_image" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" data-src="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" alt="">
                        </picture>
                    </noscript>
                </figure>
                <div class="testimonial_row_wrapper has_image">
                    <span class="testimonial_row_icon">
                        <svg class="icon icon_quote">
                            <use href="/images/icons.svg#quote" />
                        </svg>
                    </span>
                    <span class="testimonial_row_quote">The emotional aspect of medicine made me want to become a physician,” Agrawal says, “and India is a place that’s very, very close to my heart.”</span>
                    <span class="testimonial_row_name">Pranjal Agrawal</span>
                    <span class="testimonial_row_title">Medical Student</span>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="testimonial_row{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row">
		<div class="fs-cell{% if not image %} fs-lg-10 fs-xl-8 fs-lg-justify-center{% endif %}">
			<div class="testimonial_row_inner">
				<h2 class="testimonial_row_heading">Testimonial</h2>
				{% if image %}
				<figure class="testimonial_row_figure" aria-hidden="true">
					{% include "@partial-picture" with {
						class: "testimonial_row",
						image: image,
						default: img.wide.xxsml,
						loading: "lazy",
						alt: "",
						sources: {
							"980px": img.square.sml,
							"740px": img.wide.sml,
							"500px": img.wide.xsml
						}
					} %}
				</figure>
				{% endif %}
				<div class="testimonial_row_wrapper{% if image %} has_image{% endif %}">
					<span class="testimonial_row_icon">{{ icon("quote") }}</span>
					<span class="testimonial_row_quote">{{ quote }}</span>
					<span class="testimonial_row_name">{{ name }}</span>
					{% if title %}
					<span class="testimonial_row_title">{{ title }}</span>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.