https://www.co-operativebank.co.uk/application/themes/co-operativebank/js/layout.js

1/*all the classNames for adding container-fluid class*/
2let arrayOfBanners = ['contact-us', 'feature-banner', 'summary-box', 'homepage-banner-card', 'homepage-banner-icon', 'apply-banner-variant', 'anchor-link-component', 'hero-banner-component'];
3arrayOfBanners.map(function (bannerClass) {
4let summaryBoxRows = document.getElementsByClassName(bannerClass);
5    if(summaryBoxRows.length > 0) {
6        
7        addStylingForBanner(summaryBoxRows, bannerClass);
8    }
9    
10});
11
12function addStylingForBanner(selectedRows, type){
13    selectedRows =  [].slice.call(selectedRows);
14    selectedRows.map(function (value) {
15        addStylingForBanner(value)
16        if(type === 'interactive-card-component'){
17            value.parentNode.parentElement.parentElement.parentElement.classList.remove('container');
18            value.parentNode.parentElement.parentElement.parentElement.classList.add('container-fluid');
19        }else{
20            value.parentNode.parentElement.parentElement.classList.remove('container');
21            value.parentNode.parentElement.parentElement.classList.add('container-fluid');
22        }
23    })
24}
25
26/*all the classNames for adding cards-row class for adjusting height of cards*/
27let arrayOfCardsClass = ['coop-card', 'content-hub__latest--cards__card'];
28
29arrayOfCardsClass.forEach(function(element, key){
30    let selectedCards = [].slice.call(document.querySelectorAll(".row ."+element));
31    if(selectedCards.length > 0){
32        selectedCards.forEach(function(key, value){
33            key.parentNode.parentNode.classList.add('cards-row')
34        });
35    }
36   
37})
38
39
40/* Matching the heights of cards */
41// Find all card rows
42let cardRows = document.getElementsByClassName("cards-row");
43
44function matchCardHeight() {
45  for (let row of cardRows) {
46    const cardsInRow = [...row.children].filter(card => card.querySelectorAll(".matched-height").length);
47    
48    let heights = {
49      totalHeight: [],
50      mainContentHeight: [],
51      buttonHeight: [],
52      bottomHeadlineHeight: [],
53      bottomHeight: [],
54    }
55
56    const fitAndPush = (elem, section) => {
57      if (elem.length) {
58        elem[0].style.height = 'fit-content';
59        section.push(elem[0].offsetHeight);
60      } else {
61        section.push(0)
62      };
63    }
64
65    const setHeights = (elem, change) => {
66      if (elem.length) {
67        elem[0].style.height = change
68      }
69    }
70
71    cardsInRow.map(card => {
72      // 1: totalHeight
73      fitAndPush(card.getElementsByClassName("coop-card"), heights.totalHeight);
74      // 2: mainContentHeight
75      fitAndPush(card.getElementsByClassName("coop-card__main-content"), heights.mainContentHeight);
76      // 3: buttonHeight
77      fitAndPush(card.getElementsByClassName("coop-card__button"), heights.buttonHeight);
78      // 4: bottomHeadlineHeight
79      fitAndPush(card.getElementsByClassName("coop-card__bottom-headline"), heights.bottomHeadlineHeight);
80      // 5: bottom
81      fitAndPush(card.getElementsByClassName("coop-card__bottom"), heights.bottomHeight);
82    })
83    
84    // set heights of divs
85    // NB. offsetHeight does not count margins, so don't add margins to coop-card__main-content, button, bottom or bottom-headline
86    cardsInRow.map((card) => {
87      //1: set main content height
88      setHeights(card.getElementsByClassName("coop-card__main-content"), `${Math.max(...heights.mainContentHeight)}px`)
89
90      //2: bottom ? then set button and bottom-headline      
91      if (card.getElementsByClassName("coop-card__bottom").length) {
92        //2A: button height
93        setHeights(card.getElementsByClassName("coop-card__button"),`${Math.max(...heights.buttonHeight)}px`)
94        //2B: bottom-headline height
95        setHeights(card.getElementsByClassName("coop-card__bottom-headline"),`${Math.max(...heights.bottomHeadlineHeight)}px`)
96      }
97
98      //3a: stretch any card without a bottom to "middle + button + bottom-headline"
99      if (
100        (!card.getElementsByClassName("coop-card__bottom").length)
101      ) {
102        setHeights(card.getElementsByClassName("coop-card"),`${Math.max(...heights.mainContentHeight) + Math.max(...heights.buttonHeight) + Math.max(...heights.bottomHeadlineHeight)}px`)
103      } 
104
105      //3b: stretch any card with a bottom but without a bottom-headline to "button + bottom headLineHeight" (plus a further 24 for a margin that is not included in offsetHeight)
106      if (
107        (
108          card.getElementsByClassName("coop-card__bottom").length && 
109          !card.getElementsByClassName("coop-card__bottom-headline").length 
110      )
111      ) {
112        setHeights(card.getElementsByClassName("coop-card__button"),`${Math.max(...heights.buttonHeight) + Math.max(...heights.bottomHeadlineHeight)}px`);
113      } 
114    })    
115  }
116}
117
118if (cardRows.length) {
119    matchCardHeight();
120}
121
122window.onresize = function () {
123    if (cardRows.length) {
124        matchCardHeight();
125    }
126};