JHU Carey Centers Component Library

Testimonial: Green Accent 

<!-- Testimonial -->

<div class="testimonial theme_site_theme theme_accent">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="testimonial_inner">
                <img class="testimonial_inner_background" src="/images/demo-lines.png">
                <figure class="testimonial_figure">
                    <blockquote class="testimonial_quote">
                        <p>&ldquo;Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Praesent eget est sed ex pretium fringilla. Vivamus <em>ac turpis quis eros consectetur</em> ornare. Proin pulvinar, magna id vulputate commodo, metus massa tincidunt lorem, <a href="#">non elementum urna dui sed</a> neque. Nulla non ipsum fermentum, fermentum tellus ut, viverra est. Interdum et malesuada fames ac ant faucibus.&rdquo;</p>
                    </blockquote>
                    <figcaption class="testimonial_figcaption">
                        <span class="testimonial_media">

                            <img class="testimonial_image" srcset="https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" sizes="85px" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
                        </span>
                        <span class="testimonial_info">
                            <span class="testimonial_quote_name">Ellesse Akre</span>
                            <span class="testimonial_quote_title">Assistant Professor<br>Johns Hopkins Bloomberg School of Public Health</span>
                        </span>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
</div>
<!-- END: Testimonial -->
 
{#
	{% include '@component-testimonial' with {
		quote: '"Quote"',
		name: 'Name',
		job_title: 'Job Title',
		image: '1'
	} %}
#}

<!-- Testimonial -->

<div class="testimonial theme_site_theme theme_accent">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="testimonial_inner">
				{% if background %}
					<img class="testimonial_inner_background" src="{{ background }}">
				{% endif %}
				<figure class="testimonial_figure">
					<blockquote class="testimonial_quote">
						<p>&ldquo;{{ quote }}&rdquo;</p>
					</blockquote>
					<figcaption class="testimonial_figcaption">
						{% if image %}
							<span class="testimonial_media">
								{% include '@partial-image' with {
									class: 'testimonial',
									alt: alt,
									image: image,
									loading: 'lazy',
									crop: 'square',
									max: 'xxsml',
									sizes: [
										'85px',
									]
								} %}
							</span>
						{% endif %}
						<span class="testimonial_info">
							<span class="testimonial_quote_name">{{ name }}</span>
							{% if job_title %}
								<span class="testimonial_quote_title">{{ job_title }}</span>
							{% endif %}
						</span>
					</figcaption>
				</figure>
			</div>
		</div>
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.