Height

Use h-{value} props to controll element height.

Atomic Props	CSS Properties
h-{value} / h={value}	height: {value};

Usage

Result

Loading...

Live Editor

<Box toLeft white h-100 bgGray100> <Box h-50 bgRed400 p2> h-50 </Box> <Box h-5rem bgYellow400 p2> h-5rem </Box> <Box h={50} bgGreen400 p2> h={'{50}'} </Box> <Box h="100px" bgBlue400 p2> h="100px" </Box> <Box h="80%" bgPurple400 p2> h="80%" </Box> </Box>

<Box toLeft white h-100 bgGray100>
  <Box h-50 bgRed400 p2>
    h-50
  </Box>
  <Box h-5rem bgYellow400 p2>
    h-5rem
  </Box>
  <Box h={50} bgGreen400 p2>
    h={'{50}'}
  </Box>
  <Box h="100px" bgBlue400 p2>
    h="100px"
  </Box>
  <Box h="80%" bgPurple400 p2>
    h="80%"
  </Box>
</Box>