layout--oneplusfourgrid-section.html.twig in Drupal 10

Default theme implementation to display a one plus four grid layout.

Available variables:

• content: The content for this layout.
• attributes: HTML attributes for the layout <div>.

File

core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/layout--oneplusfourgrid-section.html.twig

{#
/**
 * @file
 * Default theme implementation to display a one plus four grid layout.
 *
 * Available variables:
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
  'layout',
  'layout--oneplusfourgrid-section',
]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>

    {% if content.first %}
      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
        {{ content.first }}
      </div>
    {% endif %}

    {% if content.second or content.third or content.fourth or content.fifth %}
      <div class="layout__four-grid-group">
    {% endif %}

      {% if content.second %}
        <div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
          {{ content.second }}
        </div>
      {% endif %}

      {% if content.third %}
        <div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
          {{ content.third }}
        </div>
      {% endif %}

      {% if content.fourth %}
        <div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
          {{ content.fourth }}
        </div>
      {% endif %}

      {% if content.fifth %}
        <div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
          {{ content.fifth }}
        </div>
      {% endif %}

    {% if content.second or content.third or content.fourth or content.fifth %}
      </div>
    {% endif %}

  </div>
{% endif %}

Related topics

Theme system overview

Functions and templates for the user interface that themes can override.