Examples
Height Scale
.h1
|
|
.h2
|
|
.h3
|
|
.h4
|
|
.h5
|
Height Percentages
h-10
h-20
h-25
h-30
h-40
h-50
h-60
h-70
h-75
h-80
h-90
h-100
Reference
MDN - Height
/*
HEIGHTS
*/
/* Height Scale */
.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }
.h6 { height: 32rem; }
/* Height Percentages */
.h-10 { height: 10%; }
.h-20 { height: 20%; }
.h-25 { height: 25%; }
.h-30 { height: 30%; }
.h-40 { height: 40%; }
.h-50 { height: 50%; }
.h-60 { height: 60%; }
.h-70 { height: 70%; }
.h-75 { height: 75%; }
.h-80 { height: 80%; }
.h-90 { height: 90%; }
.h-100 { height: 100%; }
/* String Properties */
.h-at { height: auto; }
.h-i { height: inherit; }
@media (--breakpoint-not-small) {
.h1-ns { height: 1rem; }
.h2-ns { height: 2rem; }
.h3-ns { height: 4rem; }
.h4-ns { height: 8rem; }
.h5-ns { height: 16rem; }
.h6-ns { height: 32rem; }
.h-10-ns { height: 10%; }
.h-20-ns { height: 20%; }
.h-25-ns { height: 25%; }
.h-30-ns { height: 30%; }
.h-40-ns { height: 40%; }
.h-50-ns { height: 50%; }
.h-60-ns { height: 60%; }
.h-70-ns { height: 70%; }
.h-75-ns { height: 75%; }
.h-80-ns { height: 80%; }
.h-90-ns { height: 90%; }
.h-100-ns { height: 100%; }
.h-at-ns { height: auto; }
.h-i-ns { height: inherit; }
}
@media (--breakpoint-medium) {
.h1-m { height: 1rem; }
.h2-m { height: 2rem; }
.h3-m { height: 4rem; }
.h4-m { height: 8rem; }
.h5-m { height: 16rem; }
.h6-m { height: 32rem; }
.h-10-m { height: 10%; }
.h-20-m { height: 20%; }
.h-25-m { height: 25%; }
.h-30-m { height: 30%; }
.h-40-m { height: 40%; }
.h-50-m { height: 50%; }
.h-60-m { height: 60%; }
.h-70-m { height: 70%; }
.h-75-m { height: 75%; }
.h-80-m { height: 80%; }
.h-90-m { height: 90%; }
.h-100-m { height: 100%; }
.h-at-m { height: auto; }
.h-i-m { height: inherit; }
}
@media (--breakpoint-large) {
.h1-l { height: 1rem; }
.h2-l { height: 2rem; }
.h3-l { height: 4rem; }
.h4-l { height: 8rem; }
.h5-l { height: 16rem; }
.h6-l { height: 32rem; }
.h-10-l { height: 10%; }
.h-20-l { height: 20%; }
.h-25-l { height: 25%; }
.h-30-l { height: 30%; }
.h-40-l { height: 40%; }
.h-50-l { height: 50%; }
.h-60-l { height: 60%; }
.h-70-l { height: 70%; }
.h-75-l { height: 75%; }
.h-80-l { height: 80%; }
.h-90-l { height: 90%; }
.h-100-l { height: 100%; }
.h-at-l { height: auto; }
.h-i-l { height: inherit; }
}