zurb_foundation-8.x-6.0-alpha5/layouts/foundation_6row_combo/foundation-6row-combo.html.twig

{#
/**
 * @file
 * Template for a 6 row combo panel layout.
 *
 * This template provides a six row panel display layout see panel regions for more.
 *
 * 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 bottom top row.
 *   - content.top_first: Content in the top first column.
 *   - content.top_second: Content in the top second column.
 *   - content.top_third: Content in the top third column.
 *   - content.top_fourth: Content in the top fourth column.
 *   - content.middle_small: Content in the middle small column.
 *   - content.middle_large: Content in the middle large column.
 *   - content.middle_first: Content in the middle first column.
 *   - content.middle_second: Content in the middle second column.
 *   - content.bottom_first: Content in the middle first column.
 *   - content.bottom_second: Content in the middle second column.
 *   - content.bottom_third: Content in the middle third column.
 *   - content.bottom_fourth: Content in the middle fourth 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-6row-combo', settings.css_classes) }}>
{% endif %}
  <div class="row">
    <div class="medium-12 columns">{{ content.top }}</div>
  </div>

  <div class="row">
    <div class="medium-3 small-12 columns">
      {{ content.top_first }}
    </div>
    <div class="medium-3 small-12 columns">
      {{ content.top_second }}
    </div>
    <div class="medium-3 small-12 columns">
      {{ content.top_third }}
    </div>
    <div class="medium-3 small-12 columns">
      {{ content.top_fourth }}
    </div>
  </div>

  <div class="row">
    <div class="medium-3 small-12 columns">
      {{ content.middle_small }}
    </div>
    <div class="medium-9 small-12 columns">
      {{ content.middle_medium }}
    </div>
  </div>

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

  <div class="row">
    <div class="medium-3 small-12 columns">
      {{ content.bottom_first }}
    </div>
    <div class="medium-3 small-12 columns">
      {{ content.bottom_second }}
    </div>
    <div class="medium-3 small-12 columns">
      {{ content.bottom_third }}
    </div>
    <div class="medium-3 small-12 columns">
      {{ content.bottom_fourth }}
    </div>
  </div>

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