List style

Set list markers and whether markers appear inside or outside the content box.

Choose a list marker and place it inside or outside the list item’s text box. These classes style semantic ul and ol elements; they do not create list structure for you.

Quick reference

Example class	Expected declarations
`list-disc`	`list-style-type: disc;`
`list-decimal`	`list-style-type: decimal;`
`list-none`	`list-style-type: none;`
`list-inside`	`list-style-position: inside;`
`list-outside`	`list-style-position: outside;`

Example setup

The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. The authored CSS lays out demo cards but leaves list-style-type and list-style-position to the utilities. Semantic list markup supplies the item structure.

Examples in use

Choose a marker type

Semantic unordered and ordered lists compare disc, decimal, and no visible marker.

Choose a marker type

HTML

<div class="wind-demo-list-types">
  <section><strong>Bullets</strong><ul class="list-disc"><li>Choose a route</li><li>Check the source</li></ul></section>
  <section><strong>Steps</strong><ol class="list-decimal"><li>Choose a route</li><li>Check the source</li></ol></section>
  <section><strong>Marker-free links</strong><ul class="list-none"><li>Overview</li><li>Reference</li></ul></section>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-list-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  color: #223247;
}

.wind-demo-list-types section {
  border: 1px solid #b7c5d4;
  padding: .75rem 1rem;
}

.wind-demo-list-types strong {
  color: #5d6c7c;
  font-size: .8rem;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-list-types": true
    },
    "safelist": {
      "docs-preview": [
        "list-disc",
        "list-decimal",
        "list-none"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-list-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; color: #223247; }
.wind-demo-list-types section { border: 1px solid #b7c5d4; padding: 0.75rem 1rem; }
.wind-demo-list-types strong { color: #5d6c7c; font-size: 0.8rem; }

Place markers with wrapped text

The same long list item shows how inside and outside markers align with the second line.

Place markers with wrapped text

HTML

<div class="wind-demo-list-positions">
  <section><strong>Outside</strong><ul class="list-disc list-outside"><li>A long item wraps onto a second line so the marker position stays easy to compare. / 長い項目は2行目に折り返されます。</li><li>Another item</li></ul></section>
  <section><strong>Inside</strong><ul class="list-disc list-inside"><li>A long item wraps onto a second line so the marker position stays easy to compare. / 長い項目は2行目に折り返されます。</li><li>Another item</li></ul></section>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-list-positions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  color: #223247;
}

.wind-demo-list-positions section {
  min-width: 0;
  border: 1px solid #b7c5d4;
  padding: .75rem;
}

.wind-demo-list-positions strong {
  color: #5d6c7c;
  font-size: .8rem;
}
.list-disc {
  list-style-type: disc;
}
.list-inside {
  list-style-position: inside;
}
.list-outside {
  list-style-position: outside;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-list-positions": true
    },
    "safelist": {
      "docs-preview": [
        "list-disc",
        "list-outside",
        "list-inside"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-list-positions { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; color: #223247; }
.wind-demo-list-positions section { min-width: 0; border: 1px solid #b7c5d4; padding: 0.75rem; }
.wind-demo-list-positions strong { color: #5d6c7c; font-size: 0.8rem; }

Custom and named values

list-disc, list-decimal, and list-none select the marker type. list-inside and list-outside control marker placement independently, so combine one marker type with one position when both matter. A list-none navigation still needs meaningful link text and accessible navigation semantics. The catalog currently exposes these fixed choices, with no named marker token or arbitrary marker syntax.

Related guides: Utility grammar · Variants

Catalog details

list-decimal

Field	Value
Catalog identifier	`v1.list-decimal`
Class pattern	`list-decimal`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`list` (`41`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`list-style-type`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"decimal"`

Declaration templates

Property	Value kind	Fixed value
`list-style-type`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`list-decimal`	`list-style-type: decimal`

list-disc

Field	Value
Catalog identifier	`v1.list-disc`
Class pattern	`list-disc`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`list` (`41`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`list-style-type`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"disc"`

Declaration templates

Property	Value kind	Fixed value
`list-style-type`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`list-disc`	`list-style-type: disc`

list-inside

Field	Value
Catalog identifier	`v1.list-inside`
Class pattern	`list-inside`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`list` (`41`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`list-style-position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"inside"`

Declaration templates

Property	Value kind	Fixed value
`list-style-position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`list-inside`	`list-style-position: inside`

list-none

Field	Value
Catalog identifier	`v1.list-none`
Class pattern	`list-none`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`list` (`41`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`list-style-type`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`list-style-type`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`list-none`	`list-style-type: none`

list-outside

Field	Value
Catalog identifier	`v1.list-outside`
Class pattern	`list-outside`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`list` (`41`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`list-style-position`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"outside"`

Declaration templates

Property	Value kind	Fixed value
`list-style-position`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`list-outside`	`list-style-position: outside`

List style

Quick reference

Examples in use

Choose a marker type

Place markers with wrapped text

Custom and named values

list-decimal

Accepted values

Declaration templates

Catalog examples

list-disc

Accepted values

Declaration templates

Catalog examples

list-inside

Accepted values

Declaration templates

Catalog examples

list-none

Accepted values

Declaration templates

Catalog examples

list-outside

Accepted values

Declaration templates

Catalog examples

Revision History