SXA equal height of components

Smart Solutions in SXA

A common task when implementing a website is to handle the height equality of components in one row even though the content might differ. SXA has an already inbuild solution. 

I just added three out of the box Promo Component into one row in my main placeholder. And I set the promos to be threee in a row with a width of 4 col each.

 

 

 Now go into the rendring parameters and check the "Equal height with other promos" style of each promo. This comes out of the box and is available in your Style Folder <Site>/Presentation/Style/Promo

 

 

 After having done this for all promo components in that row go to the rendering parameters of the Row Placeholder and set the "Equalized Content" Style in the "Container" section.

 

 

To see your changes you have to save the page. So no matter what differences you have in text or images the component is of equal height.

 

 

 

 

 

 

Created: 20.5.2020

SXA Frontend