uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Equal-height Columns - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Equal Height Columns With <span class="uix-typo--color-highlight">Bootstrap Grid </span></h3> <p>Set the height of the parent div to 100%.</p> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="row g-0 uix-typo--color-white"> <div class="col-lg-4 col-md-4 uix-relative"> <div style="height: 100%; padding: 2rem; background-color: #4487ED; "> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Why choose Us</h3> <p>Transform, agency working families thinkers who make change happen communities.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-bullhorn" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> <div class="col-lg-4 col-md-4 uix-relative"> <div style="height: 100%; padding: 2rem; background-color: #ED3D3A;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Our Mission</h3> <p>Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-cogs" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> <div class="col-lg-4 col-md-4 uix-relative"> <div style="height: 100%; padding: 2rem; background-color: #FCBA3C;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">What you get</h3> <p>Sustainability involvement fundraising campaign connect carbon rights, collaborative cities convener truth.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-flask" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> </div>  </section>  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Equal Height Columns With <span class="uix-typo--color-highlight">Bootstrap Grid </span> via JS</h3> <p>Add this class <code>.js-uix-common-height</code> to the <code>.row</code> of Bootstrap Grid system to create the same column height.</p> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container-fluid"> <div class="row js-uix-common-height uix-typo--color-white"> <div class="col-lg-4 col-md-4 uix-relative" style="background-color: #4487ED;"> <div style="padding: 2rem;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Why choose Us</h3> <p>Transform, agency working families thinkers who make change happen communities.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-bullhorn" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> <div class="col-lg-4 col-md-4 uix-relative" style="background-color: #ED3D3A;"> <div style="padding: 2rem;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Our Mission</h3> <p>Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-cogs" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> <div class="col-lg-4 col-md-4 uix-relative" style="background-color: #FCBA3C;"> <div style="padding: 2rem;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">What you get</h3> <p>Sustainability involvement fundraising campaign connect carbon rights, collaborative cities convener truth.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-flask" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>Equal Height Columns With <span class="uix-typo--color-highlight">Uix Grid (Core Grid)</span> via JS</h3> <p>Add this class <code>.js-uix-common-height</code> to the <code>.uix-core-grid__row</code> of Uix Grid system to create the same column height.</p> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="uix-core-grid"> <div class="uix-core-grid__row uix-core-grid__row--loop js-uix-common-height uix-typo--color-white"> <div class="uix-core-grid__col-4 uix-relative" style="background-color: #4487ED;"> <div style="padding: 2rem;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Why choose Us</h3> <p>Transform, agency working families thinkers who make change happen communities.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-bullhorn" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> <div class="uix-core-grid__col-4 uix-relative" style="background-color: #ED3D3A;"> <div style="padding: 2rem;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">Our Mission</h3> <p>Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-cogs" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> <div class="uix-core-grid__col-4 uix-relative" style="background-color: #FCBA3C;"> <div style="padding: 2rem;"> <h3 class="uix-typo--style-uppercase" style="font-weight: 600;">What you get</h3> <p>Sustainability involvement fundraising campaign connect carbon rights, collaborative cities convener truth.</p> <a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary">Read More</a> </div> <i class="fa fa-flask" aria-hidden="true" style="font-size: 10rem; opacity: .2; position: absolute; right: -2rem; bottom: -2rem; z-index: 0;"></i> </div> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')