Natcore LogoNatCorev2 — In Progress
v2 — In Progress

List

Structured lists with optional interactive rows, unordered markers, or decimal counters. Mark each child item with data-slot="item" so the list component can apply spacing, markers, and row states.

At a glance

  • Profile
  • Security
  • Notifications
  • Design tokens
  • Component builders
  • Generated utilities
  1. Choose a component class
  2. Add data-slot="item" to each child
  3. Pick disc or decimal when needed

Playground

Controls
Preview
  • Profile
  • Security
  • Notifications
Codehtml
<ul class="list/primary">
  <li data-slot="item">Profile</li>
  <li data-slot="item" class="active">Security</li>
  <li data-slot="item">Notifications</li>
</ul>

List

component

Applies base list reset, vertical spacing, and interactive item states. Use the optional palette modifier to tune hover and active colors.

Pattern
list[/{palette}]
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited

Interactive

Use the base list class for action lists, navigation rows, or selectable option groups.
  • Profile
  • Security
  • Notifications
Codehtml
<ul class="list/primary">
  <li data-slot="item">Profile</li>
  <li data-slot="item" class="active">Security</li>
  <li data-slot="item">Notifications</li>
</ul>

Palettes

The base list supports tone palettes for hover and active row states.
  • Profile
  • Security
  • Notifications
  • Profile
  • Security
  • Notifications
Codehtml
<ul class="list/primary">
  <li data-slot="item">Profile</li>
  <li data-slot="item" class="active">Security</li>
  <li data-slot="item">Notifications</li>
</ul>
<ul class="list/accent">
  <li data-slot="item">Profile</li>
  <li data-slot="item" class="active">Security</li>
  <li data-slot="item">Notifications</li>
</ul>

Marker Style

component

Switches the list marker treatment. Use list-disc for unordered content and list-decimal for ordered steps.

Pattern
list-{variant}[/{palette}]
Variant
disc/decimal
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited

Disc

Use list-disc for unordered content where rows should read as static list items.
  • Design tokens
  • Component builders
  • Generated utilities
Codehtml
<ul class="list-disc/secondary">
  <li data-slot="item">Design tokens</li>
  <li data-slot="item">Component builders</li>
  <li data-slot="item">Generated utilities</li>
</ul>

Decimal

Use list-decimal for ordered sequences. Counters are generated by the component.
  1. Choose a component class
  2. Add data-slot="item" to each child
  3. Pick disc or decimal when needed
Codehtml
<ol class="list-decimal/accent">
  <li data-slot="item">Choose a component class</li>
  <li data-slot="item">
    Add data-slot="item" to each child
  </li>
  <li data-slot="item">Pick disc or decimal when needed</li>
</ol>

Item Slot

slot

Add data-slot="item" to direct children so list styles can target each row or marker item.

item
[data-slot="item"]

Slot Markup

The item slot keeps the child markup explicit while allowing the builder to document the selector.
  • First item
  • Second item
  • Third item
Codehtml
<ul class="list/primary">
  <li data-slot="item">First item</li>
  <li data-slot="item">Second item</li>
  <li data-slot="item">Third item</li>
</ul>

API Reference

Classes

componentlist[/{palette}]
component
Applies base list reset, vertical spacing, and interactive item states. Use the optional palette modifier to tune hover and active colors.
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
componentlist-{variant}[/{palette}]
component
Switches the list marker treatment. Use list-disc for unordered content and list-decimal for ordered steps.
Variant
disc/decimal
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited

Slots

slotitem
slot
Add data-slot="item" to direct children so list styles can target each row or marker item.
selector:[data-slot="item"]
On this page