List Style Type

Utilities for controlling the style of a list.

React propsCSS Properties
listStyleType={type}list-style-type: {type};


To create custom lists, use the listStyleType={type} utilities.

<> <template preview> <x.div spaceY={8}> {['disc', 'decimal', 'circle', 'square', 'none'].map((listStyleType) => ( <x.dl key={listStyleType} color="pink-700" overflow="hidden"> <x.dt w={16} flexShrink={0} fontSize="sm" opacity={0.8} fontFamily="mono" mb={1} > listStyleType={listStyleType} </x.dt> <x.dd fontSize="xl" m={0}> <x.ul my={0} listStyleType={listStyleType}> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> <li> Assumenda, quia temporibus eveniet a libero incidunt suscipit </li> <li> Quidem, ipsam illum quis sed voluptatum quae eum fugit earum </li> </x.ul> </x.dd> </x.dl> ))} </x.div> </template> {/* inline styles required to override smooth-doc */} <x.ul listStyleType="disc" style="list-style-type: disc"> <li>Lorem ipsum ...</li> </x.ul> <x.ul listStyleType="decimal" style="list-style-type: decimal"> <li>Lorem ipsum ...</li> </x.ul> <x.ul listStyleType="circle" style="list-style-type: circle"> <li>Lorem ipsum ...</li> </x.ul> <x.ul listStyleType="square" style="list-style-type: circle"> <li>Lorem ipsum ...</li> </x.ul> <x.ul listStyleType="none" style="list-style-type: none"> <li>Lorem ipsum ...</li> </x.ul> </>


To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property listStyleType={{ md: "disc" }} to an element would apply the listStyleType="disc" utility at medium screen sizes and above.

<x.div listStyleType={{ md: 'disc' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub