StylingHeight

Height

Use h prop to control the height of an element.

Name

Value

Pixels

 

2xs

xs

sm

md

lg

xl

3xl

0

10

12

16

20

24

32

40

48

56

64

80

224

384

1/2

1/3

1/4

2/3

2/4

3/4

auto

fit

full

max

min

Documentation

Usage

h=384

h=224

h=3xl

h=64

h=xl

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box display={["none", "grid"]} h="384">
        h=384
      </Box>
      <Box display={["none", "grid"]} h="224">
        h=224
      </Box>
      <Box h="3xl">h=3xl</Box>
      <Box h="64">h=64</Box>
      <Box h="xl">h=xl</Box>
    </Canvas>
  );
}