list-teaser

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

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

{# Set defaults #}
{% set size = size|default('l') %}
{% set card = card|default(false) %}
{% set ad_label = ad_label|default(false) %}
{% set link_target = link_target|default('_self') %}
{% set variant = variant|default('default') %}

{# Build class list #}
{% set classes = [
	'ListTeaser',
	size == 'xl' ? 'ListTeaser--xl',
	size == 'l' ? 'ListTeaser--l',
	size == 'm' ? 'ListTeaser--m',
	size == 's' ? 'ListTeaser--s',
	card ? 'ListTeaser--card'
] %}

<article class="{{ classes|join(' ')|trim }}" data-theme="{{ variant }}">
	{# Teaser link (stretched to cover entire teaser) #}
	{% if url %}
		<a href="{{ url }}" class="ListTeaser-link"{% if link_target == '_blank' %} target="_blank" rel="noopener noreferrer"{% endif %}>
			<span class="u-hiddenVisually">{{ heading }}</span>
		</a>
	{% endif %}

	{% if ad_label %}
		<div class="ListTeaser-adLabel">Anzeige</div>
	{% endif %}

	<div class="ListTeaser-horizontalWrapper">
		{% if image %}
			<div class="ListTeaser-imageWrapper">
				{{ image }}
			</div>
		{% endif %}

		<div class="ListTeaser-contentWrapper">
			<div class="ListTeaser-content">
				<div class="ListTeaser-text">
					<div class="ListTeaser-headings">
						{% if kicker %}
							<span class="ListTeaser-kicker">{{ kicker }}</span>
						{% endif %}

						<h3 class="ListTeaser-heading">{{ heading }}</h3>
					</div>

					{% if lead_text %}
						<p class="ListTeaser-lead">{{ lead_text }}</p>
					{% endif %}

					{% if article_infos %}
						<div class="ListTeaser-meta">
							{{ article_infos }}
						</div>
					{% endif %}
				</div>

				{% if cta %}
					<div class="ListTeaser-cta">
						{{ cta }}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</article>