Typography Components

List

A container for displaying a series of related items in an ordered or unordered fashion. It provides consistent styling for list elements.

Source Edit this page

Basic usage

List renders an unordered list with bullet points by default.

First item in the list
Second item in the list
Third item in the list

<List>
  <ListItem>First item in the list</ListItem>
  <ListItem>Second item in the list</ListItem>
  <ListItem>Third item in the list</ListItem>
</List>

Lists come in different sizes: xs, sm, md (default), lg, xl. Font size, line height, padding, and the gap between items all scale together via the CSS-variable pipeline. ListItem has no size default of its own. It inherits from the parent List, so <List xl> propagates to every item without repeating the prop.

Extra small item
Extra small item two

Small list item
Another small item

Large list item
Another large item

Extra large item
Another extra large item

<Col>
  <List xs>
    <ListItem>Extra small item</ListItem>
    <ListItem>Extra small item two</ListItem>
  </List>
  <List sm>
    <ListItem>Small list item</ListItem>
    <ListItem>Another small item</ListItem>
  </List>
  <List lg>
    <ListItem>Large list item</ListItem>
    <ListItem>Another large item</ListItem>
  </List>
  <List xl>
    <ListItem>Extra large item</ListItem>
    <ListItem>Another extra large item</ListItem>
  </List>
</Col>

Appearances

Lists use inherit appearance by default: they inherit color from their parent and stay transparent with no background of their own. Use explicit appearances like primary, success, danger to override the text color. Because a List has no background of its own, place it inside a filled container like Card when you want a surface behind it.

Primary colored item
Another primary item

Success colored item
Another success item

Danger colored item
Another danger item

List on a filled Card surface
The Card provides the background

<Col>
  <List primary>
    <ListItem>Primary colored item</ListItem>
    <ListItem>Another primary item</ListItem>
  </List>
  <List success>
    <ListItem>Success colored item</ListItem>
    <ListItem>Another success item</ListItem>
  </List>
  <List danger>
    <ListItem>Danger colored item</ListItem>
    <ListItem>Another danger item</ListItem>
  </List>
  <Card secondary filled>
    <List>
      <ListItem>List on a filled Card surface</ListItem>
      <ListItem>The Card provides the background</ListItem>
    </List>
  </Card>
</Col>

List style types

List supports six marker types: disc (default for unordered), decimal (default for ordered), circle, square, lowerAlpha, and lowerRoman. Setting decimal, lowerAlpha, or lowerRoman switches the element from <ul> to <ol>.

Unordered (disc)

Bullet point one
Bullet point two

circle

Hollow circle marker
Second item

square

Filled square marker
Second item

Ordered (decimal)

Step one
Step two

lowerAlpha

Lowercase letters
Second item

lowerRoman

Lowercase roman
Second item

<Col>
  <div>
    <Text semibold>Unordered (disc)</Text>
    <List disc>
      <ListItem>Bullet point one</ListItem>
      <ListItem>Bullet point two</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>circle</Text>
    <List circle>
      <ListItem>Hollow circle marker</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>square</Text>
    <List square>
      <ListItem>Filled square marker</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>Ordered (decimal)</Text>
    <List decimal>
      <ListItem>Step one</ListItem>
      <ListItem>Step two</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>lowerAlpha</Text>
    <List lowerAlpha>
      <ListItem>Lowercase letters</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>lowerRoman</Text>
    <List lowerRoman>
      <ListItem>Lowercase roman</ListItem>
      <ListItem>Second item</ListItem>
    </List>
  </div>
</Col>

Marker position (inside vs outside)

Use outside (the default) to hang markers outside the content box so multi-line items align under the first character. Use inside to place markers inline with text. Compact, but wrapped lines flow under the marker.

outside (default)

A short item.
A much longer item that wraps onto a second line so you can see the hanging marker behaviour.

inside

A short item.
A much longer item that wraps onto a second line, markers flow inline with the text.

<Col>
  <div>
    <Text semibold>outside (default)</Text>
    <List outside className="w-64">
      <ListItem>A short item.</ListItem>
      <ListItem>A much longer item that wraps onto a second line so you can see the hanging marker behaviour.</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>inside</Text>
    <List inside className="w-64">
      <ListItem>A short item.</ListItem>
      <ListItem>A much longer item that wraps onto a second line, markers flow inline with the text.</ListItem>
    </List>
  </div>
</Col>

Nested lists: automatic marker progression

Nested unordered lists automatically progress disc → circle → square. Nested ordered lists progress decimal → lowerAlpha → lowerRoman. Override a specific nested list with inline style={{ listStyleType: "..." }}. The parent descendant selector wins over a child utility class on specificity, so inline style is the escape hatch.

Unordered (ul)

Level 0: disc
Parent
- Level 1: circle
- Parent
  - Level 2: square

Ordered (ol)

Level 0: decimal
Parent
1. Level 1: lowerAlpha
2. Parent
  1. Level 2: lowerRoman

<Col>
  <div>
    <Text semibold>Unordered (ul)</Text>
    <List>
      <ListItem>Level 0: disc</ListItem>
      <ListItem>
        Parent
        <List>
          <ListItem>Level 1: circle</ListItem>
          <ListItem>
            Parent
            <List>
              <ListItem>Level 2: square</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
    </List>
  </div>
  <div>
    <Text semibold>Ordered (ol)</Text>
    <List decimal>
      <ListItem>Level 0: decimal</ListItem>
      <ListItem>
        Parent
        <List decimal>
          <ListItem>Level 1: lowerAlpha</ListItem>
          <ListItem>
            Parent
            <List decimal>
              <ListItem>Level 2: lowerRoman</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
    </List>
  </div>
</Col>

Item spacing (gap vs noGap)

Lists apply a size-driven gap by default: a sibling margin between items that scales with the list's size prop. Use noGap to remove it entirely for a compact layout (useful for checklists or dense content).

Default gap

Item one
Item two
Item three

noGap

Item one
Item two
Item three

<Col>
  <div>
    <Text semibold>Default gap</Text>
    <List>
      <ListItem>Item one</ListItem>
      <ListItem>Item two</ListItem>
      <ListItem>Item three</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>noGap</Text>
    <List noGap>
      <ListItem>Item one</ListItem>
      <ListItem>Item two</ListItem>
      <ListItem>Item three</ListItem>
    </List>
  </div>
</Col>

Custom item icons

Pass an icon node to a ListItem to replace the native marker on that item only. The icon wrapper is sized to match the text font size (1em) and scales with the list size, so checkmarks, arrows, or any custom SVG align cleanly with the text. For decorative glyphs, include aria-hidden="true" on the icon node.

Ship the feature
Write the tests
Update the docs
Plain item keeps the native marker

<List>
  <ListItem icon={<span aria-hidden="true">✓</span>}>Ship the feature</ListItem>
  <ListItem icon={<span aria-hidden="true">✓</span>}>Write the tests</ListItem>
  <ListItem icon={<span aria-hidden="true">→</span>}>Update the docs</ListItem>
  <ListItem>Plain item keeps the native marker</ListItem>
</List>

Styling

Combine font properties like bold, italic, mono with lists.

Bold list items
Another bold item

code --install extension
npm run build

<Col>
  <List semibold>
    <ListItem>Bold list items</ListItem>
    <ListItem>Another bold item</ListItem>
  </List>
  <List mono>
    <ListItem>code --install extension</ListItem>
    <ListItem>npm run build</ListItem>
  </List>
</Col>

List Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance	✓	Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`heading`	Font Family		Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)
`mono`	Font Family		Monospace font family
`sans`	Font Family	✓	Sans-serif font family (default)
`serif`	Font Family		Serif font family
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`black`	Font Weight		Black font weight (900)
`bold`	Font Weight		Bold font weight (700)
`extrabold`	Font Weight		Extra bold font weight (800)
`extralight`	Font Weight		Extra light font weight (200)
`light`	Font Weight		Light font weight (300)
`medium`	Font Weight		Medium font weight (500)
`normal`	Font Weight	✓	Normal font weight (400)
`semibold`	Font Weight		Semibold font weight (600)
`thin`	Font Weight		Thin font weight (100)
`inheritBg`	Inherit Bg		Inherit background color from parent via CSS variable cascade
`noInheritBg`	Inherit Bg		Keep own background; do not inherit from parent
`inheritColor`	Inherit Color		Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission)
`noInheritColor`	Inherit Color		Keep own text color; do not inherit from parent
`inheritSize`	Inherit Size		Inherit font-size and line-height from the nearest parent typography element
`noInheritSize`	Inherit Size		Keep own font-size; do not inherit from parent
`inside`	List Position		Place list markers inside the content area (list-style-position: inside)
`outside`	List Position	✓	Hang list markers outside the content area (list-style-position: outside)
`circle`	List Style		Hollow circle — typically 2nd-depth unordered marker
`decimal`	List Style		Arabic numerals — default for ordered lists
`disc`	List Style	✓	Filled bullet — default for unordered lists
`lowerAlpha`	List Style		Lowercase letters a, b, c — typically 2nd-depth ordered marker
`lowerRoman`	List Style		Lowercase roman i, ii, iii — typically 3rd-depth ordered marker
`square`	List Style		Filled square — typically 3rd-depth unordered marker
`noPadding`	Padding		Disable internal padding
`padding`	Padding	✓	Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove text decoration (no underline, strikethrough, etc.)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration		Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`transparent`	Transparent	✓	Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint

VaneUI