explore-teaser-list

// src/components/patterns/teaser-list/explore-teaser-list/explore-teaser-list.twig

{{ attach_library("circle_dot/pattern-explore-teaser-list") }}

{# Build class list #}
{% set classes = [
	'ExploreTeaserList',
	with_top_padding|default(true) == false ? 'ExploreTeaserList--noTopPadding'
] %}

{# Swiper configuration #}
{% set swiper_config = {
	slidesPerView: 'auto',
	spaceBetween: 8,
	breakpoints: {
		768: {
			spaceBetween: 32
		}
	}
}|json_encode|raw %}

<cd-explore-teaser-list class="{{ classes|join(' ')|trim }} {% if should_contain %}u-container{% endif %} {% if should_breakout %}u-breakout{% endif %}">
	{# Header section with heading and description #}
	{% if heading or description %}
		<div class="ExploreTeaserList-header">
			{% if heading %}
				<h2 class="ExploreTeaserList-heading">{{ heading }}</h2>
			{% endif %}
			{% if description %}
				<p class="ExploreTeaserList-description">{{ description }}</p>
			{% endif %}
		</div>
	{% endif %}

	{# Swiper component #}
	<cd-swiper class="Swiper Swiper--explore-teaser-list" data-config='{{ swiper_config }}'>
		<div class="Swiper-container swiper">
			<div class="swiper-wrapper">
				{% for teaser in teasers %}
					<div class="swiper-slide Swiper-slide">
						<div class="ExploreTeaserList-item">
							{{ teaser }}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</cd-swiper>

	{# Optional pager/pagination #}
	{% if pager %}
		<div class="ExploreTeaserList-pager">
			{{ pager }}
		</div>
	{% endif %}
</cd-explore-teaser-list>