list-teaser-list

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

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

{# Set defaults #}
{% set layout = layout|default('vertical') %}
{% set grid_columns = grid_columns|default(2) %}

{# Build class list #}
{% set class_list = [
	'ListTeaserList',
	layout == 'horizontal' ? 'ListTeaserList--horizontal',
	(with_top_padding is defined and not with_top_padding) ? 'ListTeaserList--noTopPadding'
] %}

<section class="{{ class_list|join(' ')|trim }} {{ classes|join(' ')|trim }} {% if should_contain %}u-container{% endif %} {% if should_breakout %}u-breakout{% endif %} {% if is_related_articles %}ListTeaserList-relatedArticles js-RelatedArticles{% endif %} {% if is_related_articles and grid_columns == 3 %}ListTeaserList-relatedArticles--3col{% endif %}">
	{% if segment_headline %}
		<header class="ListTeaserList-header">
			<div class="ListTeaserList-headerTop">
				<div class="ListTeaserList-headlineWrapper">
					<h2 class="ListTeaserList-headline">{{ segment_headline }}</h2>
					{% if segment_link %}
						<a href="{{ segment_link_url|default('#') }}" class="ListTeaserList-link" aria-label="View more">
							<svg class="ListTeaserList-linkIcon" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a>
					{% endif %}
				</div>

				{% if sorting_dropdown %}
					<form class="ListTeaserList-sortingForm" action="{{ sorting_action|default('') }}" method="get">
						{% if sorting_hidden_params %}
							{% for param in sorting_hidden_params %}
								<input type="hidden" name="{{ param.name }}" value="{{ param.value }}">
							{% endfor %}
						{% endif %}

						<label class="ListTeaserList-sortingLabel" for="sorting-select">Sortieren nach:</label>
						{% include "@elements/select/select.twig" with {
							id: "sorting-select",
							name: "sort",
							options: sorting_options|default([
								{type: 'option', label: 'Aktualität', value: 'date', selected: true},
								{type: 'option', label: 'Relevanz', value: 'relevance'},
								{type: 'option', label: 'Meistgelesen', value: 'popular'}
							]),
							classes: ["ListTeaserList-sortingSelect"]
						} only %}
					</form>
				{% endif %}
			</div>
			<div class="ListTeaserList-divider"></div>
		</header>
	{% endif %}

	<div class="ListTeaserList-list">
		{% for teaser in teasers %}
			<div class="ListTeaserList-item">
				{{ teaser }}
			</div>
			{% if not loop.last and with_divider %}
				<div class="ListTeaserList-separator"></div>
			{% endif %}
		{% endfor %}
	</div>
</section>