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

{% set attributes = attributes|default(create_attribute()) %}
{% set title_tag = title_tag|default('h3') %}
{% set link_attributes = link_attributes|default(create_attribute()) %}
{% set title_attributes = title_attributes|default(create_attribute()) %}

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

{% if is_download %}
  {% set attributes = attributes.addClass('fr-card--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 horizontal %}
  {% set attributes = attributes.addClass('fr-card--horizontal') %}
  {% if horizontal_ratio %}
    {% set attributes = attributes.addClass('fr-card--horizontal-' ~ horizontal_ratio) %}
  {% endif %}
{% endif %}

{% if not footer %}
  {% if enlarge_button %}
    {% set attributes = attributes.addClass('fr-enlarge-button') %}
  {% elseif enlarge_link and url %}
    {% set attributes = attributes.addClass('fr-enlarge-link') %}
  {% 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 no_arrow %}
  {% set attributes = attributes.addClass('fr-card--no-arrow') %}
{% endif %}

{% if bg_boxes %}
  {% set attributes = attributes.addClass('fr-card--' ~ bg_boxes) %}
{% endif %}

<div{{ attributes.addClass('fr-card') }}>
  <div class="fr-card__body">
    <div class="fr-card__content">
      <{{ title_tag }}{{ title_attributes.addClass('fr-card__title') }}>
        {% if use_button %}
          <button{{ link_attributes.setAttribute('type', 'button') }}>{{ 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-card__desc">{{ description }}</p>{% endif %}
      {% if detail or tags_badges %}
        <div class="fr-card__start">
          {{ tags_badges }}
          {% if detail %}
            <p class="fr-card__detail {{ detail_icon ? 'fr-icon-' ~ detail_icon : '' }}">{{ detail }}</p>
          {% endif %}
        </div>
      {% endif %}
      {% if detail_end %}
        <div class="fr-card__end">
          {% if detail_end %}
            <p class="fr-card__detail {{ detail_end_icon ? 'fr-icon-' ~ detail_end_icon : '' }}">{{ detail_end }}</p>
          {% endif %}
        </div>
      {% endif %}
    </div>
    {% if footer %}
      <div class="fr-card__footer">
        {{ footer }}
      </div>
    {% endif %}
  </div>
  {% if image %}
    <div class="fr-card__header">
      <div class="fr-card__img">
        {# Do not forget to add class "fr-responsive-img" to the image. #}
        {{ image }}
      </div>
      {{ image_badges }}
    </div>
  {% endif %}
</div>