Lists

Ready-made, decorative variants for native <ul>/<ol>/<dl> - components/lists.css. Live: Demo.

Important: role="list"

list-style: none removes list SEMANTICS itself in some screen readers (a confirmed older VoiceOver/Safari bug), not just the visual marker. Every variant below that sets list-style: none (all except the dl variants - <dl> has no list-style to begin with) therefore also needs role="list" in the markup, see the examples.

ul variants

Class	Purpose
`.ncss-list--dot`	Subtle, colored dot instead of the bare browser marker
`.ncss-list--dash`	Dash - calmer than `--dot`, suits prose-heavy lists
`.ncss-list--icon`	Icon from the markup (none baked in) - a pure layout class, see below
`.ncss-list--divided`	Horizontal divider instead of a marker - settings/menu-style lists
`.ncss-list--plain`	No marker, no spacing - a bare starting point for your own layout

<ul class="ncss-list--dot" role="list">
  <li>Point one</li>
  <li>Point two</li>
</ul>

.ncss-list--icon deliberately ships with NO baked-in icon (unlike --dot/--dash, which draw pure CSS) - the icon comes from the markup, either ncss' own .ncss-icon-* (Icons) or Font Awesome, the same substitutability as the icon system itself:

<ul class="ncss-list--icon" role="list">
  <li><span class="ncss-icon ncss-icon-check" aria-hidden="true"></span> Included</li>
  <li><span class="ncss-icon ncss-icon-check" aria-hidden="true"></span> Also included</li>
</ul>

ol variant: steps

.ncss-list--steps - a number in a colored circle instead of the bare browser digit, for instructions/sequences. Its own CSS counter (counter-reset/counter-increment) instead of list-style-type, so the number can sit inside its own styled shape (::before):

<ol class="ncss-list--steps" role="list">
  <li>Copy the files</li>
  <li>Adjust theme.css</li>
  <li>Done</li>
</ol>

dl variants

Class	Purpose
`.ncss-dl`	Default - `dt` bold, `dd` muted and indented, stacked
`.ncss-dl--inline`	`dt`/`dd` side by side per row ("label: value") - metadata without a `<table>`
`.ncss-dl--stats`	`dt` as a small label ABOVE a large `dd` figure, several pairs as a tile grid (stats pattern)

<dl class="ncss-dl--inline">
  <dt>Version</dt><dd>2.0</dd>
  <dt>License</dt><dd>MIT</dd>
</dl>

.ncss-dl--stats needs a shared wrapper <div> per dt/dd pair (<dl> allows this for grouping, per spec) - the internal .ncss-grid (intrinsic, no breakpoints needed) needs that wrapper as its own grid item:

<dl class="ncss-dl--stats">
  <div><dt>Users</dt><dd>1,204</dd></div>
  <div><dt>Downloads</dt><dd>328</dd></div>
</dl>

For the same tile pattern with ANY custom content (not just label+number) instead of <dl>: Build Your Own Components.