<!-- HOME: Faces at New College -->
<div class="faces js-faces" style="--background-image: url('../images/faces_bg.png');">
<div class="fs-row">
<div class="fs-cell fs-lg-11">
<div class="faces_inner">
<div class="faces_header">
<h2 class="faces_header_title">Meet the faces at New.</h2>
</div>
<div class="faces_feature js-faces-feature">
<div class="faces_feature_inner">
<figure class="faces_feature_figure">
<span class="lazy_image_wrapper faces_feature_image_wrapper">
<img class="js-lazy js-lazyload faces_feature_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/1" data-src="//images.fastspot.com/new-college-of-florida/735x980/1" data-srcset="//images.fastspot.com/new-college-of-florida/735x980/1 735w, //images.fastspot.com/new-college-of-florida/555x740/1 555w, //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="faces_feature_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, https://images.fastspot.com/new-college-of-florida/555x740/1 555w, https://images.fastspot.com/new-college-of-florida/735x980/1 735w" sizes="100vw" alt="">
</noscript>
<button class="faces_trigger js-faces-feature-trigger js-swap" type="button" data-swap-target=".faces_feature_card" data-swap-group="faces" data-swap-linked="feature">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Natalius Antonin</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">Biology</span>
</button>
</figure>
<div class="faces_feature_card" aria-live="polite">
<div class="faces_feature_card_inner">
<span class="faces_card_title">Natalius Antonin</span>
<span class="faces_card_program">Biology</span>
<span class="faces_card_description">An expansive curriculum grounded in the arts and sciences that you can tailor to your interests and aspirations.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_feature_card" data-swap-group="faces" data-swap-linked="feature">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="faces_list js-carousel" data-carousel-options='{"contained": false, "matchWidth": false, "controls": false, "maxWidth": "739px"}'>
<div class="faces_list_item">
<figure class="faces_item_figure">
<span class="lazy_image_wrapper faces_item_image_wrapper">
<img class="js-lazy js-lazyload faces_item_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="faces_item_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="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_1" data-swap-group="faces" data-swap-linked="faces_1">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Stefan Fábián</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">Applied Mathematics</span>
</button>
</figure>
<div class="faces_item_card faces_item_card_1 js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">Stefan Fábián</span>
<span class="faces_card_program">Applied Mathematics</span>
<span class="faces_card_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ex fringilla, rhoncus nibh sed, viverra nisi. Suspendisse eleifend urna eu eros ultrices ultrices. Praesent porttitor euismod maximus.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_1" data-swap-group="faces" data-swap-linked="faces_1">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="faces_list_item">
<figure class="faces_item_figure">
<span class="lazy_image_wrapper faces_item_image_wrapper">
<img class="js-lazy js-lazyload faces_item_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/7" data-src="//images.fastspot.com/new-college-of-florida/375x500/7" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/7 375w, //images.fastspot.com/new-college-of-florida/225x300/7 225w" alt="">
</span>
<noscript>
<img class="faces_item_image" src="https://images.fastspot.com/new-college-of-florida/225x300/7" srcset="https://images.fastspot.com/new-college-of-florida/225x300/7 225w, https://images.fastspot.com/new-college-of-florida/375x500/7 375w" sizes="100vw" alt="">
</noscript>
<button class="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_2" data-swap-group="faces" data-swap-linked="faces_2">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Coretta Ante</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">Marine Biology</span>
</button>
</figure>
<div class="faces_item_card faces_item_card_2 js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">Coretta Ante</span>
<span class="faces_card_program">Marine Biology</span>
<span class="faces_card_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ex fringilla, rhoncus nibh sed, viverra nisi. Suspendisse eleifend urna eu eros ultrices ultrices. Praesent porttitor euismod maximus.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_2" data-swap-group="faces" data-swap-linked="faces_2">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="faces_list_item">
<figure class="faces_item_figure">
<span class="lazy_image_wrapper faces_item_image_wrapper">
<img class="js-lazy js-lazyload faces_item_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="faces_item_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="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_3" data-swap-group="faces" data-swap-linked="faces_3">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Chanan Jan</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">Literature Professor</span>
</button>
</figure>
<div class="faces_item_card faces_item_card_3 js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">Chanan Jan</span>
<span class="faces_card_program">Literature Professor</span>
<span class="faces_card_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ex fringilla, rhoncus nibh sed, viverra nisi. Suspendisse eleifend urna eu eros ultrices ultrices. Praesent porttitor euismod maximus.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_3" data-swap-group="faces" data-swap-linked="faces_3">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="faces_list_item">
<figure class="faces_item_figure">
<span class="lazy_image_wrapper faces_item_image_wrapper">
<img class="js-lazy js-lazyload faces_item_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/4" data-src="//images.fastspot.com/new-college-of-florida/375x500/4" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/4 375w, //images.fastspot.com/new-college-of-florida/225x300/4 225w" alt="">
</span>
<noscript>
<img class="faces_item_image" src="https://images.fastspot.com/new-college-of-florida/225x300/4" srcset="https://images.fastspot.com/new-college-of-florida/225x300/4 225w, https://images.fastspot.com/new-college-of-florida/375x500/4 375w" sizes="100vw" alt="">
</noscript>
<button class="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_4" data-swap-group="faces" data-swap-linked="faces_4">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Maud Sumiko</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">Environmental Studies</span>
</button>
</figure>
<div class="faces_item_card faces_item_card_4 js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">Maud Sumiko</span>
<span class="faces_card_program">Environmental Studies</span>
<span class="faces_card_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ex fringilla, rhoncus nibh sed, viverra nisi. Suspendisse eleifend urna eu eros ultrices ultrices. Praesent porttitor euismod maximus.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_4" data-swap-group="faces" data-swap-linked="faces_4">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="faces_list_item">
<figure class="faces_item_figure">
<span class="lazy_image_wrapper faces_item_image_wrapper">
<img class="js-lazy js-lazyload faces_item_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/5" data-src="//images.fastspot.com/new-college-of-florida/375x500/5" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/5 375w, //images.fastspot.com/new-college-of-florida/225x300/5 225w" alt="">
</span>
<noscript>
<img class="faces_item_image" src="https://images.fastspot.com/new-college-of-florida/225x300/5" srcset="https://images.fastspot.com/new-college-of-florida/225x300/5 225w, https://images.fastspot.com/new-college-of-florida/375x500/5 375w" sizes="100vw" alt="">
</noscript>
<button class="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_5" data-swap-group="faces" data-swap-linked="faces_5">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Mara Tour</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">English</span>
</button>
</figure>
<div class="faces_item_card faces_item_card_5 js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">Mara Tour</span>
<span class="faces_card_program">English</span>
<span class="faces_card_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ex fringilla, rhoncus nibh sed, viverra nisi. Suspendisse eleifend urna eu eros ultrices ultrices. Praesent porttitor euismod maximus.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_5" data-swap-group="faces" data-swap-linked="faces_5">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="faces_list_item">
<figure class="faces_item_figure">
<span class="lazy_image_wrapper faces_item_image_wrapper">
<img class="js-lazy js-lazyload faces_item_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/225x300/6" data-src="//images.fastspot.com/new-college-of-florida/375x500/6" data-srcset="//images.fastspot.com/new-college-of-florida/375x500/6 375w, //images.fastspot.com/new-college-of-florida/225x300/6 225w" alt="">
</span>
<noscript>
<img class="faces_item_image" src="https://images.fastspot.com/new-college-of-florida/225x300/6" srcset="https://images.fastspot.com/new-college-of-florida/225x300/6 225w, https://images.fastspot.com/new-college-of-florida/375x500/6 375w" sizes="100vw" alt="">
</noscript>
<button class="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_6" data-swap-group="faces" data-swap-linked="faces_6">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">Lara Mats</span>
<span class="faces_trigger_name_icon">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</span>
<span class="faces_trigger_program">Mathematics</span>
</button>
</figure>
<div class="faces_item_card faces_item_card_6 js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">Lara Mats</span>
<span class="faces_card_program">Mathematics</span>
<span class="faces_card_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ex fringilla, rhoncus nibh sed, viverra nisi. Suspendisse eleifend urna eu eros ultrices ultrices. Praesent porttitor euismod maximus.</span>
<a href="#" class="faces_card_link">Learn More</a>
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_6" data-swap-group="faces" data-swap-linked="faces_6">
<span class="faces_card_close_label">Close</span>
<span class="faces_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>
<!-- END: Faces at New College -->
<!-- HOME: Faces at New College -->
<div class="faces js-faces"{% if background_image %} style="--background-image: url('{{ background_image }}');"{% endif %}>
<div class="fs-row">
<div class="fs-cell fs-lg-11">
<div class="faces_inner">
<div class="faces_header">
<h2 class="faces_header_title">{{ title }}</h2>
</div>
{% if feature %}
<div class="faces_feature js-faces-feature">
<div class="faces_feature_inner">
<figure class="faces_feature_figure">
{% include "@partial-image" with {
class: "faces_feature",
alt: "",
image: feature.image,
sources: [
img.portraitFull.med,
img.portraitFull.sml,
img.portraitFull.xsml,
img.portraitFull.xxsml
]
} %}
<button class="faces_trigger js-faces-feature-trigger js-swap" type="button" data-swap-target=".faces_feature_card" data-swap-group="faces" data-swap-linked="feature">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">{{ feature.title }}</span>
<span class="faces_trigger_name_icon">{{ icon("expand") }}</span>
</span>
<span class="faces_trigger_program">{{ feature.program }}</span>
</button>
</figure>
{% if feature.card %}
<div class="faces_feature_card" aria-live="polite">
<div class="faces_feature_card_inner">
<span class="faces_card_title">{{ feature.title }}</span>
<span class="faces_card_program">{{ feature.program }}</span>
{% if feature.card.description %}
<span class="faces_card_description">{{ feature.card.description }}</span>
{% endif %}
{% if feature.card.link %}
<a href="{{ feature.card.link.url }}" class="faces_card_link">{{ feature.card.link.label }}</a>
{% endif %}
<button class="faces_card_close js-swap" data-swap-target=".faces_feature_card" data-swap-group="faces" data-swap-linked="feature">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">{{ icon("close") }}</span>
</button>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if items %}
<div class="faces_list js-carousel" data-carousel-options='{"contained": false, "matchWidth": false, "controls": false, "maxWidth": "739px"}'>
{% for item in items %}
<div class="faces_list_item">
<figure class="faces_item_figure">
{% include "@partial-image" with {
class: "faces_item",
alt: "",
image: item.image,
sources: [
img.portraitFull.xsml,
img.portraitFull.xxsml
]
} %}
<button class="faces_trigger js-faces-trigger js-swap" type="button" data-swap-target=".faces_item_card_{{ loop.index }}" data-swap-group="faces" data-swap-linked="faces_{{ loop.index }}">
<span class="faces_trigger_name">
<span class="faces_trigger_name_label">{{ item.title }}</span>
<span class="faces_trigger_name_icon">{{ icon("expand") }}</span>
</span>
<span class="faces_trigger_program">{{ item.program }}</span>
</button>
</figure>
{% if item.card %}
<div class="faces_item_card faces_item_card_{{ loop.index }} js-faces-item-card" aria-live="polite">
<div class="faces_item_card_inner">
<div class="faces_item_card_inner_inner js-card-inner">
<span class="faces_card_title">{{ item.title }}</span>
<span class="faces_card_program">{{ item.program }}</span>
{% if item.card.description %}
<span class="faces_card_description">{{ item.card.description }}</span>
{% endif %}
{% if item.card.link %}
<a href="{{ item.card.link.url }}" class="faces_card_link">{{ item.card.link.label }}</a>
{% endif %}
<button class="faces_card_close js-swap" data-swap-target=".faces_item_card_{{ loop.index }}" data-swap-group="faces" data-swap-linked="faces_{{ loop.index }}">
<span class="faces_card_close_label">Close</span>
<span class="faces_card_close_icon">{{ icon("close") }}</span>
</button>
</div>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- END: Faces at New College -->
No notes defined.