standard-teaser-list

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

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

{# Build class list #}
{% set classes = [
	'StandardTeaserList',
	(with_top_padding is defined and not with_top_padding) ? 'StandardTeaserList--noTopPadding'
] %}

<section class="{{ classes|join(' ')|trim }} {% if should_contain %}u-container{% endif %} {% if should_breakout %}u-breakout{% endif %}">
	{% if segment_headline %}
		{# Check if segment_headline is rendered HTML (component) or plain text #}
		{% set is_component = segment_headline|trim starts with '<' %}

		{% if is_component %}
			{# It's a rendered component (SegmentHeadline), output it directly #}
			{{ segment_headline }}
		{% else %}
			{# It's plain text, build the header inline #}
			<header class="StandardTeaserList-header">
				<div class="StandardTeaserList-headerTop">
					<div class="StandardTeaserList-headlineWrapper">
						<h2 class="StandardTeaserList-headline">{{ segment_headline }}</h2>
						{% if segment_link %}
							<a href="{{ segment_link_url|default('#') }}" class="StandardTeaserList-link" aria-label="View more">
								<svg class="StandardTeaserList-linkIcon" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</a>
						{% endif %}
					</div>
				</div>
				<div class="StandardTeaserList-divider"></div>
			</header>
		{% endif %}
	{% endif %}

	<div class="StandardTeaserList-list {% if as_grid %}StandardTeaserList-grid{% endif %} {% if as_stack %}StandardTeaserList-stack{% endif %}">
		{% for teaser in teasers %}
			<div class="StandardTeaserList-item {% if is_ranked_list %}StandardTeaserList-itemRanked{% endif %}" data-index="{{ loop.index }}">
				{{ teaser }}
			</div>
			{% if not loop.last and with_divider %}
				<div class="StandardTeaserList-separator"></div>
			{% endif %}
		{% endfor %}
	</div>
</section>