article-intro

// src/components/patterns/article-intro/article-intro.twig

{{ attach_library("circle_dot/pattern-article-intro") }}

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

	{# Top overlay bar with breadcrumbs and copyright #}
	<div class="ArticleIntro-topBar u-container">
		{% if breadcrumbs %}
			<div class="ArticleIntro-breadcrumbs">
				{{ breadcrumbs }}
			</div>
		{% endif %}

		{% if image_copyright %}
			<span class="ArticleIntro-copyright">{{ image_copyright }}</span>
		{% endif %}
	</div>

	{# Content overlay #}
	<div class="ArticleIntro-content">
		{# Header section #}
		<div class="ArticleIntro-header">
			{# Partner logo #}
			{% if partner_logo %}
				<div class="ArticleIntro-logo">
					{{ partner_logo }}
				</div>
			{% endif %}
			<span class="ArticleIntro-kicker">{{ kicker }}</span>
			<h1 class="ArticleIntro-heading">{{ heading }}</h1>
		</div>

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

		{# Lead text #}
		{% if lead_text %}
			<p class="ArticleIntro-lead">{{ lead_text }}</p>
		{% endif %}

		{# Call to action button #}
		{% if cta %}
			<div class="ArticleIntro-cta">
				{{ cta }}
			</div>
		{% endif %}
	</div>
</div>