<div class="testimonial js-testimonial" style="--background-image: url('../images/faces_bg.png');">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-11">
<div class="testimonial_inner js-testimonial-inner">
<div class="testimonial_header">
<h2 class="testimonial_title">Testimonial</h2>
<span class="testimonial_description">Lorem Ipsum, condimentum</span>
</div>
<div class="testimonial_wrapper js-carousel" data-carousel-options='{"controls": false, "contained": false, "matchWidth": false, "show":{"740px":2, "980px":3, "1220px":4}}'>
<div class="testimonial_item">
<figure class="testimonial_figure">
<span class="lazy_image_wrapper testimonial_image_wrapper">
<img class="js-lazy js-lazyload testimonial_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/1" data-src="//images.fastspot.com/new-college-of-florida/375x500/1" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/1 375w, //images.fastspot.com/new-college-of-florida/225x300/1 225w" alt="">
</span>
<noscript>
<img class="testimonial_image" src="https://images.fastspot.com/new-college-of-florida/225x300/1" srcset="https://images.fastspot.com/new-college-of-florida/225x300/1 225w, https://images.fastspot.com/new-college-of-florida/375x500/1 375w" sizes="100vw" alt="">
</noscript>
<button class="testimonial_item_trigger js-testimonial-trigger js-swap" type="button" data-swap-target=".testimonial_item_card_1" data-swap-group="testimonial" data-swap-linked="testimonial_1">
<span class="testimonial_item_name">
<span class="testimonial_item_name_label">Chanan Jan</span>
<span class="testimonial_item_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<div class="testimonial_item_title">Literature Professor</div>
</button>
</figure>
<div class="testimonial_item_card testimonial_item_card_1 js-testimonial-item-card">
<div class="testimonial_item_card_inner">
<div class="testimonial_item_card_inner_inner js-card-inner">
<span class="testimonial_card_name">Chanan Jan</span>
<span class="testimonial_card_title">Literature Professor</span>
<span class="testimonial_card_quote">"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, non elementum urna dui sed neque. Nulla non ipsum fermentum, fermentum tellus ut, viverra est. Interdum et malesuada fames ac ant faucibus”</span>
<a href="#" class="testimonial_card_link">Read More</a>
<button class="testimonial_card_close js-swap" data-swap-target=".testimonial_item_card_1" data-swap-group="testimonial" data-swap-linked="testimonial_1">
<span class="testimonial_card_close_label">Close</span>
<span class="testimonial_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="testimonial_item">
<figure class="testimonial_figure">
<span class="lazy_image_wrapper testimonial_image_wrapper">
<img class="js-lazy js-lazyload testimonial_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/2" data-src="//images.fastspot.com/new-college-of-florida/375x500/2" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/2 375w, //images.fastspot.com/new-college-of-florida/225x300/2 225w" alt="">
</span>
<noscript>
<img class="testimonial_image" src="https://images.fastspot.com/new-college-of-florida/225x300/2" srcset="https://images.fastspot.com/new-college-of-florida/225x300/2 225w, https://images.fastspot.com/new-college-of-florida/375x500/2 375w" sizes="100vw" alt="">
</noscript>
<button class="testimonial_item_trigger js-testimonial-trigger js-swap" type="button" data-swap-target=".testimonial_item_card_2" data-swap-group="testimonial" data-swap-linked="testimonial_2">
<span class="testimonial_item_name">
<span class="testimonial_item_name_label">Maud Sumiko</span>
<span class="testimonial_item_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<div class="testimonial_item_title">Environmental Studies</div>
</button>
</figure>
<div class="testimonial_item_card testimonial_item_card_2 js-testimonial-item-card">
<div class="testimonial_item_card_inner">
<div class="testimonial_item_card_inner_inner js-card-inner">
<span class="testimonial_card_name">Maud Sumiko</span>
<span class="testimonial_card_title">Environmental Studies</span>
<span class="testimonial_card_quote">"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, non elementum urna dui sed neque. Nulla non ipsum fermentum, fermentum tellus ut, viverra est. Interdum et malesuada fames ac ant faucibus”</span>
<button class="testimonial_card_close js-swap" data-swap-target=".testimonial_item_card_2" data-swap-group="testimonial" data-swap-linked="testimonial_2">
<span class="testimonial_card_close_label">Close</span>
<span class="testimonial_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="testimonial_item">
<figure class="testimonial_figure">
<span class="lazy_image_wrapper testimonial_image_wrapper">
<img class="js-lazy js-lazyload testimonial_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/3" data-src="//images.fastspot.com/new-college-of-florida/375x500/3" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/3 375w, //images.fastspot.com/new-college-of-florida/225x300/3 225w" alt="">
</span>
<noscript>
<img class="testimonial_image" src="https://images.fastspot.com/new-college-of-florida/225x300/3" srcset="https://images.fastspot.com/new-college-of-florida/225x300/3 225w, https://images.fastspot.com/new-college-of-florida/375x500/3 375w" sizes="100vw" alt="">
</noscript>
<button class="testimonial_item_trigger js-testimonial-trigger js-swap" type="button" data-swap-target=".testimonial_item_card_3" data-swap-group="testimonial" data-swap-linked="testimonial_3">
<span class="testimonial_item_name">
<span class="testimonial_item_name_label">Coretta Ante</span>
<span class="testimonial_item_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<div class="testimonial_item_title">Marine Biology</div>
</button>
</figure>
<div class="testimonial_item_card testimonial_item_card_3 js-testimonial-item-card">
<div class="testimonial_item_card_inner">
<div class="testimonial_item_card_inner_inner js-card-inner">
<span class="testimonial_card_name">Coretta Ante</span>
<span class="testimonial_card_title">Marine Biology</span>
<span class="testimonial_card_quote">"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, non elementum urna dui sed neque. Nulla non ipsum fermentum, fermentum tellus ut, viverra est. Interdum et malesuada fames ac ant faucibus”</span>
<button class="testimonial_card_close js-swap" data-swap-target=".testimonial_item_card_3" data-swap-group="testimonial" data-swap-linked="testimonial_3">
<span class="testimonial_card_close_label">Close</span>
<span class="testimonial_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial js-testimonial"{% if background_image %} style="--background-image: url('{{ background_image }}');"{% endif %}>
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-11">
<div class="testimonial_inner js-testimonial-inner">
<div class="testimonial_header">
<h2 class="testimonial_title">{{ title }}</h2>
{% if description %}
<span class="testimonial_description">{{ description }}</span>
{% endif %}
</div>
{% if items %}
<div class="testimonial_wrapper js-carousel" data-carousel-options='{"controls": false, "contained": false, "matchWidth": false, "show":{"740px":2, "980px":3, "1220px":4}}'>
{% for item in items %}
<div class="testimonial_item">
<figure class="testimonial_figure">
{% include "@partial-image" with {
class: "testimonial",
alt: "",
image: item.image,
sources: [
img.portraitFull.xsml,
img.portraitFull.xxsml
]
} %}
<button class="testimonial_item_trigger js-testimonial-trigger js-swap" type="button" data-swap-target=".testimonial_item_card_{{ loop.index }}" data-swap-group="testimonial" data-swap-linked="testimonial_{{ loop.index }}">
<span class="testimonial_item_name">
<span class="testimonial_item_name_label">{{ item.name }}</span>
<span class="testimonial_item_name_icon">{{ icon("expand") }}</span>
</span>
{% if item.title %}
<div class="testimonial_item_title">{{ item.title }}</div>
{% endif %}
</button>
</figure>
<div class="testimonial_item_card testimonial_item_card_{{ loop.index }} js-testimonial-item-card">
<div class="testimonial_item_card_inner">
<div class="testimonial_item_card_inner_inner js-card-inner">
<span class="testimonial_card_name">{{ item.name }}</span>
{% if item.title %}
<span class="testimonial_card_title">{{ item.title }}</span>
{% endif %}
<span class="testimonial_card_quote">{{ item.quote }}</span>
{% if item.link %}
<a href="{{ item.link.url }}" class="testimonial_card_link">{{ item.link.label }}</a>
{% endif %}
<button class="testimonial_card_close js-swap" data-swap-target=".testimonial_item_card_{{ loop.index }}" data-swap-group="testimonial" data-swap-linked="testimonial_{{ loop.index }}">
<span class="testimonial_card_close_label">Close</span>
<span class="testimonial_card_close_icon">{{ icon("close") }}</span>
</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
No notes defined.