List Type

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

Atomic Props	CSS Properties
listNone	list-style-type: none;
listDisc	list-style-type: disc;
listDecimal	list-style-type: decimal;
listSquare	list-style-type: square;
listCircle	list-style-type: circle;
listTradChineseInformal	list-style-type: trad-chinese-informal;
listLowerRoman	list-style-type: lower-roman;
listUpperRoman	list-style-type: upper-roman;
listLowerAlpha	list-style-type: lower-alpha;
listUpperAlpha	list-style-type: upper-alpha;

Usage

Result

Loading...

Live Editor

<Box> <Box as="ul" listNone> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listDisc> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listDecimal> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listSquare> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listCircle> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listTradChineseInformal> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listLowerRoman> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listUpperRoman> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listLowerAlpha> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> <Box as="ul" listUpperAlpha> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box> </Box> </Box>

<Box>
  <Box as="ul" listNone>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listDisc>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listDecimal>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listSquare>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listCircle>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listTradChineseInformal>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listLowerRoman>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>

    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listUpperRoman>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listLowerAlpha>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>

  <Box as="ul" listUpperAlpha>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
    <Box as="li">Lorem ipsum dolor sit amet, consectetur adipisicing elit</Box>
  </Box>
</Box>