<div class="
page_header
" id="page_header">
<div class="page_header_inner">
<div class="page_header_group">
<div class="page_header_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_breadcrumb_inner">
<div class="
breadcrumb
" id="breadcrumb_2">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_2_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_2_nav_title">
You are here:
</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_2_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="breadcrumb_pill_label">
Home
</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
Program Listing
</span>
</span>
</span>
<span class="breadcrumb_end" aria-hidden="true">
<svg class="icon icon_angle_down">
<use href="/images/icons.svg#angle_down" />
</svg>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_header_intro_inner">
<h1 class="page_header_title" id="page_header_title" tabindex="-1">
Program Listing
</h1>
<p class="page_header_description">
Dis facilisis tellus ultricies vestibulum cubilia risus, blandit commodo hac ut posuere ex cursus, class libero imperdiet nullam odio.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="full_width_components" id="full_width_components" tabindex="-1" aria-labelledby="page_header_title">
<!-- Filter -->
<div class="filter" id="filter_1">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_inner">
<form class="filter_form" action="#" method="get">
<div class="filter_form_item filter_form_item_select">
<label class="filter_form_item_label" for="filter_form_item_select_1">
Degree Level
</label>
<div class="filter_form_item_select_wrapper">
<select class="filter_form_item_select" id="filter_form_item_select_1">
<option value="All Degree Levels">
All Degree Levels
</option>
<option value="Associate">
Associate
</option>
<option value="Bachelor's">
Bachelor's
</option>
<option value="Master's">
Master's
</option>
<option value="Doctoral">
Doctoral
</option>
<option value="Professional">
Professional
</option>
</select>
<span class="filter_form_item_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
</div>
<div class="filter_form_item filter_form_item_select">
<label class="filter_form_item_label" for="filter_form_item_select_2">
Degree Type
</label>
<div class="filter_form_item_select_wrapper">
<select class="filter_form_item_select" id="filter_form_item_select_2">
<option value="All Degree Types">
All Degree Types
</option>
<option value="Undergraduate">
Undergraduate
</option>
<option value="Graduate">
Graduate
</option>
<option value="Doctoral & Professional">
Doctoral & Professional
</option>
</select>
<span class="filter_form_item_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
</div>
<div class="filter_form_item filter_form_item_select">
<label class="filter_form_item_label" for="filter_form_item_select_3">
Learning Mode
</label>
<div class="filter_form_item_select_wrapper">
<select class="filter_form_item_select" id="filter_form_item_select_3">
<option value="All Learning Modes">
All Learning Modes
</option>
<option value="On-campus">
On-campus
</option>
<option value="Online">
Online
</option>
<option value="Hybrid">
Hybrid
</option>
</select>
<span class="filter_form_item_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
</div>
<div class="filter_form_item filter_form_item_select">
<label class="filter_form_item_label" for="filter_form_item_select_4">
Department
</label>
<div class="filter_form_item_select_wrapper">
<select class="filter_form_item_select" id="filter_form_item_select_4">
<option value="All Departments">
All Departments
</option>
<option value="Arts & Humanities">
Arts & Humanities
</option>
<option value="Sciences">
Sciences
</option>
<option value="Engineering & Technology">
Engineering & Technology
</option>
<option value="Social Sciences">
Social Sciences
</option>
<option value="Business & Management">
Business & Management
</option>
<option value="Health & Medicine">
Health & Medicine
</option>
<option value="Education">
Education
</option>
<option value="Law & Legal Studies">
Law & Legal Studies
</option>
<option value="Agriculture & Environmental Studies">
Agriculture & Environmental Studies
</option>
</select>
<span class="filter_form_item_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
</div>
<div class="filter_form_item filter_form_item_search">
<label class="filter_form_item_label" for="filter_form_item_search_input">
Search
</label>
<div class="filter_form_item_search_wrapper">
<input class="filter_form_item_search_input" id="filter_form_item_search_input" placeholder="Search by program name" type="search">
</div>
</div>
<div class="filter_form_item filter_form_item_action">
<div class="filter_form_item_submit">
<button class="
button_filled
button_filled_large
" type="submit">
<span class="button_filled_inner">
<span class="button_filled_label">Submit</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
<!-- Program List -->
<div class="program_list" id="program_list_1" data-js-accordion>
<div class="fs-row">
<div class="fs-cell">
<div class="program_list_inner">
<div class="program_list_items">
<div class="program_list_item" id="program_list_1_item_1" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_1_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_1" aria-controls="program_list_1_item_1_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_1_button_title">
Donec pede justo
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On-campus, Online
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_1_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_1_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. <a href="#">Etiam ultricies</a> nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, <strong>tellus eget condimentum</strong> rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_1_link" aria-labelledby="program_list_1_item_1_button_title program_list_1_item_1_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Business Administration
</span>
</span>
</a> </span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree:
</span>
<span class="program_list_item_detail_data">
B.S., B.A.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_2" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_2_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_2" aria-controls="program_list_1_item_2_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_2_button_title">
Vestibulum purus quam, scelerisque ut, mollis sed
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
Hybrid
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_2_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_2_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p><em>Vestibulum purus quam</em>, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. <a href="#">Nam pretium turpis et arcu</a>. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_2_link" aria-labelledby="program_list_1_item_2_button_title program_list_1_item_2_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Partnership Program
</span>
</span>
</a> </span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree:
</span>
<span class="program_list_item_detail_data">
Certificate
</span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_3" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_3_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_3" aria-controls="program_list_1_item_3_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_3_button_title">
Donec pede justo
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On Campus
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_3_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_3_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p>Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_3_link" aria-labelledby="program_list_1_item_3_button_title program_list_1_item_3_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree:
</span>
<span class="program_list_item_detail_data">
B.A.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_4" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_4_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_4" aria-controls="program_list_1_item_4_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_4_button_title">
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On Campus
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_4_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_4_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p>In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_4_link" aria-labelledby="program_list_1_item_4_button_title program_list_1_item_4_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Sociology & Criminology
</span>
</span>
</a> </span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree:
</span>
<span class="program_list_item_detail_data">
B.A.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_5" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_5_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_5" aria-controls="program_list_1_item_5_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_5_button_title">
Etiam imperdiet
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On Campus
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_5_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_5_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_5_link" aria-labelledby="program_list_1_item_5_button_title program_list_1_item_5_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Languages, Literatures & Cultures
</span>
</span>
</a> </span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_6" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_6_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_6" aria-controls="program_list_1_item_6_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_6_button_title">
Sed lectus
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On Campus
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_6_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_6_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p></p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_6_link" aria-labelledby="program_list_1_item_6_button_title program_list_1_item_6_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Interdisciplinary
</span>
</span>
</a> </span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_7" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_7_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_7" aria-controls="program_list_1_item_7_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_7_button_title">
Vestibulum volutpat pretium
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On Campus
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_7_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_7_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_7_link" aria-labelledby="program_list_1_item_7_button_title program_list_1_item_7_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Chemistry
</span>
</span>
</a> </span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree:
</span>
<span class="program_list_item_detail_data">
B.S.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_item" id="program_list_1_item_8" data-js-accordion-item>
<h2 class="program_list_item_heading">
<button class="program_list_item_button" id="program_list_1_item_8_button" data-js-swap data-js-accordion-swap data-swap-target="#program_list_1_item_8" aria-controls="program_list_1_item_8_content" aria-expanded="false">
<span class="program_list_item_button_inner">
<span class="program_list_item_button_label">
<span class="program_list_item_button_title" id="program_list_1_item_8_button_title">
Cras dapibus
</span>
<span class="program_list_item_button_mode">
<span class="program_list_item_button_mode_label">
Learning Mode:
</span>
<span class="program_list_item_button_mode_data">
On Campus
</span>
</span>
</span>
<span class="program_list_item_button_icon"></span>
</span>
</button>
</h2>
<div class="program_list_item_content" id="program_list_1_item_8_content" data-js-accordion-content role="region" aria-labelledby="program_list_1_item_8_button">
<div class="program_list_item_content_inner">
<div class="program_list_item_content_group">
<div class="program_list_item_description typography">
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
<div class="program_list_item_link">
<a class="
button_filled
" id="program_list_1_item_8_link" aria-labelledby="program_list_1_item_8_button_title program_list_1_item_8_link" href="#">
<span class="button_filled_inner">
<span class="button_filled_label">
Program Detail
</span>
</span>
</a>
</div>
</div>
<div class="program_list_item_details">
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree Level:
</span>
<span class="program_list_item_detail_data">
Undergraduate
</span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Department:
</span>
<span class="program_list_item_detail_data">
<a class="
program_list_item_detail_data_link
" href="#">
<span class="program_list_item_detail_data_link_inner">
<span class="program_list_item_detail_data_link_label">
Biology
</span>
</span>
</a> </span>
</div>
<div class="program_list_item_detail">
<span class="program_list_item_detail_label">
Degree:
</span>
<span class="program_list_item_detail_data">
B.S., B.A.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="program_list_pagination">
<!-- Pagination -->
<div class="pagination" id="pagination_1">
<h2 class="pagination_title" id="pagination_1_title">
Programs Pagination
</h2>
<div class="pagination_body">
<nav class="pagination_nav" aria-labelledby="pagination_1_title">
<div class="pagination_nav_control pagination_nav_control_previous">
<a class="
pagination_link
pagination_link_disabled
" id="pagination_1link_previous" aria-labelledby="pagination_1_title pagination_1link_previous" href="#">
<span class="pagination_link_inner">
<span class="pagination_link_label">
Previous Page
</span>
<span class="pagination_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
</span>
</a>
</div>
<div class="pagination_nav_control pagination_nav_control_next">
<a class="
pagination_link
" id="pagination_1link_next" aria-labelledby="pagination_1_title pagination_1link_next" href="#">
<span class="pagination_link_inner">
<span class="pagination_link_label">
Next Page
</span>
<span class="pagination_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</nav>
<form class="pagination_form" action="#" method="get">
<div class="pagination_form_inner">
<label class="pagination_form_label" for="pagination_1_form_select">
Page
</label>
<div class="pagination_form_select_wrapper">
<select class="pagination_form_select" id="pagination_1_form_select" name="page">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
<span class="pagination_form_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
<span class="pagination_form_suffix">
of 50
</span>
<div class="pagination_form_submit">
<button class="
button_filled
" type="submit">
<span class="button_filled_inner">
<span class="button_filled_label">Go</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Program List -->
</section>
{% include '@component-page-header' with {
page: page
} %}
<section
class="full_width_components"
id="full_width_components"
tabindex="-1"
aria-labelledby="page_header_title"
>
{% render '@component-filter' with {
search_placeholder: 'Search by program name',
selects: [
{
label: 'Degree Level',
options: [
{
title: 'All Degree Levels'
},
{
title: 'Associate'
},
{
title: 'Bachelor\'s'
},
{
title: 'Master\'s'
},
{
title: 'Doctoral'
},
{
title: 'Professional'
}
]
},
{
label: 'Degree Type',
options: [
{
title: 'All Degree Types'
},
{
title: 'Undergraduate'
},
{
title: 'Graduate'
},
{
title: 'Doctoral & Professional'
}
]
},
{
label: 'Learning Mode',
options: [
{
title: 'All Learning Modes'
},
{
title: 'On-campus'
},
{
title: 'Online'
},
{
title: 'Hybrid'
}
]
},
{
label: 'Department',
options: [
{
title: 'All Departments'
},
{
title: 'Arts & Humanities'
},
{
title: 'Sciences'
},
{
title: 'Engineering & Technology'
},
{
title: 'Social Sciences'
},
{
title: 'Business & Management'
},
{
title: 'Health & Medicine'
},
{
title: 'Education'
},
{
title: 'Law & Legal Studies'
},
{
title: 'Agriculture & Environmental Studies'
}
]
}
]
} %}
{% render '@component-program-list' %}
</section>
No notes defined.