bootstrap_italia-8.x-0.x-dev/components/components-2/card/card-big-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 big icon'|t,
    path_demo_code: '/card/card-big-demo.html.twig#L44',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-8">
          {% include '@bi-bcl/card/card-big-icon.html.twig' with {
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_icon: 'it-card',
            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 big 2'|t,
    path_demo_code: '/card/card-big-demo.html.twig#L64',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-8">
          {% include '@bi-bcl/card/card-big-flag.html.twig' with {
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_icon: 'it-settings',
            card_category: card_demo_category,
            card_border_bottom: true,
            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 big 2, flag invisible and not border bottom'|t,
    path_demo_code: '/card/card-big-demo.html.twig#L86',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-8">
          {% include '@bi-bcl/card/card-big-flag.html.twig' with {
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_icon: 'it-settings',
            card_flag_invisible: true,
            card_category: card_demo_category,
            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 big with tag, date and call to action'|t,
    path_demo_code: '/card/card-big-demo.html.twig#L108',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card-big.html.twig' with {
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_category: card_demo_category,
            card_date: card_demo_date,
            card_signature: card_demo_signature,
            card_read_more_url: card_demo_read_more_url,
            card_read_more_type: 'button'
          } %}
        </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 big image description">
  {% endset %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Card big with tag, image, date and call to action'|t,
    path_demo_code: '/card/card-big-demo.html.twig#L135',
  } %}
    {% block content %}

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card-big.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_category: card_demo_category,
            card_date: card_demo_date,
            card_signature: card_demo_signature,
            card_read_more_url: card_demo_read_more_url,
            card_read_more_type: 'button',
          } %}
        </div>
      </div>

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

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

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

      <div class="row">
        <div class="col-12 col-lg-6">
          {% include '@bi-bcl/card/card-big.html.twig' with {
            card_image: card_demo_image2,
            card_image_date: {'day': '9', 'month': 'October', 'year': '2024'},
            card_title: card_demo_title,
            card_text: card_demo_text_short,
            card_category: card_demo_category,
            card_date: card_demo_date,
            card_signature: card_demo_signature,
            card_read_more_url: card_demo_read_more_url,
            card_shadow: false
          } %}
        </div>
      </div>

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

{% endapply %}