Max-Height
Use maxH prop to control the max-height of an element.
Name | Value | Pixels |
|---|---|---|
xs | 20rem | 320px |
sm | 24rem | 384px |
md | 28rem | 448px |
lg | 32rem | 512px |
xl | 36rem | 576px |
2xl | 42rem | 672px |
full | 100% | 100% |
#
Documentation
#
#
Usage
#
maxH=xl
maxH=lg
maxH=md
maxH=sm
maxH=xs
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box display={["none", "grid"]} h="full" maxH="xl">
maxH=xl
</Box>
<Box display={["none", "grid"]} h="full" maxH="lg">
maxH=lg
</Box>
<Box h="full" maxH="md">
maxH=md
</Box>
<Box h="full" maxH="sm">
maxH=sm
</Box>
<Box h="full" maxH="xs">
maxH=xs
</Box>
</Canvas>
);
}