standard-teaser

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

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

{# Set default layout if not specified #}
{% set layout = layout|default('vertical') %}
{% set card = card|default(false) %}
{% set ad_label = ad_label|default(false) %}
{% set link_target = link_target|default('_self') %}

{# Build class list #}
{% set teaser_size = size|default('m') %}

{% set classes = [
	'StandardTeaser StandardTeaser--' ~ teaser_size,
	layout == 'horizontal' ? 'StandardTeaser--horizontal',
	card ? 'StandardTeaser--card'
] %}

{% if should_contain %}
	{% set classes = classes|merge(['u-container']) %}
{% endif %}

{% if should_breakout %}
	{% set classes = classes|merge(['u-breakout']) %}
{% endif %}

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

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

	{# Horizontal layout wraps image and content together #}
	{% if layout == 'horizontal' %}
		<div class="StandardTeaser-horizontalWrapper">
			{% if image %}
				<div class="StandardTeaser-imageWrapper">
					{{ image }}
				</div>
			{% endif %}

			<div class="StandardTeaser-contentWrapper">
	{% endif %}

	{# Vertical layout: image comes first, outside content wrapper #}
	{% if layout == 'vertical' and image %}
		<div class="StandardTeaser-imageWrapper">
			{{ image }}
		</div>
	{% endif %}

	{# Content section (used by both layouts) #}
	{% if layout == 'vertical' %}
		<div class="StandardTeaser-contentWrapper">
	{% endif %}

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

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

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

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

		{% if cta_button %}
			<div class="StandardTeaser-cta">
				{{ cta_button }}
			</div>
		{% endif %}

	{# Close content wrapper #}
	</div>

	{# Close horizontal wrapper if needed #}
	{% if layout == 'horizontal' %}
		</div>
	{% endif %}
</article>