a12s-1.0.0-beta7/modules/patterns/templates/patterns-overview-page.html.twig

{#
/**
 * @file
 * UI Pattern library page template, override this in your theme.
 */
#}
{{ attach_library('a12s_patterns/patterns-overview-page') }}
<hr/>

{% if patterns is not empty %}
  <h2>{{ "Available patterns"|t }}</h2>

  <div class="patterns-introduction container grid-columns-10">
    <div class="grid-col-span-2 p-2">
      {# List of available patterns with anchor links. #}
      {% for group_name, group_patterns in patterns %}
        {% if patterns|length > 1 %}
          <h3>{{ group_name }}</h3>
        {% endif %}
        <ul>
          {% for pattern_name, pattern in group_patterns %}
            <li class="m-2">
              <a href="#{{ pattern_name }}">{{ pattern.label }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>

    <div class="main-content grid-col-span-8 bg-light p-2">
      {% for group_patterns in patterns %}
        {% for pattern_name, pattern in group_patterns %}
          <div class="pattern-preview pattern-preview__{{ pattern.definition.id }} mb-3" id="{{ pattern_name }}">
            <div class="mb-3">
              {{ pattern.meta }}
            </div>

            {# Rendered pattern preview. #}
            <legend>{{ "Preview"|t }}</legend>
            <fieldset class="pattern-preview__preview my-0 mx-auto">
              <div class="p-3 text-center">
                {{ pattern.rendered }}
              </div>
            </fieldset>

            {# Link to standalone pattern preview page.#}
            <p class="text-center mt-2">
              <a href="{{ url('ui_patterns.patterns.single', {'name': pattern_name}) }}" class="pattern-preview__view">
                {% trans %}View {{ pattern.label }} as stand-alone{% endtrans %}
              </a>
            </p>
            <hr>
          </div>

        {% endfor %}
      {% endfor %}
    </div>
  </div>

{% endif %}