<!-- Card Group -->
<div class="highlights">
<div class="highlights_header">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="highlights_header_inner">
<h2 class="highlights_title">We’re in This together</h2>
<div class="highlights_description">
<p>From food security to financial aid, from counseling to career guidance, find all the support you need to succeed at Merced College.</p>
</div>
<div class="highlights_discovery">
<a href="#" class="highlights_link">
<span class="highlights_link_inner">
<span class="highlights_link_label">Explore All Resources</span>
<span class="highlights_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="highlights_body">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="highlights_body_inner">
<div class="js-carousel highlights_carousel" data-carousel-options='{"contained":false,"controls":true,"pagination":true,"theme":"theme_dark"}'>
<div class="highlight">
<figure class="highlight_figure" aria-hidden="true">
<span class="highlight_media">
<img class="highlight_image" srcset="https://images.fastspot.com/merced/980x654/ 980w, https://images.fastspot.com/merced/740x494/ 740w" src="https://images.fastspot.com/merced/740x494/" alt="" loading="lazy" width="740" height="494">
</span>
<figcaption class="highlight_figcaption">
<span class="highlight_figcaption_inner">
<span class="highlight_discovery">
<a href="#" class="highlight_link">
<span class="highlight_link_inner">
<span class="highlight_link_label">Basic Needs Center</span>
<span class="highlight_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a> </span>
<span class="highlight_description">The center is a one-stop, single location for students to access basic needs and get the help they need.</span>
</span>
</figcaption>
</figure>
<div class="highlight_teasers" aria-hidden="true">
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Next</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Previous</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
</div>
</div>
<div class="highlight">
<figure class="highlight_figure" aria-hidden="true">
<span class="highlight_media">
<img class="highlight_image" srcset="https://images.fastspot.com/merced/980x654/ 980w, https://images.fastspot.com/merced/740x494/ 740w" src="https://images.fastspot.com/merced/740x494/" alt="" loading="lazy" width="740" height="494">
</span>
<figcaption class="highlight_figcaption">
<span class="highlight_figcaption_inner">
<span class="highlight_discovery">
<a href="#" class="highlight_link">
<span class="highlight_link_inner">
<span class="highlight_link_label">Basic Needs Center</span>
<span class="highlight_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a> </span>
<span class="highlight_description">The center is a one-stop, single location for students to access basic needs and get the help they need.</span>
</span>
</figcaption>
</figure>
<div class="highlight_teasers" aria-hidden="true">
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Next</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Previous</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
</div>
</div>
<div class="highlight">
<figure class="highlight_figure" aria-hidden="true">
<span class="highlight_media">
<img class="highlight_image" srcset="https://images.fastspot.com/merced/980x654/ 980w, https://images.fastspot.com/merced/740x494/ 740w" src="https://images.fastspot.com/merced/740x494/" alt="" loading="lazy" width="740" height="494">
</span>
<figcaption class="highlight_figcaption">
<span class="highlight_figcaption_inner">
<span class="highlight_discovery">
<a href="#" class="highlight_link">
<span class="highlight_link_inner">
<span class="highlight_link_label">Basic Needs Center</span>
<span class="highlight_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a> </span>
<span class="highlight_description">The center is a one-stop, single location for students to access basic needs and get the help they need.</span>
</span>
</figcaption>
</figure>
<div class="highlight_teasers" aria-hidden="true">
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Next</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Previous</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
</div>
</div>
<div class="highlight">
<figure class="highlight_figure" aria-hidden="true">
<span class="highlight_media">
<img class="highlight_image" srcset="https://images.fastspot.com/merced/980x654/ 980w, https://images.fastspot.com/merced/740x494/ 740w" src="https://images.fastspot.com/merced/740x494/" alt="" loading="lazy" width="740" height="494">
</span>
<figcaption class="highlight_figcaption">
<span class="highlight_figcaption_inner">
<span class="highlight_discovery">
<a href="#" class="highlight_link">
<span class="highlight_link_inner">
<span class="highlight_link_label">Basic Needs Center</span>
<span class="highlight_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a> </span>
<span class="highlight_description">The center is a one-stop, single location for students to access basic needs and get the help they need.</span>
</span>
</figcaption>
</figure>
<div class="highlight_teasers" aria-hidden="true">
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Next</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Previous</div>
</div>
<div class="highlight_teaser_title">Basic Needs Center</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
{%
set carousel_options = {
contained: false,
controls: true,
pagination: true,
theme: 'theme_dark'
}
%}
{% set carousel_options = carousel_options|json_encode %}
<!-- Card Group -->
<div class="highlights">
{% if title or description %}
<div class="highlights_header">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="highlights_header_inner">
{% if title %}
<h2 class="highlights_title">{{ title }}</h2>
{% endif %}
{% if description %}
<div class="highlights_description">
<p>{{ description }}</p>
</div>
{% endif %}
{% if link %}
<div class="highlights_discovery">
{% include '@component-link' with {
class: 'highlights',
title: link.title,
url: link.url,
icon: 'fa-regular fa-circle-chevron-right'
} %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="highlights_body">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="highlights_body_inner">
<div class="js-carousel highlights_carousel" data-carousel-options='{{ carousel_options }}'>
{% for item in items %}
<div class="highlight">
<figure class="highlight_figure" aria-hidden="true">
<span class="highlight_media">
{% include '@component-image' with {
class: 'highlight',
alt: '',
image: item.feature,
loading: 'lazy',
sources: [
img.classic.med,
img.classic.sml
]
} %}
</span>
<figcaption class="highlight_figcaption">
<span class="highlight_figcaption_inner">
<span class="highlight_discovery">
{% include '@component-link' with {
class: 'highlight',
title: item.title,
url: item.url,
icon: 'fa-regular fa-circle-chevron-right'
} %}
</span>
<span class="highlight_description">{{ item.description }}</span>
</span>
</figcaption>
</figure>
<div class="highlight_teasers" aria-hidden="true">
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Next</div>
</div>
<div class="highlight_teaser_title">{{ item.title }}</div>
</div>
<div class="highlight_teaser">
<div class="highlight_teaser_header">
<div class="highlight_teaser_switch">Previous</div>
</div>
<div class="highlight_teaser_title">{{ item.title }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
No notes defined.