bootstrap_italia-8.x-0.x-dev/components/components-2/card/card-big.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', '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: 'link')
 *   - option ["link", "button"]
 * - 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: true)
 * - card_border_bottom (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-big.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_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 ?? true %}
  {% set _card_border_bottom = card_border_bottom ?? false %}
  {% set _card_read_more_type = card_read_more_type|default('link') %}
  {% 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-big',
    _card_shadow ? 'card-bg',
    _card_border_bottom ? 'border-bottom-card',
    _card_read_more_type != 'link' ? 'no-after',
    _card_signature is empty and _card_read_more_url is empty ? 'no-after',
    _card_image is not empty ? 'card-img',
    _card_rounded ? 'rounded',
  ] %}

  {% 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)
  %}

  {# Image disable flag. #}
  {% if _card_image %}
    {% set _card_flag = false %}
  {% endif %}

  {# Set wrapper options #}
  {% set _wrapper_classes = [
    'card-wrapper',
    '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 #}
  <div class="{{ _wrapper_classes|join(' ')|trim }}">
    <{{ _card_tag_container }}{{ card_attributes }}>

      {% block cardHeader %}{% endblock %}

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

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

        {% block cardBodyTop %}{% endblock %}

        {% block cardHeadTags %}
          {% if _card_category is not empty %}
            <div class="head-tags">
              <span class="card-tag">{{ _card_category }}</span>
              {% if _card_date %}
                <span class="data">{{ _card_date }}</span>
              {% endif %}
            </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 %}

        <div class="it-card-footer">
          {% block cardSignature %}
            {% include '@bi-bcl/card/_partial.card-signature-block.html.twig' %}
          {% endblock %}

          {% block readMore %}
            {% if _card_read_more_url is not empty %}
              {% set _card_action_classes =
                _card_read_more_type == 'link'
                  ? 'read-more'
                  : 'btn btn-outline-primary btn-sm'
              %}
              <a class="{{ _card_action_classes }}" 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 == 'link' %}
                  {% include '@bi-bcl/icon/icon.html.twig' with {name: 'it-arrow-right'} %}
                {% endif %}
              </a>
            {% endif %}
          {% endblock %}
        </div>

      </div>

    </{{ _card_tag_container }}>
  </div>


{% endapply %}