Utilitário
Height
Define a altura de um elemento, com escala em rem e em porcentagem/viewport.
Classes
| Classe CSS | Descrição |
|---|---|
.height-4xs | height: 0.25rem; (4px) |
.height-3xs | height: 0.5rem; (8px) |
.height-2xs | height: 0.75rem; (12px) |
.height-xs | height: 1rem; (16px) |
.height-sm | height: 1.5rem; (24px) |
.height-md | height: 2rem; (32px) |
.height-lg | height: 3rem; (48px) |
.height-xl | height: 4rem; (64px) |
.height-2xl | height: 6rem; (96px) |
.height-3xl | height: 8rem; (128px) |
.height-4xl | 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; |
.height-inherit | height: inherit; |
Responsivo
Para mirar um breakpoint, adicione o sufixo @{breakpoint}
— por exemplo, .height-xl@md.