search-result

// src/components/elements/search-result/search-result.html.twig

{% if position_index and context_size %}
  {% set headline_id = "headline_" ~ position_index ~ "_" ~ context_size %}
  {% set copy_id = "copy_" ~ position_index ~ "_" ~ context_size %}
  {%- set aria -%}
    aria-posinset="{{ position_index }}"
    aria-setsize="{{ context_size }}"
    aria-labelledby="{{ headline_id }}"
    aria-describedby="{{ copy_id }}"
  {%- endset -%}
{% endif %}

<article class="SearchResult{% if class %} {{ class }}{% endif %}{% if portrait %} SearchResult--portrait{% endif %}{% if without_image %} SearchResult--withoutImage{% endif %}" tabindex="0"{% if aria %} {{ aria }}{% endif %}>
  {% if not without_image %}
    <div class="SearchResult-image">
      {% if image %}
        {{ image|raw }}
      {% else %}
        <img class="SearchResult-defaultImage" src="{{ asset_path().toString() ~ "images/default-search.webp" }}" alt="Das Logo des Greenpeace-Segelschiffs 'Rainbow Warrior III'." width="184" height="120">
      {% endif %}
      {% if type %}
        <p class="SearchResult-type u-typo-copy-bold">{{ type }}</p>
      {% endif %}
    </div>
  {% endif %}
  <div class="SearchResult-text">
    <h3{% if headline_id %} id="{{ headline_id }}"{% endif %} class="SearchResult-headline u-typo-headline5">
      <a href="{{ url }}" class="SearchResult-link">{{ headline|german_quotes }}</a>
    </h3>
    {% if copy %}
      <p{% if copy_id %} id="{{ copy_id }}"{% endif %} class="SearchResult-copy">{{ copy|german_quotes }}</p>
    {% endif %}
    <div class="SearchResult-metaInformation">
      {% if tags %}
        <div class="SearchResult-tagsContainer">
          <span class="SearchResult-label">{{ label }}</span>
          <span class="SearchResult-tagsHeadline u-typo-copy-small-bold">Themen:</span>
          {% include "@elements/tags/tags.html.twig" with tags|merge({
            class: "SearchResult-tags"
          }) only %}
        </div>
      {% endif %}
      {% if label %}
        <span class="SearchResult-label u-typo-label-small">{{ label }}</span>
      {% endif %}
      {% if updated_date %}
        <p class="SearchResult-time u-typo-copy-small">
          {% if not portrait %}
            <span class="u-typo-copy-small-bold">Aktualisiert:</span>
          {% endif %}
          <time datetime="{{ updated_date_time|date("Y-m-d") }}">{{ updated_date }}</time></p>
      {% endif %}
    </div>
  </div>
</article>