Height
Use h prop to control the height of an element.
Name | Value | Pixels |
|
|---|---|---|---|
xs | 1.25rem | 20px | |
sm | 1.5rem | 24px | |
md | 2rem | 32px | |
lg | 2.5rem | 40px | |
xl | 3rem | 48px | |
0 | 0 | 0 | |
1 | 0.063rem | 1px | |
2 | 0.125rem | 2px | |
4 | 0.25rem | 4px | |
6 | 0.375rem | 6px | |
8 | 0.5rem | 8px | |
12 | 0.75rem | 12px | |
16 | 1rem | 16px | |
20 | 1.25rem | 20px | |
24 | 1.5rem | 24px | |
32 | 2rem | 32px | |
40 | 2.5rem | 40px | |
48 | 3rem | 48px | |
56 | 3.5rem | 56px | |
64 | 4rem | 64px | |
80 | 5rem | 80px | |
96 | 6rem | 96px | |
112 | 7rem | 112px | |
128 | 8rem | 128px | |
144 | 9rem | 144px | |
160 | 10rem | 160px | |
176 | 11rem | 176px | |
192 | 12rem | 192px | |
208 | 13rem | 208px | |
224 | 14rem | 224px | |
240 | 15rem | 240px | |
256 | 16rem | 256px | |
288 | 18rem | 288px | |
320 | 20rem | 320px | |
384 | 24rem | 384px | |
5xl | 5rem | 80px | |
1/2 | 50% | 50% | |
1/3 | 33.333333% | 33.333333% | |
2/3 | 66.666666% | 66.666666% | |
1/4 | 25% | 25% | |
2/4 | 50% | 50% | |
3/4 | 75% | 75% | |
auto | auto | auto | |
fit | fit-content | fit-content | |
full | 100% | 100% | |
max | max-content | max-content | |
min | min-content | min-content |
#
Documentation
#
#
Usage
#
h=320
h=256
h=192
h=160
h=128
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box display={["none", "grid"]} h="320">
h=320
</Box>
<Box display={["none", "grid"]} h="256">
h=256
</Box>
<Box h="192">h=192</Box>
<Box h="160">h=160</Box>
<Box h="128">h=128</Box>
</Canvas>
);
}