article-infos

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

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

{% set size = size|default('regular') %}
{% set variant = variant|default('dark') %}
{% set show_first_separator = show_first_separator|default(false) %}

{% set classes = [
  'ArticleInfos',
	'ArticleInfos--' ~ size,
	'ArticleInfos--' ~ variant,
] %}

{% if infos %}
	<div class="{{ classes|join(' ') }}">
		<div class="ArticleInfos-content {{ is_centered ? 'ArticleInfos--centered' : '' }}">
		<ul class="ArticleInfos-items">
			{% for info in infos %}
				<li class="ArticleInfos-item {% if not loop.last and (show_first_separator or not loop.first) %}with-separator{% endif %}">
					{{ info }}
				</li>
			{% endfor %}
		</ul>
		{% if extLink %}
			<div class="ArticleInfos-externalLink">
				<a href="{{ extLink.url }}" class="ArticleInfos-externalLinkButton" target="_blank" rel="noopener noreferrer">
					<span class="u-hiddenVisually">{{ extLink.label }}</span>
					{% include "@elements/icon/icon.twig" with {
						name: "ic-external-link",
						classes: ["ArticleInfos-externalLinkIcon"]
					} only %}
				</a>
			</div>
		{% endif %}
		</div>
	</div>
{% endif %}