🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


Height utility classes:

Class Description
.height-xxxxs height: 0.25rem; (~4px)
.height-xxxs height: 0.5rem; (~8px)
.height-xxs height: 0.75rem; (~12px)
.height-xs height: 1rem; (~16px)
.height-sm height: 1.25rem; (~24px)
.height-md height: 2rem; (~32px)
.height-lg height: 3rem; (~48px)
.height-xl height: 4rem; (~64px)
.height-xxl height: 6rem; (~96px)
.height-xxxl height: 8rem; (~128px)
.height-xxxxl height: 16rem; (~256px)
.height-0 height: 0;
.height-10% height: 10%;
.height-20% height: 20%;
.height-25% height: 25%;
.height-30% height: 30%;
.height-33% height: calc(100% / 3);
.height-40% height: 40%;
.height-50% height: 50%;
.height-60% height: 60%;
.height-66% height: calc(100% / 1.5);
.height-70% height: 70%;
.height-75% height: 75%;
.height-80% height: 80%;
.height-90% height: 90%;
.height-100% height: 100%;
.height-100vh height: 100vh;
.height-auto height: auto;

Optionally, you can update the default height variables by adding your own in the 📁 custom-style/_util.scss file:

:root {
  // size - scale used to set width/height values 
  --size-xxxxs: 0.25rem; // ~4px
  --size-xxxs:  0.5rem;  // ~8px
  --size-xxs:   0.75rem; // ~12px
  --size-xs:    1rem;    // ~16px
  --size-sm:    1.5rem;  // ~24px
  --size-md:    2rem;    // ~32px
  --size-lg:    3rem;    // ~48px
  --size-xl:    4rem;    // ~64px
  --size-xxl:   6rem;    // ~96px
  --size-xxxl:  8rem;    // ~128px
  --size-xxxxl: 16rem;   // ~256px

Responsive #

Edit the height at a specific breakpoint adding the @{breakpoint} suffix to the height utility classes:

<div class="height-100vh [email protected]">
  <!-- ... -->

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us