teaser-headliner

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

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

{% if variant == "breaking-news" %}
	{# Breaking News Alert Variant #}
	<a
		href="{{ url }}"
		class="TeaserHeadliner TeaserHeadliner--breakingNews"
	>
		<div class="TeaserHeadliner-content">
			<span class="TeaserHeadliner-heading">
				{{ heading }}
			</span>
			<span class="TeaserHeadliner-icon">
				{% include "@elements/icon/icon.twig" with {
					name: "arrow-right",
				} only %}
			</span>
		</div>
	</a>

{% elseif variant == "newsletter" %}
	{# Newsletter Subscription Variant #}
	<div class="TeaserHeadliner TeaserHeadliner--newsletter">
		<div class="TeaserHeadliner-content">
			<div class="TeaserHeadliner-logo">
				<img src="{{ asset_path() }}/svg/logo-bildmarke.svg" alt="beck-aktuell" width="35" height="40">
			</div>
			<div class="TeaserHeadliner-text">
				<div class="TeaserHeadliner-heading">
					{{ newsletter_heading }}
				</div>
				<div class="TeaserHeadliner-body">
					{{ newsletter_body }}
				</div>
			</div>
		</div>
		<div class="TeaserHeadliner-button">
			{% include "@elements/button/button.twig" with {
				label: button_label|default("Newsletter abonnieren"),
				url: button_url,
				icon: "arrow-right",
				modifiers: ["primary"]
			} only %}
		</div>
	</div>

{% endif %}