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

{#
/**
 * @file
 * Overlay demo.
 *
 * Example:
 *
   {% include '@bi-bcl/overlay/overlay-demo.html.twig' %}
 */
#}
{% apply spaceless %}
  {% set label = 'Image label' %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L20',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/240/160?image=1056" alt="Overlay image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay fullheight'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L37',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
        panel_fullheight: true
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/240/160?image=1056" alt="Overlay full height image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay large image'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L55',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/800/300?image=1055" alt="Overlay large image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay dark'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L72',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
        overlay_black: true,
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/240/160?image=1056" alt="Overlay black image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay fullheight dark'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L90',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
        panel_fullheight: true,
        overlay_black: true,
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/240/160?image=1056" alt="Overlay panel image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay large image dark'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L109',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
        overlay_black: true,
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/800/300?image=1055" alt="Overlay black large image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay icon primary'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L127',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
        overlay_icon: 'it-star-outline'
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/240/160?image=1056" alt="Overlay icon image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Overlay icon primary black'|t,
    path_demo_code: '/overlay/overlay-demo.html.twig#L145',
  } %}
    {% block content %}

      {% embed '@bi-bcl/overlay/overlay.html.twig' with {
        label: label,
        overlay_black: true,
        overlay_icon: 'it-star-outline'
      } %}
        {% block overlayImage %}
          <img src="https://picsum.photos/240/160?image=1056" alt="Overlay black icon image description" class="img-fluid">
        {% endblock %}
      {% endembed %}

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

{% endapply %}