dsfr4drupal-1.x-dev/components/tile/tile.twig

{% set attributes = attributes|default(create_attribute()) %}
{% set link_attributes = link_attributes|default(create_attribute()) %}
{% set has_icon = has_icon ?? true %}
{% set title_tag = title_tag|default('h3') %}

{% if variant and variant != 'md' %}
  {% set attributes = attributes.addClass('fr-tile--' ~ variant) %}
{% endif %}

{% if is_download %}
  {% set attributes = attributes.addClass('fr-tile--download') %}
  {% set link_attributes = link_attributes.setAttribute('download', true) %}

  {% if file_assess %}
    {% set link_attributes = link_attributes.setAttribute('data-fr-assess-file', 'true') %}
  {% endif %}
{% endif %}

{% if disabled %}
  {% if use_button %}
    {% set link_attributes = link_attributes.setAttribute('disabled', true) %}
  {% else %}
    {% set link_attributes = link_attributes.setAttribute('aria-disabled', 'true').setAttribute('role', 'link') %}
  {% endif %}
{% endif %}

{% if horizontal %}
  {% set attributes = attributes.addClass('fr-tile--horizontal') %}
{% endif %}

{% if enlarge_button %}
  {% set attributes = attributes.addClass('fr-enlarge-button') %}
{% elseif enlarge_link and url %}
  {% set attributes = attributes.addClass('fr-enlarge-link') %}
{% endif %}

{% if not has_icon %}
  {% set attributes = attributes.addClass('fr-tile--no-icon') %}
{% endif %}

{% if grey_hover %}
  {% set attributes = attributes.addClass('fr-tile--grey') %}
{% endif %}

<div{{ attributes.addClass('fr-tile') }}>
  <div class="fr-tile__body">
    <div class="fr-tile__content">
      <{{ title_tag }} class="fr-tile__title">
          {% if use_button %}
            <button{{ link_attributes }}>{{ title }}</button>
          {% elseif url %}
            {% if disabled %}
              <a{{ link_attributes }}>{{ title }}</a>
            {% else %}
              {{ link(title, url, link_attributes) }}
            {% endif %}
          {% else %}
            {{ title }}
          {% endif %}
      </{{ title_tag }}>
      {% if description %}
        <p class="fr-tile__desc">{{ description }}</p>
      {% endif %}
      {% if detail %}
        <p class="fr-tile__detail">{{ detail }}</p>
      {% endif %}
      {% if tags_badges %}
        <div class="fr-tile__start">{{ tags_badges }}</div>
      {% endif %}
    </div>
  </div>
  {% if image %}
    <div class="fr-tile__header">
      <div class="fr-tile__pictogram">
        {# A pictogram as SVG or an IMG tag. #}
        {# Do not forget to add class "fr-responsive-img" for image. #}
        {{ image }}
      </div>
    </div>
  {% endif %}
</div>