bootstrap_italia-8.x-0.x-dev/patterns/patterns-overview-page.html.twig

{#
/**
 * @file
 * UI Pattern library page template, override this in your theme.
 */
#}
<div id="page-patterns-overview" class="mt-3">

  {% if patterns is not empty %}
    {% for group_patterns in patterns %}
      {% if patterns|length > 1 %}
        <h2>{{ group_name }}</h2>
      {% endif %}
      <div class="row">

        <div class="col-sm-3">
          {# List of available patterns with anchor links. #}
          <nav class="patterns-sidebar hidden-print hidden-sm hidden-xs affix-top" style="top: 8em;">
            {% embed '@bi-bcl/list/list.html.twig' %}
              {% block listItems %}
                {% for pattern_name, pattern in group_patterns %}
                  {% include '@bi-bcl/list/list-item.html.twig' with {
                    list_url: '#'~pattern_name,
                    list_text: pattern.label,
                    list_show_end_arrow: true,
                  } %}
                {% endfor %}

                {% include '@bi-bcl/list/list-item.html.twig' with {
                  list_url: '#components-list',
                  list_text: 'Components list'|t,
                  list_show_end_arrow: true,
                } %}
              {% endblock %}
            {% endembed %}
          </nav>
        </div>

        <div class="col-md-9">
          {% embed '@bi-bcl/callout/callout.html.twig' with {
            callout_variant: 'note',
            title: 'Notice',
            callout_classes: ['mb-5', 'col-lg-8', 'col-xl-6']
          } %}
            {% block content %}
              <p>
                Install <a href="https://www.drupal.org/project/ui_patterns_settings" target="_blank">UI Patterns Settings</a> to see more settings when using Patterns.
              </p>
            {% endblock %}
          {% endembed %}

          {% for pattern_name, pattern in group_patterns %}
            <div class="pattern-row mb-5">
              {# Pattern name and description. #}
              <h2 id="{{ pattern_name }}" class="page-header fw-semibold">
                {{ pattern.label }}
                <a href="{{ url('ui_patterns.patterns.single', {'name': pattern.id}) }}" class="btn btn-secondary btn-sm pull-right">View {{ pattern.label }} <i class="glyphicon glyphicon-chevron-right"></i></a>
              </h2>
              {{ pattern.meta }}

              {# Rendered pattern preview. #}
              <div class="pattern-preview my-5 bd-example border rounded p-1 p-md-2 p-lg-3">
                {{ pattern.rendered }}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  {% endif %}

  <h2 id="components-list" class="mt-5 mb-3 fw-semibold">{{ 'Components list'|t }}</h2>
  {% include '@bi-bcl/all-demo.html.twig' %}
</div>