JHU SOE Component Library

Quote Card 

<!-- Quote Card -->
<div class="card card_quote card_type_default">
    <div class="card_inner card_quote_inner">
        <figure class="card_quote_figure">
            <blockquote class="card_quote_blockquote">
                <span class="card_quote_blockquote_icon">&ldquo;</span>
                <p class="card_quote_blockquote_text">It is time to come together and offer teachers, families, districts, and communities the very best of our research-to-practice expertise.</p>
            </blockquote>
            <figcaption class="card_quote_caption">
                <span class="card_quote_caption_name">Christopher C. Morphew</span>
                <span class="card_quote_caption_title">Dean of the Johns Hopkins School of Education</span>
            </figcaption>
        </figure>
    </div>
    <figure class="card_quote_media">

        <img class="card_quote_image" srcset="https://images.fastspot.com/jhusoe/300x300/1 300w, https://images.fastspot.com/jhusoe/100x100/1 100w" sizes="110px" src="https://images.fastspot.com/jhusoe/100x100/1" alt="" loading="lazy" width="100" height="100">
    </figure>
</div>
<!-- END: Quote Card -->
 
{#
	{% include '@partial-quote-card' with {
		item: {
			type: 'default',
			image: '1',
			alt: 'alt',
			quote: 'Quote',
			name: 'Name',
			title: 'Title'
		}
	} %}
#}

<!-- Quote Card -->
<div class="card card_quote card_type_{{ item.type ?: 'default' }}">
	<div class="card_inner card_quote_inner">
		<figure class="card_quote_figure">
			<blockquote class="card_quote_blockquote">
				<span class="card_quote_blockquote_icon">&ldquo;</span>
				<p class="card_quote_blockquote_text">{{ item.quote }}</p>
			</blockquote>
			<figcaption class="card_quote_caption">
				<span class="card_quote_caption_name">{{ item.name }}</span>
				{% if item.title %}
					<span class="card_quote_caption_title">{{ item.title }}</span>
				{% endif %}
			</figcaption>
		</figure>
	</div>
	{% if item.image %}
		<figure class="card_quote_media">
			{% include '@partial-image' with {
				class: 'card_quote',
				alt: item.alt,
				image: item.image,
				loading: 'lazy',
				sources: [
					img.square.xxsml,
					img.square.thumb
				],
				sizes: [
					'110px'
				]
			} %}
		</figure>
	{% endif %}
</div>
<!-- END: Quote Card -->

No notes defined.