Syntax

Height

Setting an element’s height.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`h:size` `/` `h:N/N`	`height: sizerem;`
`h:full`	`height: 100%;`
`h:fit`	`height: fit-content;`
`h:min`	`height: min-content;`
`h:max`	`height: max-content;`
`h:screen-4xs`	`height: 22.5rem;`
`h:screen-3xs`	`height: 30rem;`
`h:screen-2xs`	`height: 37.5rem;`
`h:screen-xs`	`height: 48rem;`
`h:screen-sm`	`height: 52.125rem;`
`h:screen-md`	`height: 64rem;`
`h:screen-lg`	`height: 80rem;`
`h:screen-xl`	`height: 90rem;`
`h:screen-2xl`	`height: 100rem;`
`h:screen-3xl`	`height: 120rem;`
`h:screen-4xl`	`height: 160rem;`

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="height:full:hover height:full@sm height:full@dark height:full@print">…</div>

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.