Equal Height

Make equal height columns by adding the equal-height class to their direct parent group.

For example we have three columns with variable height:

Act2 Unequal Column Sample

Act2 Template Builder Unequal Column Sample

We can apply the equal-height class to their direct parent group (in this case, the Centered wrapper), or better yet, we can group the columns once more time and apply that class to the new group, which we are going to do in our example:

Act2 Template Builder Equal Height CSS Class

Act2 Equal Height Sample

Advanced Equal Height

If your section contains elements that are not at the same level in your layout (they are not direct children of the same group), but you still want to make them equally tall, then we need to take a different approach.

Instead of the equal-height class we'll use eqh-container on the parent group and eqh-item on all elements that need to be equal:

Act2 Template Builder EQH Items

Using Act2 with the old Design Manager? Read this documentation.