<div class="featured_programs">
<div class="featured_programs_inner">
<div class="featured_programs_header">
<div class="js-background featured_programs_header_background" data-background-options='{"source": { "1220px": "//images.fastspot.com/jtcc/1440x1080/18", "740px": "//images.fastspot.com/jtcc/814x1220/18", "500px": "//images.fastspot.com/jtcc/980x654/18", "0px": "//images.fastspot.com/jtcc/494x740/18", "980px": "//images.fastspot.com/jtcc/915x1220/18"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="featured_programs_header_background_fallback" style="background-image: url(' //images.fastspot.com/jtcc/300x129/18');"></div>
</div>
<h2 class="featured_programs_title">
<span class="featured_programs_title_group featured_programs_title_group_primary">
<span class="featured_programs_title_label featured_programs_title_label_primary">What do <strong>you</strong></span>
</span>
<span class="featured_programs_title_group featured_programs_title_group_secondary">
<span class="featured_programs_title_label featured_programs_title_label_secondary">Want to study?</span>
</span>
</h2>
<form class="featured_programs_form">
<div class="featured_programs_input_wrapper">
<input class="featured_programs_input" id="featured_programs_input" type="search" placeholder="Search our Programs & Majors" aria-label="Search our Programs">
</div>
<button class="featured_programs_submit">
<span class="featured_programs_submit_label">Search</span>
<span class="featured_programs_submit_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</button>
</form>
</div>
<div class="featured_programs_content">
<div class="feature_programs_body">
<div class="featured_programs_body_details">
<h3 class="featured_programs_body_title"><strong>60+</strong> Majors in…</h3>
</div>
<ul class="featured_programs_items">
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">General Transfer</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Advanced Manufacturing, Architecture, Construction & Skilled Trades</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Arts & Communication</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Business, Management, Finance, Hospitality Management & Marketing</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Education</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Engineering, Computer Science & Natural Science</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Health Science</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Government, Human Services, Law & Public Safety</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_item">
<a href="#" class="featured_programs_item_link">
<span class="featured_programs_item_link_inner">
<span class="featured_programs_item_link_label">Information Technology</span>
<span class="featured_programs_item_link_icon" aria-hidden="true">
<span class="featured_programs_item_link_icon_inner">
<span class="featured_programs_item_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
</ul>
<div class="featured_programs_items_select_wrapper">
<!-- Menu Button -->
<div class="js-menu-item menu_item">
<button class="js-swap js-menu-trigger menu_trigger" aria-label="Open Menu" data-swap-target=".js-menu-item">
<span class="menu_trigger_label">Discover an Area of Interest</span>
<span class="menu_trigger_icon" aria-hidden="true">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</button>
<div class="js-menu-panel menu_panel">
<ul class="menu_panel_list">
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">General Transfer</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Advanced Manufacturing, Architecture, Construction & Skilled Trades</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Arts & Communication</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Business, Management, Finance, Hospitality Management & Marketing</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Education</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Engineering, Computer Science & Natural Science</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Health Science</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Government, Human Services, Law & Public Safety</span>
</a>
</li>
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">Information Technology</span>
</a>
</li>
</ul>
</div>
</div>
<!-- END: Menu Button -->
</div>
</div>
<div class="feature_programs_footer">
<div class="featured_programs_footer_details">
<h4 class="featured_programs_footer_title">Next Up</h4>
</div>
<ul class="featured_programs_actions">
<li class="featured_programs_action">
<a href="#" class="featured_programs_action_link">
<span class="featured_programs_action_link_inner">
<span class="featured_programs_action_link_label">Register for a Class</span>
<span class="featured_programs_action_link_icon" aria-hidden="true">
<span class="featured_programs_action_link_icon_inner">
<span class="featured_programs_action_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
<li class="featured_programs_action">
<a href="#" class="featured_programs_action_link">
<span class="featured_programs_action_link_inner">
<span class="featured_programs_action_link_label">Pay for a Class</span>
<span class="featured_programs_action_link_icon" aria-hidden="true">
<span class="featured_programs_action_link_icon_inner">
<span class="featured_programs_action_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="featured_programs">
<div class="featured_programs_inner">
<div class="featured_programs_header">
{% render "@partial-background" with {
class: "featured_programs_header",
image: image,
sources: {
'0px': img("portraitClassic").sml,
'500px': img("classic").med,
'740px': img("portraitClassic").lrg,
'1220px': img("full").xlrg
}
} %}
<h2 class="featured_programs_title">
<span class="featured_programs_title_group featured_programs_title_group_primary">
<span class="featured_programs_title_label featured_programs_title_label_primary">{{ title.primary }}</span>
</span>
<span class="featured_programs_title_group featured_programs_title_group_secondary">
<span class="featured_programs_title_label featured_programs_title_label_secondary">{{ title.secondary }}</span>
</span>
</h2>
<form class="featured_programs_form">
<div class="featured_programs_input_wrapper">
<input class="featured_programs_input" id="featured_programs_input" type="search" placeholder="Search our Programs & Majors" aria-label="Search our Programs">
</div>
<button class="featured_programs_submit">
<span class="featured_programs_submit_label">Search</span>
<span class="featured_programs_submit_icon">{{ icon("search") }}</span>
</button>
</form>
</div>
<div class="featured_programs_content">
<div class="feature_programs_body">
<div class="featured_programs_body_details">
<h3 class="featured_programs_body_title"><strong>60+</strong> Majors in…</h3>
</div>
<ul class="featured_programs_items">
{% for item in items %}
<li class="featured_programs_item">
{% render '@partial-link' with {
title: item.label,
url: "#",
class: "featured_programs_item",
icon: "caret_right"
} %}
</li>
{% endfor %}
</ul>
<div class="featured_programs_items_select_wrapper">
<!-- Menu Button -->
<div class="js-menu-item menu_item">
<button class="js-swap js-menu-trigger menu_trigger" aria-label="Open Menu" data-swap-target=".js-menu-item">
<span class="menu_trigger_label">Discover an Area of Interest</span>
<span class="menu_trigger_icon" aria-hidden="true">{{ icon("caret_down") }}</span>
</button>
<div class="js-menu-panel menu_panel">
<ul class="menu_panel_list">
{% for item in items %}
<li class="js-menu-panel-item menu_panel_item">
<a class="js-menu-panel-link menu_panel_link" href="#">
<span class="menu_panel_link_label">{{ item.label }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- END: Menu Button -->
</div>
</div>
<div class="feature_programs_footer">
<div class="featured_programs_footer_details">
<h4 class="featured_programs_footer_title">Next Up</h4>
</div>
<ul class="featured_programs_actions">
{% for action in actions %}
<li class="featured_programs_action">
{% render '@partial-link' with {
title: action.label,
url: "#",
class: "featured_programs_action",
icon: "caret_right"
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
No notes defined.