<!-- Program List -->
<div class="program_list">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="program_list_inner">
                <ul class="program_list_items" id="item_list" aria-labelledby="page_header_title">
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Accounting</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>Accounting has long been one of Stonehill’s most popular majors and one that attracts many of the Northeast’s best students.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Advanced Manufacturing & Integrated Photonics Certificate</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>The Certificate in Advanced Manufacturing & Integrated Photonics Program is a <a href="#">partnership initiative</a> designed to equip participants with the skills and experience needed to thrive in this burgeoning market.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">American Studies</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>The American Studies major symbolizes Stonehill’s commitment to interdisciplinary programs that foster deeper learning by examining topics from multiple perspectives. American Studies is an interdisciplinary endeavor to better understand the American nation, its cultures and the diverse histories of its peoples and communities. This broad approach helps students develop skills in critical inquiry, communication, cultural knowledge and self-reflection that in turn engender a desire to advance social justice.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. urabitur ullamcorper ultricies nisi</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>The anthropology program at Stonehill focuses on the holistic study and understanding of other cultures from an insider’s point of view and explores the diverse ways in which human beings perceive and order the social world.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Arabic</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>The Arabic Minor at Stonehill introduces students to the Modern Standard Arabic language as well as integrates aspects of Arabic history, culture, and contemporary events and issues. Minor can be combined with any number of majors, giving students a competitive advantage and unique set of skills. Minors are encouraged to study abroad, expanding their global knowledge and leadership. The study of languages, literatures and cultures is a cornerstone of the liberal arts education</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Asian Studies</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Biochemistry</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>Stonehill’s biochemistry program draws on the disciplines of biology and chemistry. It combines technical training and the liberal arts, resulting in superb scientists who are also well-rounded lifelong learners.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="program_item">
                        <div class="program_item_inner">
                            <div class="program_item_button">
                                <span class="program_item_heading_inner">
                                    <div class="program_item_col_grid">
                                        <div class="program_item_col_grid_item is_content">
                                            <div class="program_item_first_col_wrap">
                                                <h2 class="program_item_heading">
                                                    <span class="program_item_heading_title">Biology</span>
                                                </h2>
                                            </div>

                                            <div class="program_item_content">
                                                <div class="program_item_content_inner">
                                                    <div class="program_item_content_group">
                                                        <div class="program_item_first_col_wrap">
                                                            <div class="program_item_description typography">
                                                                <p>The Stonehill Biology Program prepares students for life sciences graduate programs and professional programs in medical, allied health and environmental fields. It also prepares graduates for direct entry into the workforce.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="program_item_col_grid_item is_meta_one">
                                            <span class="program_item_heading_meta">
                                                <span class="program_item_heading_meta_label">Programs</span>
                                                <span class="program_item_heading_meta_data">
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Laboris consequat labore
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            Cillum aliquip ullamco
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            ad excepteur dolor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            eu fugiat tempor
                                                        </a>
                                                    </div>
                                                    <div class="program_item_heading_meta_data_item">
                                                        <a class="program_item_heading_meta_link" href="#">
                                                            commodo ea Lorem
                                                        </a>
                                                    </div>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="program_list_pagination">

                    <!-- Pagination -->
                    <div class="pagination">
                        <div class="fs-row">
                            <div class="fs-cell fs-xl-11 fs-xl-justify-center">
                                <div class="pagination_inner">
                                    <nav class="pagination_nav" aria-label="Program Pagination">
                                        <a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
                                            <span class="pagination_arrow_icon"><svg class="icon icon_arrow_left">
                                                    <use href="/images/icons.svg#arrow_left" />
                                                </svg></span>
                                            <span class="pagination_arrow_label">Previous Page</span>
                                        </a>
                                        <a class="pagination_arrow pagination_arrow_right" href="#">
                                            <span class="pagination_arrow_label">Next Page</span>
                                            <span class="pagination_arrow_icon"><svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg></span>
                                        </a>
                                    </nav>
                                    <form class="pagination_form" action="#" method="get">
                                        <div class="pagination_form_inner">
                                            <label class="pagination_form_label" for="pagination_form_select">Page</label>
                                            <div class="pagination_form_select_wrapper">
                                                <select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
                                                    <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"><svg class="icon icon_expand">
                                                        <use href="/images/icons.svg#expand" />
                                                    </svg></span>
                                            </div>
                                            <span class="pagination_form_suffix">of 50</span>
                                            <button class="pagination_form_button" type="submit" aria-label="View Page">
                                                <div class="pagination_form_button_inner">
                                                    <div class="pagination_form_button_label">Go</div>
                                                    <div class="pagination_form_button_icon"><svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg></div>
                                                </div>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END: Pagination -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Program List -->
{#
	{% include '@partial-program-list' with {
		grouped: false,
		items: [
			{
				title: 'Title',
				description: 'Description',
				url: '#',
				mode: ['Mode'],
				level: ['Level'],
				department: {
					url: '#',
					label: 'Department'
				},
				degree: ['Degree']
			}
		]
	} %}
#}

{% set id = uniqid('js-program-item') %}
{% set group_id = uniqid('program-group') %}

<!-- Program List -->
<div class="program_list">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="program_list_inner">
				<ul class="program_list_items" id="item_list" aria-labelledby="page_header_title">
					{% for item in items %}
						<li class="program_item">
							<div class="program_item_inner">
								<div class="program_item_button">
									<span class="program_item_heading_inner">
										<div class="program_item_col_grid">
											<div class="program_item_col_grid_item is_content">
												<div class="program_item_first_col_wrap">
													<h2 class="program_item_heading">
														<span class="program_item_heading_title">{{ item.major_title }}</span>
													</h2>
												</div>

												<div class="program_item_content">
													<div class="program_item_content_inner">
														<div class="program_item_content_group">
															<div class="program_item_first_col_wrap">
																<div class="program_item_description typography">
																	<p>{{ item.description }}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="program_item_col_grid_item is_meta_one">
												<span class="program_item_heading_meta">
													<span class="program_item_heading_meta_label">Programs</span>
													<span class="program_item_heading_meta_data">
														{% for item in item.programs %}
															<div class="program_item_heading_meta_data_item">
																<a class="program_item_heading_meta_link" href="#">
																	{{ item }}
																</a>
															</div>
														{% endfor %}
													</span>
												</span>
											</div>
										</div>
									</span>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
				<div class="program_list_pagination">
					{% include '@partial-pagination' with {
						title: 'Program Pagination',
						pages: 50
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Program List -->

No notes defined.