Min Width

<Box white>
  <Box minW-100 bgRed400 inlineBlock p2>
    minW-100
  </Box>
  <Box minW-10rem bgYellow400 inlineBlock p2>
    minW-10rem
  </Box>
  <Box minW={100} bgGreen400 inlineBlock p2>
    minW={'{100}'}
  </Box>
  <Box minW="400px" bgBlue400 inlineBlock p2>
    minW="400px"
  </Box>
  <Box minW="80%" bgPurple400 inlineBlock p2>
    minW="80%"
  </Box>
</Box>

Use minW-{value} Atomic Props to control the min width of an element.

Atomic Props	CSS Properties
minW-{value} / minW={value}	min-width: {value};

Fixed Min-Width

Use minW-{size} Atomic Props to control the width of an element.

Result

Loading...

Live Editor

<Box white> <Box minW-100 bgRed400 inlineBlock p2> minW-100 </Box> <Box minW-10rem bgYellow400 inlineBlock p2> minW-10rem </Box> <Box minW={100} bgGreen400 inlineBlock p2> minW={'{100}'} </Box> <Box minW="400px" bgBlue400 inlineBlock p2> minW="400px" </Box> <Box minW="80%" bgPurple400 inlineBlock p2> minW="80%" </Box> </Box>

<Box white>
  <Box minW-100 bgRed400 inlineBlock p2>
    minW-100
  </Box>
  <Box minW-10rem bgYellow400 inlineBlock p2>
    minW-10rem
  </Box>
  <Box minW={100} bgGreen400 inlineBlock p2>
    minW={'{100}'}
  </Box>
  <Box minW="400px" bgBlue400 inlineBlock p2>
    minW="400px"
  </Box>
  <Box minW="80%" bgPurple400 inlineBlock p2>
    minW="80%"
  </Box>
</Box>

Fluid Min-Width

Result

Loading...

Live Editor

<Box white textCenter spaceY2> <Box toLeft> <Box minW={1 / 2} bgOrange400 py-10> minW={'{1 / 2}'} </Box> <Box minW={1 / 2} bgRed400 py-10> minW={'{1 / 2}'} </Box> </Box> <Box toLeft> <Box minW={1 / 3} bgOrange400 py-10> minW={'{1 / 3}'} </Box> <Box minW={2 / 3} bgRed400 py-10> minW={'{2 / 3}'} </Box> </Box> <Box toLeft> <Box minW={1 / 4} bgOrange400 py-10> minW={'{1 / 4}'} </Box> <Box minW={3 / 4} bgRed400 py-10> minW={'{3 / 4}'} </Box> </Box> <Box toLeft> <Box minW={0.5} bgOrange400 py-10> minW={'{0.5}'} </Box> <Box minW={0.5} bgRed400 py-10> minW={'{0.5}'} </Box> </Box> </Box>

<Box white textCenter spaceY2>
  <Box toLeft>
    <Box minW={1 / 2} bgOrange400 py-10>
      minW={'{1 / 2}'}
    </Box>
    <Box minW={1 / 2} bgRed400 py-10>
      minW={'{1 / 2}'}
    </Box>
  </Box>

  <Box toLeft>
    <Box minW={1 / 3} bgOrange400 py-10>
      minW={'{1 / 3}'}
    </Box>
    <Box minW={2 / 3} bgRed400 py-10>
      minW={'{2 / 3}'}
    </Box>
  </Box>

  <Box toLeft>
    <Box minW={1 / 4} bgOrange400 py-10>
      minW={'{1 / 4}'}
    </Box>
    <Box minW={3 / 4} bgRed400 py-10>
      minW={'{3 / 4}'}
    </Box>
  </Box>

  <Box toLeft>
    <Box minW={0.5} bgOrange400 py-10>
      minW={'{0.5}'}
    </Box>
    <Box minW={0.5} bgRed400 py-10>
      minW={'{0.5}'}
    </Box>
  </Box>
</Box>