zurb_foundation-8.x-6.0-alpha5/layouts/foundation_2col_bricks/foundation-2col-bricks.html.twig

{#
/**
 * @file
 * Template for a 2 column panel layout.
 *
 * This template provides a two column panel display layout, with
 * each column roughly equal in width. It is 5 rows high; the top
 * middle and bottom rows contain 1 column, while the second
 * and fourth rows contain 2 columns.
 *
 * 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.above_left: Content in the left column in row 2.
 *   - content.above_right: Content in the right column in row 2.
 *   - content.middle: Content in the middle row.
 *   - content.below_left: Content in the left column in row 4.
 *   - content.below_right: Content in the right column in row 4.
 *   - 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-2col-bricks', settings.css_classes) }}>
{% endif %}

  <div class="row">
    <div class="medium-12 columns">{{ content.top }}</div>
  </div>

  <div class="row">
    <div class="medium-6 small-12 columns">
      {{ content.above_left }}
    </div>
    <div class="medium-6 small-12 columns">
      {{ content.above_right }}
    </div>
  </div>

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

  <div class="row">
    <div class="medium-6 small-12 columns">
      {{ content.below_left }}
    </div>

    <div class="medium-6 small-12 columns">
      {{ content.below_right }}
    </div>
  </div>

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