zurb_foundation-8.x-6.0-alpha5/layouts/foundation_3col_stacked/foundation-3col-stacked.html.twig

{#
/**
 * @file
 * Template for a 3 column panel layout.
 *
 * This template provides a three column 23%-33%-33% panel display layout, with
 * additional areas for the top and the bottom.
 *
 * Variables:
 * - id: An optional CSS id to use for the layout.
 * - css_classes: Optional CSS classes to use for the layout.
 * - content: An array of content, each item in the array is keyed to one
 *   panel of the layout. This layout supports the following sections:
 *   - content.top: Content in the top row.
 *   - content.left: Content in the left column.
 *   - content.middle: Content in the middle column.
 *   - content.right: Content in the right column.
 *   - content.bottom: Content in the bottom row.
 */
#}
{% if  settings.css_id or settings.css_classes %}
<div {{ attributes.setAttribute('id', settings.css_id).addClass('foundation-3col-stacked', settings.css_classes) }}>
{% endif %}
  {% if content.top %}
    <div class="row">
      <div class="small-12 columns">
        {{ content.top }}
      </div>
    </div>
  {% endif %}

  <div class="row">
    <div class="small-12 medium-4 columns">
      {{ content.left }}
    </div>
    <div class="small-12 medium-4 columns">
      {{ content.middle }}
    </div>
    <div class="small-12 medium-4 columns">
      {{ content.right }}
    </div>
  </div>

  {% if content.bottom %}
    <div class="row">
      <div class="small-12 columns">
        {{ content.bottom }}
      </div>
    </div>
  {% endif %}
{% if  settings.css_id or settings.css_classes %}
</div> <!-- /.foundation-3col-stacked -->
{% endif %}