Paul Smith's College Component Library

Testimonial: Black 

<!-- Testimonial -->
<div class="testimonial component_theme_black component_spacing_padding">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="testimonial_inner">
                <div class="testimonial_group">
                    <figure class="testimonial_figure">
                        <blockquote class="testimonial_quote">
                            <span class="testimonial_quote_open">
                                <svg class="icon icon_open_quote">
                                    <use href="/images/icons.svg#open_quote" />
                                </svg>
                            </span>
                            <p>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 small">

                                <img class="testimonial_image" srcset="https://images.fastspot.com/paul-smiths-college/300x300/11 300w, https://images.fastspot.com/paul-smiths-college/100x100/11 100w" sizes="(min-width: 980px) 0, 100px" src="https://images.fastspot.com/paul-smiths-college/100x100/11" alt="" loading="lazy" width="100" height="100">
                            </span>
                            <span class="testimonial_info">
                                <span class="testimonial_quote_name">Dr. Kelly L. Cerialot</span>
                                <span class="testimonial_quote_title">Associate Professor</span>
                            </span>
                        </figcaption>
                    </figure>
                    <div class="testimonial_links">
                        <div class="testimonial_link_item">

                            <a href="#" class="base_link">
                                <span class="base_link_inner">
                                    <span class="base_link_label">Business & Hospitality</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="testimonial_media large">

                    <img class="testimonial_image" srcset="https://images.fastspot.com/paul-smiths-college/500x500/11 500w, https://images.fastspot.com/paul-smiths-college/300x300/11 300w, https://images.fastspot.com/paul-smiths-college/100x100/11 100w" sizes="(min-width: 1440px) 274px, (min-width: 1220px) 235px, (min-width: 980px) 188px, 0" src="https://images.fastspot.com/paul-smiths-college/100x100/11" alt="" loading="lazy" width="100" height="100">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Testimonial -->
 
{#
	{% include '@component-testimonial' with {
		quote: '"Quote"',
		name: 'Name',
		job_title: 'Job Title',
		image: '1',
		alt: 'alt',
		link: {
			title: 'Link title',
			url: '#'
		}
	} %}
#}

{% set component_spacing = 'padding' %}
{% if theme == 'white' %}
	{% set component_spacing = 'margin' %}
{% endif %}

<!-- Testimonial -->
<div class="testimonial component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="testimonial_inner">
				<div class="testimonial_group">
					<figure class="testimonial_figure">
						<blockquote class="testimonial_quote">
							<span class="testimonial_quote_open">{{ icon('open_quote') }}</span>
							<p>{{ quote }}</p>
						</blockquote>
						<figcaption class="testimonial_figcaption">
							{% if image %}
								<span class="testimonial_media small">
									{% include '@partial-image' with {
										class: 'testimonial',
										alt: alt,
										image: image,
										loading: 'lazy',
										sources: [
											img.square.xxsml,
											img.square.thumb
										],
										sizes: [
											'(min-width: 980px) 0',
											'100px'
										]
									} %}
								</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 class="testimonial_links">
						<div class="testimonial_link_item">
							{% include '@partial-link' with {
								class: 'base',
								title: link.title,
								url: link.url,
								icon: 'chevron_right',
								nowrap: true
							} %}
						</div>
					</div>
				</div>
				{% if image %}
					<div class="testimonial_media large">
						{% include '@partial-image' with {
							class: 'testimonial',
							alt: alt,
							image: image,
							loading: 'lazy',
							sources: [
								img.square.xsml,
								img.square.xxsml,
								img.square.thumb
							],
							sizes: [
								'(min-width: 1440px) 274px',
								'(min-width: 1220px) 235px',
								'(min-width: 980px) 188px',
								'0'
							]
						} %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.