njw-segment

// src/components/patterns/njw-segment/njw-segment.twig

{{ attach_library("circle_dot/pattern-njw-segment") }}

{# Set defaults #}
{% set title = title|default('Neues aus der NJW') %}
{% set cta_label = cta_label|default('Alle News') %}
{% set teasers = teasers|default([]) %}

<section class="NjwSegment {% if should_breakout %}u-breakout{% endif %}" data-theme="njw">
	<div class="NjwSegment-header">
		{# Badge - shown above title on desktop, below title on mobile #}
		{# Mobile badge (small) #}
		<div class="NjwSegment-badgeMobile">
			{% include "@elements/badge/badge.twig" with {
				badge_size: 's',
				label: 'NJW',
				type: 'njw'
			} only %}
		</div>

		{# Desktop badge (medium) #}
		<div class="NjwSegment-badgeDesktop">
			{% include "@elements/badge/badge.twig" with {
				badge_size: 'm',
				label: 'NJW',
				type: 'njw'
			} only %}
		</div>

		{# Title #}
		<h2 class="NjwSegment-title">{{ title }}</h2>
	</div>

	{# Teasers container #}
	{% if teasers is not empty %}
		<div class="NjwSegment-teasers">
			{# Desktop: Standard teasers in a row #}
			<div class="NjwSegment-teasersDesktop">
				{% for teaser in teasers %}
					{% include "@patterns/teasers/standard-teaser/standard-teaser.twig" with {
						card: true,
						layout: 'vertical',
						theme: 'white',
						...teaser
					} only %}
				{% endfor %}
			</div>

			{# Mobile: List teasers stacked #}
			<div class="NjwSegment-teasersMobile">
				{% for teaser in teasers %}
					{% include "@patterns/teasers/list-teaser/list-teaser.twig" with {
						card: true,
						size: 's',
						theme: 'white',
						...teaser
					} only %}
				{% endfor %}
			</div>
		</div>
	{% endif %}

	{# CTA Button #}
	{% if cta_url %}
		<div class="NjwSegment-cta">
			{% include "@elements/button/button.twig" with {
				label: cta_label,
				url: cta_url,
				modifiers: ['primary'],
				icon: 'ic-external-link',
				icon_position: 'right'
			} only %}
		</div>
	{% endif %}
</section>