sobki_profile_dsfr-10.0.0-alpha2/themes/sobki_theme_dsfr/templates/ui_patterns_library/ui-patterns-overview-page.html.twig

{#
/**
 * @file
 * UI Pattern library page template, override this in your theme.
 */
#}

{% if groups is not empty %}
<div class="fr-grid-row"">
  <div class="fr-col-lg-3">
  {{ include('ui-patterns-overview-quicklinks.html.twig', {groups: groups}, with_context: false) }}
  </div>
  <div class="fr-col-lg-9">
  {% for components in groups %}
    {% for component in components %}
      <div class="ui_patterns_component" id="{{ component.id }}">
        <h2 class="ui_patterns_component__title fr-mt-7w">
          <a href="{{ url('ui_patterns_library.single', {provider: component.provider, machineName: component.machineName}) }}"
             class="component__link">{{ component.name }}</a>
        </h2>
        {{ include('ui_suite_dsfr:accordion_group', {
          'accordions': [
            include('ui_suite_dsfr:accordion', {
              'title': 'Metadata'|t,
              'content': include('ui-patterns-component-metadata.html.twig', {component: component}, with_context=false),
            }, with_context = false),
            include('ui_suite_dsfr:accordion', {
              'title': 'Structure'|t,
              'content': include('ui-patterns-component-table.html.twig', {component: component}, with_context=false),
            }, with_context = false),
          ],
          'variant': 'default',
        }, with_context = false) }}
        {% if component.stories %}
          {{ include('ui-patterns-stories-compact.html.twig', {component: component}, with_context: false) }}
        {% endif %}
      </div>
    {% endfor %}
  {% endfor %}
  </div>
</div>
{% endif %}