explore-teaser

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

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

{# Set size variant (required) #}
{% set size = size|default('large') %}

{# Build class list #}
{% set classes = [
	'ExploreTeaser',
	size == 'small' ? 'ExploreTeaser--small'
] %}

<article class="{{ classes|join(' ')|trim }} {% if should_contain %}u-container{% endif %}">
	{# Teaser link (stretched to cover entire teaser) #}
	{% if url %}
		<a href="{{ url }}" class="ExploreTeaser-link">
			<span class="u-hiddenVisually">{{ heading }}</span>
		</a>
	{% endif %}

	{# Full-bleed background with gradient overlays #}
	<div class="ExploreTeaser-background">
		{{ background_image }}
	</div>

	{# Content overlay #}
	<div class="ExploreTeaser-content">
		{# Header with partner logo #}
		<div class="ExploreTeaser-header">
			<div class="ExploreTeaser-logo">
				{{ partner_logo }}
			</div>
		</div>

		{# Body content #}
		<div class="ExploreTeaser-body">
			{# Headings section #}
			<div class="ExploreTeaser-headings">
				<span class="ExploreTeaser-kicker">{{ kicker }}</span>

				<h3 class="ExploreTeaser-heading">{{ heading }}</h3>

				{% if size == 'large' and lead_text %}
					<p class="ExploreTeaser-lead">{{ lead_text }}</p>
				{% endif %}
			</div>

			{# Metadata section #}
			{% if article_infos %}
				<div class="ExploreTeaser-meta">
					{% if size == 'large' and sponsored_by %}
						<div class="ExploreTeaser-sponsored">
							<span class="ExploreTeaser-sponsoredLabel">gesponsort von </span>
							<span class="ExploreTeaser-sponsoredName">{{ sponsored_by }}</span>
						</div>
					{% endif %}
					{{ article_infos }}
				</div>
			{% endif %}

			{# Actions (CTA buttons - large variant only) #}
			{% if size == 'large' and (primary_button or secondary_button) %}
				<div class="ExploreTeaser-actions">
					{% if primary_button %}
						{{ primary_button }}
					{% endif %}
					{% if secondary_button %}
						{{ secondary_button }}
					{% endif %}
				</div>
			{% endif %}
		</div>
	</div>
</article>