bootstrap_italia-8.x-0.x-dev/components/components-2/card/card.html.twig

{#
/**
 * @file
 * Template for card component.
 * Docs: https://italia.github.io/bootstrap-italia/docs/componenti/card/
 * Latest revision: v2.11.0
 *
 * Parameters:
 * - card_tag_container (string) (default: 'div')
 *   - options ["div", "article"]
 * - card_image (drupal_field) (default: '')
 * - card_image_date (array|drupal_date_field) (default: '')
 *   - {'day': '9', 'time': '9:05', 'month': 'October', 'year': '2022'}
 *   - {'date-full': drupal_date_field|raw}
 * - image_panoramic (boolean) (default: false)
 * - card_icon (string) (default: '')
 *   - option ["it-icon-name"]
 * - card_icon_text (string|drupal_field) (default: '')
 * - card_category (string|drupal_field) (default: '')
 * - card_date (string|drupal_field) (default: '')
 * - card_title (string|drupal_field) (default: '')
 * - card_big_title (boolean) (default: false)
 * - card_subtitle (string|drupal_field) (default: '')
 * - card_text (string|drupal_field) (default: '')
 * - card_signature (string|drupal_field) default('')
 * - card_read_more_type (string) default('read-more')
 *   - option ["read-more","simple-link"]
 * - card_read_more_url (string) default('')
 * - card_read_more_label (string) default('Read more')
 * - card_read_more_text (string|drupal_field) default(card_title)
 * - card_shadow (boolean) (default: false)
 * - card_border_bottom (boolean) (default: false)
 * - card_border (boolean) (default: false)
 * - card_teaser (boolean) (default: false)
 * - card_rounded (boolean) (default: false)
 * - card_body_classes (array) (default: '')
 * - card_classes (array) (default: '')
 * - card_attributes (obj attribute) (default: '')
 *
 * Examples:
   {% include '@bi-bcl/card/card.html.twig' with {
      variables: value,
   } %}
 *
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _card_tag_container = card_tag_container|default('div') %}
  {% set _card_image = card_image|default('') %}
  {% set _card_image_date = card_image_date|default('') %}
  {% set _image_panoramic = image_panoramic ?? false %}
  {% set _card_icon = card_icon|default('') %}
  {% set _card_icon_text = card_icon_text|default('') %}
  {% set _card_category = card_category|default('') %}
  {% set _card_date = card_date|default('') %}
  {% set _card_title = card_title|default('') %}
  {% set _card_big_title = card_big_title ?? false %}
  {% set _card_subtitle = card_subtitle|default('') %}
  {% set _card_text = card_text|default('') %}
  {% set _card_signature = card_signature|default('') %}
  {% set _card_read_more_type = card_read_more_type|default('read-more') %}
  {% set _card_read_more_url = card_read_more_url|default('') %}
  {% set _card_read_more_label = card_read_more_label|default('Read more'|t) %}
  {% set _card_read_more_text = card_read_more_text|default(_card_title) %}
  {% set _card_shadow = card_shadow ?? false %}
  {% set _card_border_bottom = card_border_bottom ?? false %}
  {% set _card_border = card_border ?? false %}
  {% set _card_teaser = card_teaser ?? false %}
  {% set _card_rounded = card_rounded ?? false %}

  {% set _card_body_classes = card_body_classes|default('') %}
  {% set _card_classes = card_classes|default('') %}
  {% set _card_attributes = card_attributes|default('') %}

  {# Set options #}
  {% set _classes = [
    'card',
    _card_shadow ? 'card-bg',
    _card_shadow and _card_teaser ? 'shadow',
    _card_border_bottom ? 'border-bottom-card',
    _card_image is not empty ? 'card-img',
    _card_tag_container == 'a' ? 'special-card',
    _card_teaser ? 'card-teaser',
    _card_rounded ? 'rounded',
    _card_border ? 'border',
    _card_signature is empty and _card_read_more_url is empty ? 'no-after',
    _card_teaser and _card_image is not empty ? 'no-after',
  ] %}

  {% if _card_classes is not empty %}
    {% set _classes = _classes|merge(card_classes) %}
  {% endif %}

  {% if _card_attributes is empty %}
    {% set card_attributes = create_attribute() %}
  {% endif %}
  {% set card_attributes = card_attributes
    .addClass(_classes)
  %}

  {# Set wrapper options #}
  {% set _wrapper_classes = [
    'card-wrapper',
    _card_shadow ? 'card-space',
  ] %}

  {# Set body options #}
  {% set _body_classes = [
    'card-body',
  ] %}

  {% if _card_body_classes is not empty %}
    {% set _body_classes = _body_classes|merge(_card_body_classes) %}
  {% endif %}

  {# Component #}
  {% if not _card_teaser %}
    <div class="{{ _wrapper_classes|join(' ')|trim }}">
  {% endif %}
    <{{ _card_tag_container }}{{ card_attributes }}>

      {% block cardImage %}
        {% include '@bi-bcl/card/_partial.card-image-block.html.twig' %}
      {% endblock %}

      <div class="{{ _body_classes|join(' ')|trim }}">

        {% block cardCategoryIconTop %}
          {% if _card_icon is not empty and _card_icon_text is not empty %}
            <div class="categoryicon-top">
              {% include '@bi-bcl/icon/icon.html.twig' with {name: _card_icon} %}
              <span class="text">{{ _card_icon_text }}</span>
            </div>
          {% endif %}
        {% endblock %}

        {% block cardCategoryTop %}
          {% if _card_category is not empty and _card_date is not empty %}
            <div class="category-top">
              <span class="category">{{ _card_category }}</span>
              <span class="data">{{ _card_date }}</span>
            </div>
          {% endif %}
        {% endblock %}

        {% block cardTitle %}
          {% include '@bi-bcl/card/_partial.card-title-block.html.twig' %}
          {% include '@bi-bcl/card/_partial.card-subtitle-block.html.twig' %}
        {% endblock %}

        {% block cardText %}
          {% include '@bi-bcl/card/_partial.card-text-block.html.twig' %}
        {% endblock %}

        {% block cardSignature %}
          {% include '@bi-bcl/card/_partial.card-signature-block.html.twig' %}
        {% endblock %}

        {% block readMore %}
          {% if _card_read_more_url is not empty %}
            <a class="{{ _card_read_more_type == 'simple-link' ? 'simple-link' : 'read-more' }}" href="{{ _card_read_more_url }}" title="{{ 'Read more about'|t }} {{ _card_read_more_text }}">
              <span class="text">{{ _card_read_more_label }}</span>
              <span class="visually-hidden">{{ 'about'|t }} {{ _card_read_more_text }}</span>
              {% if _card_read_more_type != 'simple-link' %}
                {% include '@bi-bcl/icon/icon.html.twig' with {name: 'it-arrow-right'} %}
              {% endif %}
            </a>
          {% endif %}
        {% endblock %}

      </div>

    </{{ _card_tag_container }}>
  {% if not _card_teaser %}
    </div>
  {% endif %}


{% endapply %}