VCUarts Component Library

Testimonial: Yellow 

<!-- Testimonial -->
<div class="testimonial testimonial_theme_yellow" data-sticky-sidebar-color="dark">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="testimonial_inner">
                <figure class="testimonial_figure">
                    <blockquote class="testimonial_quote">
                        <p><span class="testimonial_quote_open">&ldquo;</span>There's this boots-on-the-ground quality to VCUarts, an authenticity that exists among its students, its faculty, and its staff where everyone is committed to the arts, working toward the success of their work and the school<span class="testimonial_quote_close">&rdquo;</span></p>
                    </blockquote>
                    <figcaption class="testimonial_figcaption">
                        <span class="testimonial_media">

                            <img class="testimonial_image" srcset="https://images.fastspot.com/vcuarts/300x300/4 300w, https://images.fastspot.com/vcuarts/100x100/4 100w" sizes="(min-width: 500px) 122px, 100px" src="https://images.fastspot.com/vcuarts/100x100/4" alt="" loading="lazy" width="100" height="100">
                        </span>
                        <span class="testimonial_info">
                            <span class="testimonial_quote_name">Carmenita D. Higginbotham, Ph.D.</span>
                            <span class="testimonial_quote_title">Dean, VCUarts and Special Assistant to the Provost for the School of the Arts in Qatar</span>
                        </span>
                    </figcaption>
                </figure>
                <div class="testimonial_action">

                    <a href="#" class="testimonial_link">
                        <span class="testimonial_link_inner">
                            <span class="testimonial_link_label">Meet the VCUarts Leadership</span><span class="icon_nowrap testimonial_link_icon" aria-hidden="true">&#xfeff;
                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Testimonial -->
 
{#
	{% include '@component-testimonial' with {
		quote: '"Quote"',
		name: 'Name',
		job_title: 'Job Title',
		image: '1',
		alt: '',
		link: {
			url: '#',
			label: 'link label',
			aria: ''
		}
	} %}
#}

{% set sidebar_color = {
	white: 'dark',
	yellow: 'dark',
	black: 'light',
} %}

<!-- Testimonial -->
<div class="testimonial testimonial_theme_{{ theme }}" data-sticky-sidebar-color="{{ sidebar_color[theme] }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="testimonial_inner">
				<figure class="testimonial_figure">
					<blockquote class="testimonial_quote">
						<p><span class="testimonial_quote_open">&ldquo;</span>{{ quote }}<span class="testimonial_quote_close">&rdquo;</span></p>
					</blockquote>
					<figcaption class="testimonial_figcaption">
						{% if image %}
							<span class="testimonial_media">
								{% include '@partial-image' with {
									class: 'testimonial',
									alt: alt,
									image: image,
									loading: 'lazy',
									sources: [
										img.square.xxsml,
										img.square.thumb
									],
									sizes: [
										"(min-width: 500px) 122px",
										"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>
				{% if link %}
					<div class="testimonial_action">
						{% include '@partial-link' with {
							class: 'testimonial',
							title: link.label,
							url: link.url,
							icon: 'arrow_right',
							aria: link.aria,
							nowrap: true
						} %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.