Lists

Styled unordered, ordered, description, and unstyled lists for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/lists.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-list`	Base list typography and left padding
`.dsx-list--ul`	Bulleted unordered list
`.dsx-list--ol`	Numbered ordered list
`.dsx-list--dl`	Description list layout using CSS Grid
`.dsx-list--none`	Removes bullets / numbers and left padding

Behavior

Base list text uses var(--ds2-font-size-sm) and var(--ds2-line-height-base).
List items get vertical padding var(--ds2-space-1).
Nested unordered lists switch from disc to circle markers.
Description lists create a two-column dt/dd layout with the term in var(--ds2-color-main).

Example

<ul class="dsx-list dsx-list--ul">
  <li>First item</li>
  <li>Second item
    <ul class="dsx-list dsx-list--ul">
      <li>Nested item</li>
    </ul>
  </li>
</ul>

<dl class="dsx-list dsx-list--dl">
  <dt>Status</dt>
  <dd>In progress</dd>
  <dt>Owner</dt>
  <dd>Design System Team</dd>
</dl>

Accessibility notes

Use real <ul>, <ol>, and <dl> elements.
Keep nested lists inside parent <li> elements.
Use .dsx-list--none only when the list semantics still matter without markers.
Description lists should contain true term/description pairs, not general layout content.