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

{#
/**
 * @file
 * Card demo.
 *
 * Example:
 *
   {% include '@bi-bcl/card/card-demo.html.twig' %}
 */
#}
{% apply spaceless %}

  {% set card_demo_title = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…' %}
  {% set card_demo_title_link %}
    <a href="#">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
    </a>
  {% endset %}

  {% set card_demo_subtitle = 'Subtitle' %}
  {% set card_demo_subtitle_link %}
    <a href="#">Subtitle</a>
  {% endset %}

  {% set card_demo_text_short = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' %}

  {% set card_demo_category = 'Category'|t %}
  {% set card_demo_category_link %}
    <a href="#">{{ 'Category'|t }}</a>
  {% endset %}

  {% set card_demo_date = '10/12/2024' %}
  {% set card_demo_signature = 'Federico De Paolis' %}
  {% set card_demo_read_more_url = '#' %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card simple'|t,
    path_demo_code: '/card/card-demo.html.twig#L45',
  } %}
    {% block content %}

      <div class="row">
        {% for i in 1..3 %}
          <div class="col">
            {% include '@bi-bcl/card/card.html.twig' with {
              card_title: card_demo_title,
              card_text: card_demo_text_short
            } %}
          </div>
        {% endfor %}
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card simple article'|t,
    path_demo_code: '/card/card-demo.html.twig#L64',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card.html.twig' with {
            card_title: card_demo_title,
            card_big_title: true,
            card_text: card_demo_text_short,
            card_category: card_demo_category_link,
            card_date: card_demo_date,
            card_signature: card_demo_signature,
            card_read_more_url: card_demo_read_more_url
          } %}
        </div>
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card with icon'|t,
    path_demo_code: '/card/card-demo.html.twig#L87',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card.html.twig' with {
            card_title: card_demo_title_link,
            card_text: card_demo_text_short,
            card_icon: 'it-file',
            card_icon_text: card_demo_category,
          } %}
        </div>
      </div>

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card.html.twig' with {
            card_title: card_demo_title_link,
            card_subtitle: card_demo_subtitle_link,
            card_text: card_demo_text_short,
            card_icon: 'it-copy',
            card_icon_text: '(2) File',
            card_read_more_type: 'simple-link',
            card_read_more_url: card_demo_read_more_url,
            card_read_more_label: 'Link',
            card_read_more_text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…'
          } %}
        </div>
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card shadow'|t,
    path_demo_code: '/card/card-demo.html.twig#L123',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card.html.twig' with {
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_read_more_url: card_demo_read_more_url,
            card_shadow: true
          } %}
        </div>
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% set card_demo_image %}
    <img src="https://placehold.co/310x190/0066cc/FFFFFF/?text=EXAMPLE%20IMAGE" title="Image title" alt="Card shadow with image description">
  {% endset %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card shadow with image'|t,
    path_demo_code: '/card/card-demo.html.twig#L147',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card.html.twig' with {
            card_image: card_demo_image,
            card_image_date: {'day': '9', 'month': 'October', 'year': '2024'},
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_read_more_url: card_demo_read_more_url,
            card_shadow: true
          } %}
        </div>
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% set card_demo_image_special %}
    <img src="https://placehold.co/174x214/F9F9FE/0066CC/?text=EXAMPLE%20IMAGE" title="Image title" alt="Card special image description">
  {% endset %}
  {% set card_demo_special_attribute = create_attribute() %}
  {% set card_demo_special_attribute = card_demo_special_attribute.setAttribute('href', '#') %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card special'|t,
    path_demo_code: '/card/card-demo.html.twig#L175',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% embed '@bi-bcl/card/card.html.twig' with {
            card_tag_container: 'a',
            card_image: card_demo_image_special,
            card_title: card_demo_title,
            card_attributes: card_demo_special_attribute
          } %}
            {% block cardCategoryTop %}
              <div class="head-tags">
                <span class="data">{{ card_demo_date }}</span>
              </div>
            {% endblock %}
          {% endembed %}
        </div>
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card teaser'|t,
    path_demo_code: '/card/card-demo.html.twig#L200',
  } %}
    {% block content %}

      <div class="card-wrapper card-teaser-wrapper">
        {% include '@bi-bcl/card/card.html.twig' with {
          card_title: card_demo_title,
          card_text: card_demo_text_short,
          card_teaser: true
        } %}

        {% include '@bi-bcl/card/card.html.twig' with {
          card_title: card_demo_title,
          card_text: card_demo_text_short,
          card_shadow: true,
          card_teaser: true
        } %}

        {% embed '@bi-bcl/card/card.html.twig' with {
          card_title: card_demo_title,
          card_text: card_demo_text_short,
          card_shadow: true,
          card_icon: 'it-clip',
          card_teaser: true
        } %}
          {% block cardTitle %}
            <h3 class="card-title h5">
              {% include '@bi-bcl/icon/icon.html.twig' with {name: 'it-clip'} %}
              <a href="#">Lorem ipsum dolor sit amet</a>
            </h3>
          {% endblock %}
        {% endembed %}
      </div>

    {% endblock %}
  {% endembed %}{# End embed demo. #}


{% endapply %}