Flint Institute of Music Component Library

Testimonials 

<!-- Testimonial -->
<div class="testimonials">
    <div class="fs-row">
        <div class="fs-cell fs-xl-10 fs-xl-justify-center">
            <div class="testimonials_inner">
                <div class="js-carousel testimonials_items" data-carousel-options='{"contained":false,"controls":true,"pagination":false,"single":true}'>
                    <div class="testimonials_item">

                        <!-- Testimonial -->
                        <div class="testimonial">
                            <div class="testimonial_inner">
                                <figure class="testimonial_figure">
                                    <blockquote class="testimonial_quote">
                                        <span class="testimonial_quote_open">&ldquo;</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_info">
                                            <span class="testimonial_quote_name">Full Name</span>
                                            <span class="testimonial_quote_title">Senior Director of Department</span>
                                        </span>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <!-- END: Testimonial --> <span class="testimonials_item_index">1 of 3
                    </div>
                    <div class="testimonials_item">

                        <!-- Testimonial -->
                        <div class="testimonial">
                            <div class="testimonial_inner">
                                <figure class="testimonial_figure">
                                    <blockquote class="testimonial_quote">
                                        <span class="testimonial_quote_open">&ldquo;</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.</p>
                                    </blockquote>
                                    <figcaption class="testimonial_figcaption">
                                        <span class="testimonial_info">
                                            <span class="testimonial_quote_name">Lots bigs names with names</span>
                                            <span class="testimonial_quote_title">Senior Director of Department Senior Director of Department</span>
                                        </span>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <!-- END: Testimonial --> <span class="testimonials_item_index">2 of 3
                    </div>
                    <div class="testimonials_item">

                        <!-- Testimonial -->
                        <div class="testimonial">
                            <div class="testimonial_inner">
                                <figure class="testimonial_figure">
                                    <blockquote class="testimonial_quote">
                                        <span class="testimonial_quote_open">&ldquo;</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_info">
                                            <span class="testimonial_quote_name">Full Name</span>
                                            <span class="testimonial_quote_title">Senior Director of Department</span>
                                        </span>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <!-- END: Testimonial --> <span class="testimonials_item_index">3 of 3
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Testimonial -->
 
{#
	{% include '@component-testimonial' with {
		quote: '"Quote"',
		name: 'Name',
		job_title: 'Job Title',
		image: '1'
	} %}
#}

{%
	set carousel_options = {
		contained: false,
		controls: true,
    	pagination: false,
		single: true,
	}
%}

{% set carousel_options = carousel_options|json_encode %}

<!-- Testimonial -->
<div class="testimonials">
	<div class="fs-row">
		<div class="fs-cell fs-xl-10 fs-xl-justify-center">
			<div class="testimonials_inner">
				<div class="js-carousel testimonials_items" data-carousel-options='{{ carousel_options }}'>
					{% for item in items %}
						<div class="testimonials_item">
							{% include '@component-testimonial' with {
								quote: item.quote,
								name: item.name,
								job_title: item.job_title,
								image: item.image
							} %}
							<span class="testimonials_item_index">{{ loop.index }} of {{ items|length }}
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.