News Events Carousel: Four Up

Ready

HTML
View
Info
Notes


        
        <div class="news_events_carousel">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="news_events_carousel_inner">
                <div class="news_events_carousel_header">
                    <h2 class="news_events_carousel_title">The Latest</h2>
                    <div class="news_events_carousel_description">
                        Explore the latest news and events at DRBU.
                    </div>
                    <div class="news_events_carousel_links news_events_carousel_links_lg">
                        <div class="news_events_carousel_link_item">

                            <a href="page-news.html" class="news_events_carousel_link">
                                <span class="news_events_carousel_link_inner">
                                    <span class="news_events_carousel_link_label">View All News</span>
                                    <span class="news_events_carousel_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="news_events_carousel_link_item">

                            <a href="page-events.html" class="news_events_carousel_link">
                                <span class="news_events_carousel_link_inner">
                                    <span class="news_events_carousel_link_label">View All Events</span>
                                    <span class="news_events_carousel_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="news_events_carousel_body">
                    <div class="js-carousel news_events_carousel_items" aria-label="The Latest" data-carousel-options='{"contained":false,"controls":false,"pagination":false}'>
                        <div class="news_events_carousel_item theme_deep_blue">
                            <div class="news_events_carousel_item_inner">
                                <figure class="js-rock news_events_carousel_item_figure">
                                    <a class="news_events_carousel_item_figure_link" href="page-news-detail.html" aria-label="Read more about Infinite Light Winter Recital to Benefit DVGS & DRBU" tabindex="-1">

                                        <picture class="news_item_picture">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x980/" width="980" height="980">
                                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <source media="(min-width: 0px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <img class="news_item_image" src="//images.fastspot.com/framework/x/" alt="" loading="lazy" width="" height="">
                                        </picture>
                                    </a>
                                </figure>
                                <div class="news_events_carousel_item_wrapper">
                                    <div class="news_events_carousel_item_header">
                                        <h2 class="news_events_carousel_item_title">

                                            <a href="page-news-detail.html" class="news_events_carousel_item_title_link">
                                                <span class="news_events_carousel_item_title_link_inner">
                                                    <span class="news_events_carousel_item_title_link_label">Infinite Light Winter Recital to Benefit DVGS & DRBU</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_events_carousel_item_details">
                                            <ul class="news_events_carousel_item_category_list" aria-label="Categories">
                                                <li class="news_events_carousel_item_category">
                                                    <a class="news_events_carousel_item_category_link" href="page-news-category.html">Student Voice</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="news_events_carousel_item theme_white">
                            <div class="news_events_carousel_item_inner">
                                <figure class="js-rock news_events_carousel_item_figure">
                                    <a class="news_events_carousel_item_figure_link" href="page-news-detail.html" aria-label="Read more about Finding the Right Words: Reading in Translation" tabindex="-1">

                                        <picture class="news_item_picture">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x980/" width="980" height="980">
                                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <source media="(min-width: 0px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <img class="news_item_image" src="//images.fastspot.com/framework/x/" alt="" loading="lazy" width="" height="">
                                        </picture>
                                    </a>
                                </figure>
                                <div class="news_events_carousel_item_wrapper">
                                    <div class="news_events_carousel_item_header">
                                        <h2 class="news_events_carousel_item_title">

                                            <a href="page-news-detail.html" class="news_events_carousel_item_title_link">
                                                <span class="news_events_carousel_item_title_link_inner">
                                                    <span class="news_events_carousel_item_title_link_label">Finding the Right Words: Reading in Translation</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_events_carousel_item_details">
                                            <ul class="news_events_carousel_item_category_list" aria-label="Categories">
                                                <li class="news_events_carousel_item_category">
                                                    <a class="news_events_carousel_item_category_link" href="page-news-category.html">Spiritual Life</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="news_events_carousel_item theme_orange">
                            <div class="news_events_carousel_item_inner">
                                <figure class="js-rock news_events_carousel_item_figure">
                                    <a class="news_events_carousel_item_figure_link" href="page-news-detail.html" aria-label="Read more about Letter from the President" tabindex="-1">

                                        <picture class="news_item_picture">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x980/" width="980" height="980">
                                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <source media="(min-width: 0px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <img class="news_item_image" src="//images.fastspot.com/framework/x/" alt="" loading="lazy" width="" height="">
                                        </picture>
                                    </a>
                                </figure>
                                <div class="news_events_carousel_item_wrapper">
                                    <div class="news_events_carousel_item_header">
                                        <h2 class="news_events_carousel_item_title">

                                            <a href="page-news-detail.html" class="news_events_carousel_item_title_link">
                                                <span class="news_events_carousel_item_title_link_inner">
                                                    <span class="news_events_carousel_item_title_link_label">Letter from the President</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_events_carousel_item_details">
                                            <time class="news_events_carousel_item_time">March 2, 2023</time>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="news_events_carousel_item theme_white">
                            <div class="news_events_carousel_item_inner">
                                <figure class="js-rock news_events_carousel_item_figure">
                                    <a class="news_events_carousel_item_figure_link" href="page-news-detail.html" aria-label="Read more about Letter from the President" tabindex="-1">

                                        <picture class="news_item_picture">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x980/" width="980" height="980">
                                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <source media="(min-width: 0px)" srcset="https://images.fastspot.com/framework/740x740/" width="740" height="740">
                                            <img class="news_item_image" src="//images.fastspot.com/framework/x/" alt="" loading="lazy" width="" height="">
                                        </picture>
                                    </a>
                                </figure>
                                <div class="news_events_carousel_item_wrapper">
                                    <div class="news_events_carousel_item_header">
                                        <h2 class="news_events_carousel_item_title">

                                            <a href="page-news-detail.html" class="news_events_carousel_item_title_link">
                                                <span class="news_events_carousel_item_title_link_inner">
                                                    <span class="news_events_carousel_item_title_link_label">Letter from the President</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="news_events_carousel_item_details">
                                            <time class="news_events_carousel_item_time">March 13, 2023</time>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news_events_carousel_links news_events_carousel_links_sm">
                <div class="news_events_carousel_link_item">

                    <a href="page-news.html" class="news_events_carousel_link">
                        <span class="news_events_carousel_link_inner">
                            <span class="news_events_carousel_link_label">View All News</span>
                            <span class="news_events_carousel_link_icon" aria-hidden="true">

                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
                <div class="news_events_carousel_link_item">

                    <a href="page-events.html" class="news_events_carousel_link">
                        <span class="news_events_carousel_link_inner">
                            <span class="news_events_carousel_link_label">View All Events</span>
                            <span class="news_events_carousel_link_icon" aria-hidden="true">

                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->


        {#
	{% include '@component-related-news' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

{%
	set carousel_options = {
		contained: false,
		controls: false,
    	pagination: false
	}
%}

{% set carousel_options = carousel_options|json_encode %}

<div class="news_events_carousel">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="news_events_carousel_inner">
				<div class="news_events_carousel_header">
					{% if title %}
						<h2 class="news_events_carousel_title">{{ title }}</h2>
					{% endif %}
					{% if description %}
						<div class="news_events_carousel_description">
							{{ description }}
						</div>
					{% endif %}
					{% if links %}
						<div class="news_events_carousel_links news_events_carousel_links_lg">
							{% for link in links %}
								<div class="news_events_carousel_link_item">
									{% include '@partial-link' with {
										class: 'news_events_carousel',
										title: link.title,
										url: link.url,
										icon: link.icon
									} %}
								</div>
							{% endfor %}
						</div>
					{% endif %}
				</div>
				<div class="news_events_carousel_body">
					<div class="{% if items|length > 1 %}js-carousel {% endif %}news_events_carousel_items" aria-label="{% if title %}{{ title }}{% else %}Related News{% endif %}" data-carousel-options='{{ carousel_options }}'>
						{% for item in items %}
							<div class="news_events_carousel_item theme_{{ item.theme }}">
								<div class="news_events_carousel_item_inner">
									{% if item.image %}
										<figure class="js-rock news_events_carousel_item_figure">
											<a class="news_events_carousel_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
												{% include '@partial-picture' with {
													class: 'news_item',
													alt: '',
													image: image,
													loading: 'lazy',
													sources: {
														'980px': img.square.med,
														'500px': img.square.sml,
														'0px': img.square.sml,
													}
												} %}
											</a>
										</figure>
									{% endif %}
									<div class="news_events_carousel_item_wrapper">
										<div class="news_events_carousel_item_header">
											<h2 class="news_events_carousel_item_title">
												{% include '@partial-link' with {
													class: 'news_events_carousel_item_title',
													title: item.title,
													url: item.url
												} %}
											</h2>
											<div class="news_events_carousel_item_details">
												{% if item.time %}
													<time class="news_events_carousel_item_time">{{ item.time }}</time>
												{% elseif item.categories %}
													<ul class="news_events_carousel_item_category_list" aria-label="Categories">
														{% for category in item.categories %}
															<li class="news_events_carousel_item_category">
																<a class="news_events_carousel_item_category_link" href="{{ category.url }}">{{ category.label }}</a>
															</li>
														{% endfor %}
													</ul>
												{% endif %}
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
			{% if links %}
				<div class="news_events_carousel_links news_events_carousel_links_sm">
					{% for link in links %}
						<div class="news_events_carousel_link_item">
							{% include '@partial-link' with {
								class: 'news_events_carousel',
								title: link.title,
								url: link.url,
								icon: link.icon
							} %}
						</div>
					{% endfor %}
				</div>
			{% endif %}
		</div>
	</div>
</div>
<!-- END: Related News -->

Handle: @component-news-events-carousel--four-up
Variants (4): Four Up , Three Up , Two Up , One Up
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/news-events-carousel/news-events-carousel.twig
References (3): @component-related-news, @partial-link, @partial-picture
Referenced by (3): @template-home, @template-home--alert, @template-news-landing

No notes defined.