Merced Component Library

News Events 

<div class="news_events">
    <div class="news_events_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_events_header_inner">
                    <h2 class="news_events_title">What’s new</h2>
                    <div class="news_events_discoveries news_events_discoveries_lg">
                        <div class="news_events_discovery">

                            <a href="#" class="news_events_link">
                                <span class="news_events_link_inner">
                                    <span class="news_events_link_label">Upcoming Events</span>
                                    <span class="news_events_link_icon" aria-hidden="true">
                                        <i class="fa-regular fa-circle-chevron-right"></i>
                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="news_events_discovery">

                            <a href="#" class="news_events_link">
                                <span class="news_events_link_inner">
                                    <span class="news_events_link_label">Latest News</span>
                                    <span class="news_events_link_icon" aria-hidden="true">
                                        <i class="fa-regular fa-circle-chevron-right"></i>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="js-carousel news_events_items" aria-label="What’s new" data-carousel-options='{"contained":false,"controls":false,"pagination":false,"show":{"500px":2,"980px":3}}'>
                <div class="news_events_item">
                    <figure class="news_events_item_figure">
                        <a class="news_events_item_figure_link" href="page-news-detail.html" aria-label="Read more about Military experience led to meaningful career for MC alumnus" tabindex="-1">

                            <img class="news_item_image" srcset="https://images.fastspot.com/merced/555x740/1 555w, https://images.fastspot.com/merced/375x500/1 375w" src="https://images.fastspot.com/merced/375x500/1" alt="" loading="lazy" width="375" height="500">
                        </a>
                    </figure>
                    <div class="news_events_item_wrapper">
                        <div class="news_events_item_header">
                            <h2 class="news_events_item_title">

                                <a href="page-news-detail.html" class="news_events_item_title_link">
                                    <span class="news_events_item_title_link_inner">
                                        <span class="news_events_item_title_link_label">Military experience led to meaningful career for MC alumnus</span>
                                    </span>
                                </a>
                            </h2>
                            <div class="news_events_item_type">
                                <span class="news_events_item_type_icon">
                                    <i class="fa-regular fa-newspaper"></i>
                                </span>
                                <span class="news_events_item_type_label">News</span>
                            </div>
                        </div>
                        <div class="news_events_item_body">
                            <div class="news_events_item_details">
                                <div class="news_events_item_detail">
                                    <span class="news_events_item_detail_hint">Time:&nbsp;</span>
                                    <span class="news_events_item_detail_label">
                                        May 31, 2017
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="news_events_item">
                    <figure class="news_events_item_figure">
                        <a class="news_events_item_figure_link" href="page-news-detail.html" aria-label="Read more about Class of 2022 Graduation Ceremony" tabindex="-1">

                            <img class="news_item_image" srcset="https://images.fastspot.com/merced/555x740/2 555w, https://images.fastspot.com/merced/375x500/2 375w" src="https://images.fastspot.com/merced/375x500/2" alt="" loading="lazy" width="375" height="500">
                        </a>
                    </figure>
                    <div class="news_events_item_wrapper">
                        <div class="news_events_item_header">
                            <h2 class="news_events_item_title">

                                <a href="page-news-detail.html" class="news_events_item_title_link">
                                    <span class="news_events_item_title_link_inner">
                                        <span class="news_events_item_title_link_label">Class of 2022 Graduation Ceremony</span>
                                    </span>
                                </a>
                            </h2>
                            <div class="news_events_item_type">
                                <span class="news_events_item_type_icon">
                                    <i class="fa-regular fa-calendar-days"></i>
                                </span>
                                <span class="news_events_item_type_label">Events</span>
                            </div>
                        </div>
                        <div class="news_events_item_body">
                            <div class="news_events_item_details">
                                <div class="news_events_item_detail">
                                    <span class="news_events_item_detail_hint">Time:&nbsp;</span>
                                    <span class="news_events_item_detail_label">
                                        May 31, 2017
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="news_events_item">
                    <figure class="news_events_item_figure">
                        <a class="news_events_item_figure_link" href="page-news-detail.html" aria-label="Read more about Upcoming Priority Registration Deadline: May 22" tabindex="-1">

                            <img class="news_item_image" srcset="https://images.fastspot.com/merced/555x740/3 555w, https://images.fastspot.com/merced/375x500/3 375w" src="https://images.fastspot.com/merced/375x500/3" alt="" loading="lazy" width="375" height="500">
                        </a>
                    </figure>
                    <div class="news_events_item_wrapper">
                        <div class="news_events_item_header">
                            <h2 class="news_events_item_title">

                                <a href="page-news-detail.html" class="news_events_item_title_link">
                                    <span class="news_events_item_title_link_inner">
                                        <span class="news_events_item_title_link_label">Upcoming Priority Registration Deadline: May 22</span>
                                    </span>
                                </a>
                            </h2>
                            <div class="news_events_item_type">
                                <span class="news_events_item_type_icon">
                                    <i class="fa-regular fa-newspaper"></i>
                                </span>
                                <span class="news_events_item_type_label">News</span>
                            </div>
                        </div>
                        <div class="news_events_item_body">
                            <div class="news_events_item_details">
                                <div class="news_events_item_detail">
                                    <span class="news_events_item_detail_hint">Time:&nbsp;</span>
                                    <span class="news_events_item_detail_label">
                                        May 31, 2017
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news_events_discoveries news_events_discoveries_sm">
                <div class="news_events_discovery">

                    <a href="#" class="news_events_link">
                        <span class="news_events_link_inner">
                            <span class="news_events_link_label">Upcoming Events</span>
                            <span class="news_events_link_icon" aria-hidden="true">
                                <i class="fa-regular fa-circle-chevron-right"></i>
                            </span>
                        </span>
                    </a>
                </div>
                <div class="news_events_discovery">

                    <a href="#" class="news_events_link">
                        <span class="news_events_link_inner">
                            <span class="news_events_link_label">Latest News</span>
                            <span class="news_events_link_icon" aria-hidden="true">
                                <i class="fa-regular fa-circle-chevron-right"></i>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
{%
	set carousel_options = {
		contained: false,
		controls: false,
    pagination: false,
		show: {
			'500px': 2,
			'980px': 3
		}
	}
%}

{% set carousel_options = carousel_options|json_encode %}

<div class="news_events">
	<div class="news_events_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_events_header_inner">
					{% if title %}
						<h2 class="news_events_title">{{ title }}</h2>
					{% endif %}
					<div class="news_events_discoveries news_events_discoveries_lg">
						<div class="news_events_discovery">
							{% include '@component-link' with {
								class: 'news_events',
								title: 'Upcoming Events',
								url: '#',
								icon: 'fa-regular fa-circle-chevron-right'
							} %}
						</div>
						<div class="news_events_discovery">
							{% include '@component-link' with {
								class: 'news_events',
								title: 'Latest News',
								url: '#',
								icon: 'fa-regular fa-circle-chevron-right'
							} %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="js-carousel news_events_items" aria-label="{% if title %}{{ title }}{% else %}What's New{% endif %}" data-carousel-options='{{ carousel_options }}'>
				{% for item in items %}
					<div class="news_events_item">
						{% if item.image %}
							<figure class="news_events_item_figure">
								{% if item.url %}
									<a class="news_events_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
								{% endif %}
								{% include '@component-image' with {
									class: 'news_item',
									alt: '',
									image: item.image,
									loading: 'lazy',
									sources: [
										img.portraitFull.sml,
										img.portraitFull.xsml
									]
								} %}
								{% if item.url %}
									</a>
								{% endif %}
							</figure>
						{% endif %}
						<div class="news_events_item_wrapper">
							<div class="news_events_item_header">
								<h2 class="news_events_item_title">
									{% if item.url %}
										{% include '@component-link' with {
											class: 'news_events_item_title',
											title: item.title,
											url: item.url
										} %}
									{% else %}
										{{ item.title }}
									{% endif %}
								</h2>
								<div class="news_events_item_type">
									<span class="news_events_item_type_icon">
										{% if item.type|lower == 'news' %}
											<i class="fa-regular fa-newspaper"></i>
										{% else %}
											<i class="fa-regular fa-calendar-days"></i>
										{% endif %}
									</span>
									<span class="news_events_item_type_label">{{ item.type }}</span>
								</div>
							</div>
							<div class="news_events_item_body">
								<div class="news_events_item_details">
									<div class="news_events_item_detail">
										<span class="news_events_item_detail_hint">Time:&nbsp;</span>
										<span class="news_events_item_detail_label">
											{{ item.date.from.begin|date('M d, Y') }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
			<div class="news_events_discoveries news_events_discoveries_sm">
				<div class="news_events_discovery">
					{% include '@component-link' with {
						class: 'news_events',
						title: 'Upcoming Events',
						url: '#',
						icon: 'fa-regular fa-circle-chevron-right'
					} %}
				</div>
				<div class="news_events_discovery">
					{% include '@component-link' with {
						class: 'news_events',
						title: 'Latest News',
						url: '#',
						icon: 'fa-regular fa-circle-chevron-right'
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.