Shadow

Use shadow{SIZE} Atomic Props controll element's shadow.

Atomic Props	CSS Properties
shadowSM	box-shadow: {sm}
shadowMD	box-shadow: {md}
shadowLG	box-shadow: {lg}
shadowXL	box-shadow: {xl}
shadow2XL	box-shadow: {2xl}
shadow3XL	box-shadow: {3xl}
shadow={value}	box-shadow: {value}

Usage

Result

Loading...

Live Editor

<Box bgGray100 p-20 toCenterX toBetween> <Box toCenter square-60 bgWhite shadowSM> sm </Box> <Box toCenter square-80 bgWhite bgWhite shadowMD> md </Box> <Box toCenter square-80 bgWhite shadowLG> lg </Box> <Box toCenter square-90 bgWhite shadowXL> xl </Box> <Box toCenter square-100 bgWhite shadow2XL> 2xl </Box> <Box toCenter square-110 bgWhite shadow3XL> 3xl </Box> </Box>

<Box bgGray100 p-20 toCenterX toBetween>
  <Box toCenter square-60 bgWhite shadowSM>
    sm
  </Box>
  <Box toCenter square-80 bgWhite bgWhite shadowMD>
    md
  </Box>
  <Box toCenter square-80 bgWhite shadowLG>
    lg
  </Box>
  <Box toCenter square-90 bgWhite shadowXL>
    xl
  </Box>
  <Box toCenter square-100 bgWhite shadow2XL>
    2xl
  </Box>
  <Box toCenter square-110 bgWhite shadow3XL>
    3xl
  </Box>
</Box>

Default shadow

Result

Loading...

Live Editor

<Box bgGray100 p-20 toCenter> <Box toCenter square-100 bgWhite shadow> default </Box> </Box>

<Box bgGray100 p-20 toCenter>
  <Box toCenter square-100 bgWhite shadow>
    default
  </Box>
</Box>