<div class="page_header_wrapper ">
    <div class="page_header">
        <div class="page_header_content">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="page_header_content_inner">
                        <div class="page_header_breadcrumb">

                            <div class="breadcrumb">
                                <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                    <div class="breadcrumb_nav_header">
                                        <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                    </div>
                                    <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                                        <li class="breadcrumb_item breadcrumb_item_home">
                                            <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                        <i class="fa-regular fa-regular fa-house"></i>
                                                    </span>
                                                    <span class="breadcrumb_pill_label">Home</span>
                                                </span>
                                            </a>
                                            <span class="breadcrumb_divider" aria-hidden="true"></span>
                                        </li>
                                        <li class="breadcrumb_item">
                                            <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_label">Navigation Level</span>
                                                </span>
                                            </a>
                                            <span class="breadcrumb_divider" aria-hidden="true"></span>
                                        </li>
                                        <li class="breadcrumb_item">
                                            <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_label">Parent Level</span>
                                                </span>
                                            </a>
                                            <span class="breadcrumb_divider" aria-hidden="true"></span>
                                        </li>
                                        <li class="breadcrumb_item">
                                            <span class="breadcrumb_pill">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_label"></span>
                                                </span>
                                            </span>
                                        </li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <div class="page_header_intro">
                            <h1 class="page_header_title" id="page_title" tabindex="-1">News</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_header_sole">
        <div class="page_header_teaser">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="page_header_teaser_inner">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">

    <!-- News Feature -->
    <div class="news_feature">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_feature_inner">
                    <div class="news_feature_header">
                        <h2 class="news_feature_title">The latest news from Merced College.</h2>
                    </div>
                    <ul class="news_feature_items" aria-label="The latest news from Merced College.">
                        <li class="news_feature_item">
                            <figure class="news_feature_item_figure">
                                <a class="news_feature_item_figure_link" href="#" aria-label="Read more about Line between work and life blurred long ago for Merced College alumnus" tabindex="-1">

                                    <img class="news_feature_item_image" srcset="https://images.fastspot.com/merced/980x735/1 980w, https://images.fastspot.com/merced/740x555/1 740w, https://images.fastspot.com/merced/500x375/1 500w, https://images.fastspot.com/merced/300x225/1 300w" src="https://images.fastspot.com/merced/300x225/1" alt="" loading="lazy" width="300" height="225">
                                </a>
                            </figure>
                            <div class="news_feature_item_wrapper">
                                <div class="news_feature_item_header">
                                    <h2 class="news_feature_item_title">

                                        <a href="#" class="news_feature_item_title_link">
                                            <span class="news_feature_item_title_link_inner">
                                                <span class="news_feature_item_title_link_label">Line between work and life blurred long ago for Merced College alumnus</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_feature_item_categories">
                                        <div class="news_feature_item_category_hint">Categories</div>
                                        <ul class="news_feature_item_category_list" aria-label="Categories">
                                            <li class="news_feature_item_category">
                                                <a class="news_feature_item_category_link" href="page-news-category.html">Alumni</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="news_feature_item_body">
                                    <div class="news_feature_item_details">
                                        <div class="news_feature_item_description">
                                            For California Highway Patrol Sergeant Luis Lara, success means living in his hometown with good health, a good family and a good job.
                                        </div>
                                        <div class="news_feature_item_detail">
                                            <span class="news_feature_item_detail_hint">Time:&nbsp;</span>
                                            <span class="news_feature_item_detail_label">
                                                April 02, 2024
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_feature_item">
                            <figure class="news_feature_item_figure">
                                <a class="news_feature_item_figure_link" href="#" aria-label="Read more about Puente Program molds students for academic success" tabindex="-1">

                                    <img class="news_feature_item_image" srcset="https://images.fastspot.com/merced/980x735/2 980w, https://images.fastspot.com/merced/740x555/2 740w, https://images.fastspot.com/merced/500x375/2 500w, https://images.fastspot.com/merced/300x225/2 300w" src="https://images.fastspot.com/merced/300x225/2" alt="" loading="lazy" width="300" height="225">
                                </a>
                            </figure>
                            <div class="news_feature_item_wrapper">
                                <div class="news_feature_item_header">
                                    <h2 class="news_feature_item_title">

                                        <a href="#" class="news_feature_item_title_link">
                                            <span class="news_feature_item_title_link_inner">
                                                <span class="news_feature_item_title_link_label">Puente Program molds students for academic success</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_feature_item_categories">
                                        <div class="news_feature_item_category_hint">Categories</div>
                                        <ul class="news_feature_item_category_list" aria-label="Categories">
                                            <li class="news_feature_item_category">
                                                <a class="news_feature_item_category_link" href="page-news-category.html">Careers</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="news_feature_item_body">
                                    <div class="news_feature_item_details">
                                        <div class="news_feature_item_detail">
                                            <span class="news_feature_item_detail_hint">Time:&nbsp;</span>
                                            <span class="news_feature_item_detail_label">
                                                April 02, 2024
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_feature_item">
                            <figure class="news_feature_item_figure">
                                <a class="news_feature_item_figure_link" href="#" aria-label="Read more about Culinary arts students doing brisk, tasty business on campus food truck" tabindex="-1">

                                    <img class="news_feature_item_image" srcset="https://images.fastspot.com/merced/980x735/3 980w, https://images.fastspot.com/merced/740x555/3 740w, https://images.fastspot.com/merced/500x375/3 500w, https://images.fastspot.com/merced/300x225/3 300w" src="https://images.fastspot.com/merced/300x225/3" alt="" loading="lazy" width="300" height="225">
                                </a>
                            </figure>
                            <div class="news_feature_item_wrapper">
                                <div class="news_feature_item_header">
                                    <h2 class="news_feature_item_title">

                                        <a href="#" class="news_feature_item_title_link">
                                            <span class="news_feature_item_title_link_inner">
                                                <span class="news_feature_item_title_link_label">Culinary arts students doing brisk, tasty business on campus food truck</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_feature_item_categories">
                                        <div class="news_feature_item_category_hint">Categories</div>
                                        <ul class="news_feature_item_category_list" aria-label="Categories">
                                            <li class="news_feature_item_category">
                                                <a class="news_feature_item_category_link" href="page-news-category.html">Announcements</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="news_feature_item_body">
                                    <div class="news_feature_item_details">
                                        <div class="news_feature_item_detail">
                                            <span class="news_feature_item_detail_hint">Time:&nbsp;</span>
                                            <span class="news_feature_item_detail_label">
                                                April 02, 2024
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_feature_item">
                            <figure class="news_feature_item_figure">
                                <a class="news_feature_item_figure_link" href="#" aria-label="Read more about Military experience led to meaningful career for MC alumnus" tabindex="-1">

                                    <img class="news_feature_item_image" srcset="https://images.fastspot.com/merced/980x735/4 980w, https://images.fastspot.com/merced/740x555/4 740w, https://images.fastspot.com/merced/500x375/4 500w, https://images.fastspot.com/merced/300x225/4 300w" src="https://images.fastspot.com/merced/300x225/4" alt="" loading="lazy" width="300" height="225">
                                </a>
                            </figure>
                            <div class="news_feature_item_wrapper">
                                <div class="news_feature_item_header">
                                    <h2 class="news_feature_item_title">

                                        <a href="#" class="news_feature_item_title_link">
                                            <span class="news_feature_item_title_link_inner">
                                                <span class="news_feature_item_title_link_label">Military experience led to meaningful career for MC alumnus</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_feature_item_categories">
                                        <div class="news_feature_item_category_hint">Categories</div>
                                        <ul class="news_feature_item_category_list" aria-label="Categories">
                                            <li class="news_feature_item_category">
                                                <a class="news_feature_item_category_link" href="page-news-category.html">Alumni</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="news_feature_item_body">
                                    <div class="news_feature_item_details">
                                        <div class="news_feature_item_detail">
                                            <span class="news_feature_item_detail_hint">Time:&nbsp;</span>
                                            <span class="news_feature_item_detail_label">
                                                April 02, 2024
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_feature_item">
                            <figure class="news_feature_item_figure">
                                <a class="news_feature_item_figure_link" href="#" aria-label="Read more about Win-win: Host families, foreign exchange students share languages, cultures, friendship" tabindex="-1">

                                    <img class="news_feature_item_image" srcset="https://images.fastspot.com/merced/980x735/1 980w, https://images.fastspot.com/merced/740x555/1 740w, https://images.fastspot.com/merced/500x375/1 500w, https://images.fastspot.com/merced/300x225/1 300w" src="https://images.fastspot.com/merced/300x225/1" alt="" loading="lazy" width="300" height="225">
                                </a>
                            </figure>
                            <div class="news_feature_item_wrapper">
                                <div class="news_feature_item_header">
                                    <h2 class="news_feature_item_title">

                                        <a href="#" class="news_feature_item_title_link">
                                            <span class="news_feature_item_title_link_inner">
                                                <span class="news_feature_item_title_link_label">Win-win: Host families, foreign exchange students share languages, cultures, friendship</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_feature_item_categories">
                                        <div class="news_feature_item_category_hint">Categories</div>
                                        <ul class="news_feature_item_category_list" aria-label="Categories">
                                            <li class="news_feature_item_category">
                                                <a class="news_feature_item_category_link" href="page-news-category.html">Announcements</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="news_feature_item_body">
                                    <div class="news_feature_item_details">
                                        <div class="news_feature_item_detail">
                                            <span class="news_feature_item_detail_hint">Time:&nbsp;</span>
                                            <span class="news_feature_item_detail_label">
                                                April 02, 2024
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END: News Feature -->

    <!-- Filter -->
    <div class="filter filter_light">
        <div class="filter_hat">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="filter_hat_inner">
                        <form class="filter_tools" action="#" method="get">
                            <div class="filter_tool">
                                <div class="filter_search">
                                    <label class="filter_label" for="filter_search_input">Search</label>
                                    <div class="filter_search_form">
                                        <input class="filter_search_input" id="filter_search_input" type="search" placeholder="Search by keyword">
                                        <span class="filter_search_icon">
                                            <i class="fa-regular fa-magnifying-glass"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="filter_tool">
                                <label class="filter_label" for="filter_tool_label_1">Categories</label>
                                <div class="filter_tool_select_wrapper">
                                    <select class="filter_tool_select" id="filter_tool_label_1">
                                        <option value="All Categories">All Categories</option>
                                        <option value="Category One">Category One</option>
                                        <option value="Another Category">Another Category</option>
                                    </select>
                                    <span class="filter_tool_select_icon">
                                        <i class="fa-regular fa-chevron-down"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="filter_tool">
                                <button class="filter_tools_submit" type="submit">
                                    <span class="filter_tools_submit_inner">
                                        <span class="filter_tools_submit_label">Submit</span>
                                        <span class="filter_tools_submit_icon">
                                            <i class="fa-regular fa-circle-chevron-right"></i>
                                        </span>
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Filter -->

    <!-- News List -->
    <div class="news_list">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_list_inner">
                    <ul class="news_list_rows" aria-label="">
                        <li class="news_list_row">
                            <div class="news_list_item">
                                <figure class="news_list_item_figure">
                                    <a class="news_list_item_figure_link" href="#" aria-label="Read more about Lorem ipsum dolor sit amet" tabindex="-1">

                                        <img class="news_list_item_image" srcset="https://images.fastspot.com/merced/740x555/1 740w, https://images.fastspot.com/merced/500x375/1 500w, https://images.fastspot.com/merced/300x225/1 300w" src="https://images.fastspot.com/merced/300x225/1" alt="" loading="lazy" width="300" height="225">
                                    </a>
                                </figure>
                                <div class="news_list_item_wrapper">
                                    <div class="news_list_item_header">
                                        <h2 class="news_list_item_title">

                                            <a href="#" class="news_list_item_title_link">
                                                <span class="news_list_item_title_link_inner">
                                                    <span class="news_list_item_title_link_label">Lorem ipsum dolor sit amet</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_list_item_categories">
                                            <div class="news_list_item_category_hint">Categories</div>
                                            <ul class="news_list_item_category_list" aria-label="Categories">
                                                <li class="news_list_item_category">
                                                    <a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="news_list_item_body">
                                        <div class="news_list_item_details">
                                            <div class="news_list_item_detail news_list_item_date">
                                                <span class="news_list_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">January 01, 2019</time>
                                            </div>
                                        </div>
                                        <div class="news_list_item_description">
                                            <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_list_row">
                            <div class="news_list_item">
                                <figure class="news_list_item_figure">
                                    <a class="news_list_item_figure_link" href="#" aria-label="Read more about Phasellus viverra nulla ut metus varius laoreet" tabindex="-1">

                                        <img class="news_list_item_image" srcset="https://images.fastspot.com/merced/740x555/2 740w, https://images.fastspot.com/merced/500x375/2 500w, https://images.fastspot.com/merced/300x225/2 300w" src="https://images.fastspot.com/merced/300x225/2" alt="" loading="lazy" width="300" height="225">
                                    </a>
                                </figure>
                                <div class="news_list_item_wrapper">
                                    <div class="news_list_item_header">
                                        <h2 class="news_list_item_title">

                                            <a href="#" class="news_list_item_title_link">
                                                <span class="news_list_item_title_link_inner">
                                                    <span class="news_list_item_title_link_label">Phasellus viverra nulla ut metus varius laoreet</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_list_item_categories">
                                            <div class="news_list_item_category_hint">Categories</div>
                                            <ul class="news_list_item_category_list" aria-label="Categories">
                                                <li class="news_list_item_category">
                                                    <a class="news_list_item_category_link" href="page-news-category.html">Category 2</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="news_list_item_body">
                                        <div class="news_list_item_details">
                                            <div class="news_list_item_detail news_list_item_date">
                                                <span class="news_list_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">January 01, 2019</time>
                                            </div>
                                        </div>
                                        <div class="news_list_item_description">
                                            <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_list_row">
                            <div class="news_list_item">
                                <div class="news_list_item_wrapper">
                                    <div class="news_list_item_header">
                                        <h2 class="news_list_item_title">

                                            <a href="#" class="news_list_item_title_link">
                                                <span class="news_list_item_title_link_inner">
                                                    <span class="news_list_item_title_link_label">Quisque rutrum</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_list_item_categories">
                                            <div class="news_list_item_category_hint">Categories</div>
                                            <ul class="news_list_item_category_list" aria-label="Categories">
                                                <li class="news_list_item_category">
                                                    <a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
                                                </li>
                                                <li class="news_list_item_category">
                                                    <a class="news_list_item_category_link" href="page-news-category.html">Category 2</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="news_list_item_body">
                                        <div class="news_list_item_details">
                                            <div class="news_list_item_detail news_list_item_date">
                                                <span class="news_list_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">January 01, 2019</time>
                                            </div>
                                        </div>
                                        <div class="news_list_item_description">
                                            <p>Vestibulum purus quam, 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, 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</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_list_row">
                            <div class="news_list_item">
                                <figure class="news_list_item_figure">
                                    <a class="news_list_item_figure_link" href="#" aria-label="Read more about Maecenas" tabindex="-1">

                                        <img class="news_list_item_image" srcset="https://images.fastspot.com/merced/740x555/3 740w, https://images.fastspot.com/merced/500x375/3 500w, https://images.fastspot.com/merced/300x225/3 300w" src="https://images.fastspot.com/merced/300x225/3" alt="" loading="lazy" width="300" height="225">
                                    </a>
                                </figure>
                                <div class="news_list_item_wrapper">
                                    <div class="news_list_item_header">
                                        <h2 class="news_list_item_title">

                                            <a href="#" class="news_list_item_title_link">
                                                <span class="news_list_item_title_link_inner">
                                                    <span class="news_list_item_title_link_label">Maecenas</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_list_item_categories">
                                            <div class="news_list_item_category_hint">Categories</div>
                                            <ul class="news_list_item_category_list" aria-label="Categories">
                                                <li class="news_list_item_category">
                                                    <a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="news_list_item_body">
                                        <div class="news_list_item_details">
                                            <div class="news_list_item_detail news_list_item_date">
                                                <span class="news_list_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">January 01, 2019</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_list_row">
                            <div class="news_list_item">
                                <figure class="news_list_item_figure">
                                    <a class="news_list_item_figure_link" href="#" aria-label="Read more about In enim justo, rhoncus ut, imperdiet a" tabindex="-1">

                                        <img class="news_list_item_image" srcset="https://images.fastspot.com/merced/740x555/4 740w, https://images.fastspot.com/merced/500x375/4 500w, https://images.fastspot.com/merced/300x225/4 300w" src="https://images.fastspot.com/merced/300x225/4" alt="" loading="lazy" width="300" height="225">
                                    </a>
                                </figure>
                                <div class="news_list_item_wrapper">
                                    <div class="news_list_item_header">
                                        <h2 class="news_list_item_title">

                                            <a href="#" class="news_list_item_title_link">
                                                <span class="news_list_item_title_link_inner">
                                                    <span class="news_list_item_title_link_label">In enim justo, rhoncus ut, imperdiet a</span>
                                                </span>
                                            </a>
                                        </h2>
                                    </div>
                                    <div class="news_list_item_body">
                                        <div class="news_list_item_details">
                                            <div class="news_list_item_detail news_list_item_date">
                                                <span class="news_list_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">January 01, 2019</time>
                                            </div>
                                        </div>
                                        <div class="news_list_item_description">
                                            <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_list_row">
                            <div class="news_list_item">
                                <figure class="news_list_item_figure">
                                    <a class="news_list_item_figure_link" href="#" aria-label="Read more about Cras ultricies" tabindex="-1">

                                        <img class="news_list_item_image" srcset="https://images.fastspot.com/merced/740x555/1 740w, https://images.fastspot.com/merced/500x375/1 500w, https://images.fastspot.com/merced/300x225/1 300w" src="https://images.fastspot.com/merced/300x225/1" alt="" loading="lazy" width="300" height="225">
                                    </a>
                                </figure>
                                <div class="news_list_item_wrapper">
                                    <div class="news_list_item_header">
                                        <h2 class="news_list_item_title">

                                            <a href="#" class="news_list_item_title_link">
                                                <span class="news_list_item_title_link_inner">
                                                    <span class="news_list_item_title_link_label">Cras ultricies</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_list_item_categories">
                                            <div class="news_list_item_category_hint">Categories</div>
                                            <ul class="news_list_item_category_list" aria-label="Categories">
                                                <li class="news_list_item_category">
                                                    <a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="news_list_item_body">
                                        <div class="news_list_item_details">
                                            <div class="news_list_item_detail news_list_item_date">
                                                <span class="news_list_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">January 01, 2019</time>
                                            </div>
                                        </div>
                                        <div class="news_list_item_description">
                                            <p>Vestibulum purus quam, 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</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>

                    <!-- Pagination -->
                    <div class="pagination">
                        <nav class="pagination_nav" aria-label="News Pagination">
                            <a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
                                <span class="pagination_arrow_icon">
                                    <i class="fa-regular fa-chevron-left"></i>
                                </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">
                                    <i class="fa-regular fa-chevron-right"></i>
                                </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">
                                        <i class="fa-regular fa-chevron-down"></i>
                                    </span>
                                </div>
                                <span class="pagination_form_suffix">of 50</span>
                                <button class="pagination_form_button" type="submit" aria-label="View Page">
                                    <span class="pagination_form_button_icon">
                                        <i class="fa-regular fa-circle-chevron-right"></i>
                                    </span>
                                    <span class="pagination_form_button_label">Go</span>
                                </button>
                            </div>
                        </form>
                    </div>
                    <!-- END: Pagination -->
                </div>
            </div>
        </div>
    </div>
    <!-- END: News List -->

    <!-- People List -->
    <div class="people_list people_list_contained">
        <div class="people_list_header">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="people_list_header_inner">
                        <h2 class="people_list_title">Contact Us</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="fs-row">
            <div class="fs-cell">
                <div class="people_list_inner">
                    <ul class="people_list_items" id="item_list" aria-label="Contact Us">
                        <li class="people_list_item">

                            <div class="people_item has_social_links">
                                <div class="people_item_header">
                                    <div class="people_item_info">
                                        <h2 class="people_item_name">
                                            Department or Office Name
                                        </h2>
                                        <div class="people_item_extras">
                                            <div class="people_item_title">In enim justo</div>
                                            <div class="people_item_division">Economic/Workforce Dev. & Adult Ed.</div>
                                        </div>
                                    </div>
                                    <figure class="people_item_figure">

                                        <img class="people_item_image" srcset="https://images.fastspot.com/merced/300x300/1 300w, https://images.fastspot.com/merced/100x100/1 100w" src="https://images.fastspot.com/merced/100x100/1" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                </div>
                                <div class="people_item_body">
                                    <div class="people_item_details">
                                        <div class="people_item_detail">
                                            <div class="people_item_detail_item">
                                                <div class="people_item_detail_info people_item_detail_info_phone">
                                                    <a class="people_item_detail_info_link" href="tel:4105551234">
                                                        <div class="people_item_detail_icon">
                                                            <i class="fa-regular fa-phone"></i>
                                                        </div>
                                                        <span class="people_item_detail_info_label">(410) 555-1234</span>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="people_item_detail_item">
                                                <div class="people_item_detail_info people_item_detail_info_email">
                                                    <a class="people_item_detail_info_link" href="mailto:name@university.edu">
                                                        <div class="people_item_detail_icon">
                                                            <i class="fa-regular fa-envelope"></i>
                                                        </div>
                                                        <span class="people_item_detail_info_label">name@university.edu</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="people_item_detail">
                                            <div class="people_item_detail_item">
                                                <div class="people_item_detail_info people_item_detail_info_location">
                                                    <a class="people_item_detail_info_link" href=#>
                                                        <div class="people_item_detail_icon">
                                                            <i class="fa-regular fa-location-dot"></i>
                                                        </div>
                                                        <span class="people_item_detail_info_label">Merced Campus</span>
                                                    </a>
                                                </div>
                                                <div class="people_item_detail_info people_item_detail_info_room">
                                                    <span class="people_item_detail_info_label">Room 214</span>
                                                </div>
                                                <div class="people_item_detail_info people_item_detail_info_mailstop">
                                                    <span class="people_item_detail_info_label">Mailstop 10</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="people_item_detail">
                                            <ul class="people_item_social_list">
                                                <li class="people_item_social_item">
                                                    <a class="people_item_social_link people_item_social_link_instagram" href="//www.instagram.com" target="_blank" rel="noopener">
                                                        <span class="people_item_social_icon">
                                                            <i class="fa-brands fa-instagram"></i>
                                                        </span>
                                                        <span class="people_item_social_label">Instagram</span>
                                                    </a>
                                                </li>
                                                <li class="people_item_social_item">
                                                    <a class="people_item_social_link people_item_social_link_facebook" href="//www.facebook.com" target="_blank" rel="noopener">
                                                        <span class="people_item_social_icon">
                                                            <i class="fa-brands fa-facebook"></i>
                                                        </span>
                                                        <span class="people_item_social_label">Facebook</span>
                                                    </a>
                                                </li>
                                                <li class="people_item_social_item">
                                                    <a class="people_item_social_link people_item_social_link_twitter" href="//www.twitter.com" target="_blank" rel="noopener">
                                                        <span class="people_item_social_icon">
                                                            <i class="fa-brands fa-twitter"></i>
                                                        </span>
                                                        <span class="people_item_social_label">Twitter</span>
                                                    </a>
                                                </li>
                                                <li class="people_item_social_item">
                                                    <a class="people_item_social_link people_item_social_link_linkedin" href="//www.linkedin.com" target="_blank" rel="noopener">
                                                        <span class="people_item_social_icon">
                                                            <i class="fa-brands fa-linkedin"></i>
                                                        </span>
                                                        <span class="people_item_social_label">Linkedin</span>
                                                    </a>
                                                </li>
                                                <li class="people_item_social_item">
                                                    <a class="people_item_social_link people_item_social_link_external" href="//www.external.com" target="_blank" rel="noopener">
                                                        <span class="people_item_social_icon">
                                                            <i class="fa-regular fa-link"></i>
                                                        </span>
                                                        <span class="people_item_social_label">External</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END: People List -->
</div>
{% include '@component-page-header' with {
	page: page
} %}

<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
	{% render '@component-news-feature' %}

	{% include '@component-filter' with {
		theme: 'light',
		label: '',
		active: '',
		action_category: '#',
		action_search: '#',
		tools: [
			{
				label: 'Categories',
				options: [
					{
						label: 'All Categories'
					},
					{
						label: 'Category One'
					},
					{
						label: 'Another Category'
					}
				]
			}
		],
		search_placeholder: 'Search by keyword',
		results: '',
		category: ''
	} %}

	{% render '@component-news-list' %}

	{% include '@component-people-list' with {
		title: 'Contact Us',
		contained: true,
		items: [
			{
				name: 'Department or Office Name',
				title: 'In enim justo',
				url: 'page-directory-detail.html',
				image: '1',
				contact: {
					email: 'name@university.edu',
					phone: '(410) 555-1234'
				},
				location: {
					label: 'Merced Campus',
					url: '#'
				},
				department: {
					url: '#',
					label: 'Department'
				}
			}
		]
	} %}
</div>

No notes defined.