You are here

help-section.html.twig in Drupal 10

Theme override for a section of the help page.

This implementation divides the links into 4 columns.

Available variables:

  • title: The section title.
  • description: The description text for the section.
  • links: Links to display in the section.
  • empty: Text to display if there are no links.

File

core/themes/claro/templates/classy/misc/help-section.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for a section of the help page.
  5. *
  6. * This implementation divides the links into 4 columns.
  7. *
  8. * Available variables:
  9. * - title: The section title.
  10. * - description: The description text for the section.
  11. * - links: Links to display in the section.
  12. * - empty: Text to display if there are no links.
  13. */
  14. #}
  15. <div class="clearfix">
  16. <h2>{{ title }}</h2>
  17. <p>{{ description }}</p>
  18. {% if links %}
  19. {# Calculate the column length, to divide links into 4 columns. #}
  20. {% set size = links|length // 4 %}
  21. {% if size * 4 < links|length %}
  22. {% set size = size + 1 %}
  23. {% endif %}
  24. {# Output the links in 4 columns. #}
  25. {% set count = 0 %}
  26. {% for link in links %}
  27. {% if count == 0 %}
  28. {# Start a new column. #}
  29. <div class="layout-column layout-column--quarter"><ul>
  30. {% endif %}
  31. <li>{{ link }}</li>
  32. {% set count = count + 1 %}
  33. {% if count >= size %}
  34. {# End the current column. #}
  35. {% set count = 0 %}
  36. </ul></div>
  37. {% endif %}
  38. {% endfor %}
  39. {# End the last column, if one is open. #}
  40. {% if count > 0 %}
  41. </ul></div>
  42. {% endif %}
  43. {% else %}
  44. <p>{{ empty }}</p>
  45. {% endif %}
  46. </div>