❮ Foundation Images Foundation Switches ❯

Foundation Equalizer

We can create an equalizer with the same height by adding the data-equalizer attribute to the container element and the data-equalizer-watch attribute to each child element. The tallest element determines the height of the others.

Note: The slider requires JavaScript. So you need to initialize Foundation JS:

Example

&lt;div class="row" data-equalizer>
  &lt;div class="medium-4 columns panel" data-equalizer-watch>
    Lorem ipsum...
  </div>
  &lt;div class="medium-4 columns panel" data-equalizer-watch>
    Sed ut...
  </div>
  &lt;div class="medium-4 columns panel" data-equalizer-watch>
    Lorem ipsum...
  </div>
</div>
<!-- Initialize Foundation JS -->
<script>
  $(document).ready(function() {
    $(document).foundation();
  });
</script>

Equalizer for Different Screens

Set the same height for different screen sizes by adding the data-equalizer-mq attribute to the equalizer. The values can be one of the following:

Value	Description	Example
medium-up	Default. Creates containers with the same height, width greater than 40.063em
large-up	Creates containers with the same height, width greater than 64.063em	Try it
xlarge-up	Creates containers with the same height, width greater than 90.063em	Try it
xxlarge-up	Creates containers with the same height, width greater than 120.063em	Try it

Nested Content

Add the same value for the data-equalizer and data-equalizer-watch attributes. This will connect them to the equalizer container. Repeat the nested equalizers multiple times to ensure they match:

Example

<!-- The Equalized Container -->
<div class="row" data-equalizer="first">
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <!-- An Equalized Container Inside The Equalized Container -->
      <div class="row" data-equalizer="second">
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
      <!-- End Nested Equalized Container -->
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <p>Ut enim...</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <p>Lorem ipsum....</p>
    </div>
  </div>
</div>

❮ Foundation Images Foundation Switches ❯