Display

Atomic Props	CSS Properties
block	display: block;
inline	display: inline;
inline-block	display: inline-block;
flex	display: flex;
inline-flex	display: inline-flex;
grid	display: grid;
hidden	display: none;
display={value}	display: {value};

Block

Use block props to create a block-level element.

Result

Loading...

Live Editor

<Box gap-10> <Box bgOrange400 rounded-8 h-60 block></Box> <Box bgOrange400 rounded-8 h-60 block></Box> <Box bgOrange400 rounded-8 h-60 block></Box> </Box>

<Box gap-10>
  <Box bgOrange400 rounded-8 h-60 block></Box>
  <Box bgOrange400 rounded-8 h-60 block></Box>
  <Box bgOrange400 rounded-8 h-60 block></Box>
</Box>

Inline

Use inline props to create an inline element.

Result

Loading...

Live Editor

<Box white gap2> <Box bgOrange400 rounded-8 p4 inline> A </Box> <Box bgOrange400 rounded-8 p4 inline> B </Box> <Box bgOrange400 rounded-8 p4 inline> C </Box> </Box>

<Box white gap2>
  <Box bgOrange400 rounded-8 p4 inline>
    A
  </Box>
  <Box bgOrange400 rounded-8 p4 inline>
    B
  </Box>
  <Box bgOrange400 rounded-8 p4 inline>
    C
  </Box>
</Box>

Inline Block

Use inlineBlock props to create an inline block-level element.

Result

Loading...

Live Editor

<Box white gap2> <Box bgOrange400 rounded-8 p4 inlineBlock> A </Box> <Box bgOrange400 rounded-8 p4 inlineBlock> B </Box> <Box bgOrange400 rounded-8 p4 inlineBlock> C </Box> </Box>

<Box white gap2>
  <Box bgOrange400 rounded-8 p4 inlineBlock>
    A
  </Box>
  <Box bgOrange400 rounded-8 p4 inlineBlock>
    B
  </Box>
  <Box bgOrange400 rounded-8 p4 inlineBlock>
    C
  </Box>
</Box>

Flex

Use flex props to create a block-level flex container.

Result

Loading...

Live Editor

<Box gap2> <Box white gap2 flex bgOrange100 p4> <Box bgOrange400 rounded-8 p4> A </Box> <Box bgOrange400 rounded-8 p4> B </Box> <Box bgOrange400 rounded-8 p4> C </Box> </Box> <Box white gap2 flex bgOrange100 p4> <Box bgOrange400 rounded-8 p4> A </Box> <Box bgOrange400 rounded-8 p4> B </Box> <Box bgOrange400 rounded-8 p4> C </Box> </Box> </Box>

<Box gap2>
  <Box white gap2 flex bgOrange100 p4>
    <Box bgOrange400 rounded-8 p4>
      A
    </Box>
    <Box bgOrange400 rounded-8 p4>
      B
    </Box>
    <Box bgOrange400 rounded-8 p4>
      C
    </Box>
  </Box>

  <Box white gap2 flex bgOrange100 p4>
    <Box bgOrange400 rounded-8 p4>
      A
    </Box>
    <Box bgOrange400 rounded-8 p4>
      B
    </Box>
    <Box bgOrange400 rounded-8 p4>
      C
    </Box>
  </Box>
</Box>

Inline Flex

Use inlineFlex props to create an inline flex container.

Result

Loading...

Live Editor

<Box gap2> <Box white gap2 inlineFlex bgOrange100 p4> <Box bgOrange400 rounded-8 p4> A </Box> <Box bgOrange400 rounded-8 p4> B </Box> <Box bgOrange400 rounded-8 p4> C </Box> </Box> <Box white gap2 inlineFlex bgOrange100 p4> <Box bgOrange400 rounded-8 p4> A </Box> <Box bgOrange400 rounded-8 p4> B </Box> <Box bgOrange400 rounded-8 p4> C </Box> </Box> </Box>

<Box gap2>
  <Box white gap2 inlineFlex bgOrange100 p4>
    <Box bgOrange400 rounded-8 p4>
      A
    </Box>
    <Box bgOrange400 rounded-8 p4>
      B
    </Box>
    <Box bgOrange400 rounded-8 p4>
      C
    </Box>
  </Box>

  <Box white gap2 inlineFlex bgOrange100 p4>
    <Box bgOrange400 rounded-8 p4>
      A
    </Box>
    <Box bgOrange400 rounded-8 p4>
      B
    </Box>
    <Box bgOrange400 rounded-8 p4>
      C
    </Box>
  </Box>
</Box>

Grid

Use grid props to create a grid container.

Result

Loading...

Live Editor

<Box grid gridTemplateColumns-3 gap-20 white fontBold textXL> <Box py1 rounded-4 toCenter bgOrange400> 1 </Box> <Box py1 rounded-4 toCenter bgOrange400> 2 </Box> <Box py1 rounded-4 toCenter bgOrange400> 3 </Box> <Box py1 rounded-4 toCenter bgOrange400> 4 </Box> <Box py1 rounded-4 toCenter bgOrange400> 5 </Box> <Box py1 rounded-4 toCenter bgOrange400> 6 </Box> <Box py1 rounded-4 toCenter bgOrange400> 7 </Box> <Box py1 rounded-4 toCenter bgOrange400> 8 </Box> <Box py1 rounded-4 toCenter bgOrange400> 9 </Box> </Box>

<Box grid gridTemplateColumns-3 gap-20 white fontBold textXL>
  <Box py1 rounded-4 toCenter bgOrange400>
    1
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    2
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    3
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    4
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    5
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    6
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    7
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    8
  </Box>
  <Box py1 rounded-4 toCenter bgOrange400>
    9
  </Box>
</Box>

Hidden

Use hidden props to set an element to display: none.

Result

Loading...

Live Editor

<Box white gap2> <Box bgOrange400 rounded-8 p4 hidden> A </Box> <Box bgOrange400 rounded-8 p4 inlineBlock> B </Box> <Box bgOrange400 rounded-8 p4 inlineBlock> C </Box> </Box>

<Box white gap2>
  <Box bgOrange400 rounded-8 p4 hidden>
    A
  </Box>
  <Box bgOrange400 rounded-8 p4 inlineBlock>
    B
  </Box>
  <Box bgOrange400 rounded-8 p4 inlineBlock>
    C
  </Box>
</Box>

Display

if the preset atomic props can not be satisfied，you can use display props.

Result

Loading...

Live Editor

<Box gap-10> <Box bgOrange400 rounded-8 square-100 display="inline-grid"></Box> <Box bgOrange400 rounded-8 square-100 display="table"></Box> </Box>

<Box gap-10>
  <Box bgOrange400 rounded-8 square-100 display="inline-grid"></Box>
  <Box bgOrange400 rounded-8 square-100 display="table"></Box>
</Box>