Syntax

Height

Setting an element’s height.

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

Overview

ClassDeclarations
h:size / h:N/Nheight: sizerem;
h:fullheight: 100%;
h:fitheight: fit-content;
h:minheight: min-content;
h:maxheight: max-content;
h:screen-4xsheight: 22.5rem;
h:screen-3xsheight: 30rem;
h:screen-2xsheight: 37.5rem;
h:screen-xsheight: 48rem;
h:screen-smheight: 52.125rem;
h:screen-mdheight: 64rem;
h:screen-lgheight: 80rem;
h:screen-xlheight: 90rem;
h:screen-2xlheight: 100rem;
h:screen-3xlheight: 120rem;
h:screen-4xlheight: 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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.