Le Moyne Component Library

Testimonial: Image With Button 

<!-- Testimonial -->
<div class="testimonial testimonial_with_bg">
    <div class="testimonial_bg">
        <figure class="testimonial_bg_media">

            <img class="testimonial_bg_image" srcset="https://images.fastspot.com/le-moyne/1440x810/3 1440w, https://images.fastspot.com/le-moyne/1220x686/3 1220w, https://images.fastspot.com/le-moyne/980x552/3 980w, https://images.fastspot.com/le-moyne/740x416/3 740w, https://images.fastspot.com/le-moyne/500x282/3 500w, https://images.fastspot.com/le-moyne/300x169/3 300w" sizes="100vw" src="https://images.fastspot.com/le-moyne/300x169/3" alt="" loading="lazy" width="300" height="169">
        </figure>
    </div>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="testimonial_inner">
                <figure class="testimonial_figure">
                    <blockquote class="testimonial_quote">
                        <span class="testimonial_quote_open">
                            <svg class="icon icon_quote_outline">
                                <use href="/images/icons.svg#quote_outline" />
                            </svg>
                        </span>
                        <p>My advice to future Dolphins is: Get out there, do what you love, and make the world a better place.”</p>
                    </blockquote>
                    <figcaption class="testimonial_figcaption">
                        <span class="testimonial_quote_name">Full Name '22</span>

                        <a href="#" class="testimonial_quote_link">
                            <span class="testimonial_quote_link_inner">
                                <span class="testimonial_quote_link_label">Biology</span><span class="icon_nowrap testimonial_quote_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </figcaption>
                </figure>

                <a href="#" class="testimonial_cta_link">
                    <span class="testimonial_cta_link_inner">
                        <span class="testimonial_cta_link_label">View Full Story</span>
                        <span class="testimonial_cta_link_icon" aria-hidden="true">

                            <svg class="icon icon_caret_right">
                                <use href="/images/icons.svg#caret_right" />
                            </svg>

                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- END: Testimonial -->
 
{#
	{% include '@component-testimonial' with {
		quote: '"Quote"',
		name: 'Name',
		job_title: 'Job Title',
		image: '1'
	} %}
#}

<!-- Testimonial -->
<div class="testimonial testimonial_with_bg">
	<div class="testimonial_bg">
		<figure class="testimonial_bg_media">
			{% include '@partial-image' with {
				class: 'testimonial_bg',
				alt: '',
				image: image,
				loading: 'lazy',
				sources: [
					img.wide.xlrg,
					img.wide.lrg,
					img.wide.med,
					img.wide.sml,
					img.wide.xsml,
					img.wide.xxsml
				],
				sizes: [
					'100vw',
				]
			} %}
		</figure>
	</div>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="testimonial_inner">
				<figure class="testimonial_figure">
					<blockquote class="testimonial_quote">
						<span class="testimonial_quote_open">{{icon('quote_outline')}}</span>
						<p>{{ quote }}</p>
					</blockquote>
					<figcaption class="testimonial_figcaption">
						<span class="testimonial_quote_name">{{ name }}</span>
						{% if link %}
							{% include '@partial-link' with {
								class: 'testimonial_quote',
								title: link.title,
								url: link.url,
								icon: 'caret_right',
								nowrap: true,
							} %}
						{% endif %}
					</figcaption>
				</figure>
				{% if cta %}
					{% include "@partial-link" with {
						class: 'testimonial_cta',
						title: cta.title,
						url: cta.url,
						icon: 'caret_right',
					} %}
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.