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

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

  {% set text = 'You are reading this message.
    This sample text will be longer so you can see how spacing works within an alert
    with this type of content.' %}

  {% set variants = [
    "success", "warning", "danger", "important", "note", "default"
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Callout'|t,
    path_demo_code: '/callout/callout-demo.html.twig#L27',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/callout/callout.html.twig' with {
          callout_variant: variant,
          title: variant,
          text: text,
          callout_classes: ['col-lg-6']
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Callout highlight'|t,
    path_demo_code: '/callout/callout-demo.html.twig#L43',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/callout/callout.html.twig' with {
          callout_variant: variant,
          title: variant,
          display: 'highlight',
          text: text,
          callout_classes: ['mb-5','col-lg-6']
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Callout more'|t,
    path_demo_code: '/callout/callout-demo.html.twig#L59',
  } %}
    {% block content %}
      {% embed '@bi-bcl/callout/callout.html.twig' with {
        title: 'More note',
        display: 'more',
        callout_classes: ['col-lg-6']
      } %}
        {% block content %}

          {# Output example from drupal field #}
          <p>Quisque suscipit interdum augue non volutpat. Cras tristique arcu tortor. Mauris eu magna nibh. Curabitur malesuada neque in lectus sagittis accumsan. In vitae justo eros. Maecenas pellentesque lacinia ipsum vitae rhoncus. Vestibulum pretium tempor turpis, nec gravida eros viverra in. Proin dictum nibh ut semper tristique.</p>
          <p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p>
          <p>Maecenas vulputate ante dictum <a href="#">vestibulum volutpat</a>. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit.</strong> Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.</p>
          <div class="collapse-div" id="callout-demo-collapseDiv1">
            <div class="collapse-header" id="callout-demo-heading1">
              <button aria-controls="callout-demo-collapse1" aria-expanded="false" class="callout-more-toggle" data-bs-target="#callout-demo-collapse1" data-bs-toggle="collapse">
                {{ 'Read more'|t }} <span></span>
              </button>
              <a class="callout-more-download" href="#">
                  {% include '@bi-bcl/icon/icon.html.twig' with {
                    name: 'it-download',
                    color: 'primary',
                  } %}
                  <span class="visually-hidden">PDF </span>{{ 'Download'|t }}
              </a>
            </div>
            <div aria-labelledby="callout-demo-heading1" class="collapse" id="callout-demo-collapse1" role="tabpanel">
              <div class="collapse-body">
                <p>Aenean tortor enim, suscipit eget commodo at, imperdiet quis diam. Vestibulum non accumsan felis, at ultrices lorem. Pellentesque ac diam a ipsum cursus interdum id nec odio. Vestibulum nec congue mauris. Aliquam et dui purus. Mauris in imperdiet risus, sed blandit tellus. Donec posuere accumsan lacinia. Mauris dignissim, sem vel volutpat rhoncus, neque mi ullamcorper ante, vitae volutpat ipsum quam id purus. Duis tincidunt sodales nisl eget ultricies. Sed condimentum mi eu ex venenatis, quis bibendum dui ultrices. Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
                <p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p>
                <p>Maecenas vulputate ante dictum <a href="#">vestibulum volutpat</a>. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit.</strong> Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.</p>
              </div>
            </div>
          </div>

        {% endblock %}
      {% endembed %}
    {% endblock %}
  {% endembed %}

{% endapply %}