JTCC Component Library

Testimonial: Blue 

<div class="testimonial theme-blue">
    <div class="testimonial_inner">
        <div class="testimonial_content">
            <div class="testimonial_icon_wrap">
                <div class="testimonial_icon">

                    <svg class="icon icon_quote">
                        <use href="/images/icons.svg#quote" />
                    </svg>

                </div>
            </div>

            <blockquote class="testimonial_quote">
                <p>The support at Tyler was a really big factor for me in finding my self-confidence. You always have people tell you, ‘You can do it!’</p>
            </blockquote>

            <div class="testimonial_info">
                <div class="testimonial_quote_name">Ravonte Campbell</div>
                <a class="testimonial_quote_title" href="#">Mechanical Engineering</a>
            </div>
        </div>

        <div class="testimonial_media">
            <span class="lazy_image_wrapper testimonial_image_wrapper">
                <img class="js-lazy js-lazyload testimonial_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/740x555/4" data-srcset="//images.fastspot.com/jtcc/740x555/4 740w, //images.fastspot.com/jtcc/980x735/4 980w" alt="">
            </span>
            <noscript>
                <img class="testimonial_image" src="https://images.fastspot.com/jtcc/980x735/4" srcset="//images.fastspot.com/jtcc/980x735/4 980w, //images.fastspot.com/jtcc/740x555/4 740w" sizes="100vw" alt="">
            </noscript>

            <div class="js-background testimonial_background" data-background-options='{"source": { "1220px": "//images.fastspot.com/jtcc/1080x1440/4", "740px": "//images.fastspot.com/jtcc/735x980/4", "500px": "//images.fastspot.com/jtcc/980x654/4", "0px": "//images.fastspot.com/jtcc/494x740/4", "980px": "//images.fastspot.com/jtcc/915x1220/4"}, "lazy": true, "alt": ""}' aria-hidden="true">
                <div class="testimonial_background_fallback" style="background-image: url(' //images.fastspot.com/jtcc/300x129/4');"></div>
            </div>
        </div>
    </div>
</div>
 
<div class="testimonial theme-{{ theme }}">
	<div class="testimonial_inner">
		<div class="testimonial_content">
			<div class="testimonial_icon_wrap">
				<div class="testimonial_icon">
					{{ icon('quote') }}
				</div>
			</div>

			<blockquote class="testimonial_quote">
				<p>{{ quote }}</p>
			</blockquote>

			<div class="testimonial_info">
				<div class="testimonial_quote_name">{{ name }}</div>
				{% if title %}
					<a class="testimonial_quote_title" href="#">{{ title }}</a>
				{% endif %}
			</div>
		</div>

		<div class="testimonial_media">
			{% render "@partial-image" with {
				class: 'testimonial',
				image: image,
				sources: [
					img("full").med,
					img("full").sml,
				]
			} %}

			{% render "@partial-background" with {
				class: "testimonial",
				image: image,
				sources: {
					'740px': img("portraitFull").med,
					'980px': img("portraitFull").lrg,
					'1220px': img("portraitFull").xlrg,
				}
			} %}
		</div>
	</div>
</div>

No notes defined.