@k4k3ru/design-system-list

CSS-only lists with optional leading content, a headline, description/supporting text and trailing actions. Design tokens take precedence over standalone light/dark fallbacks. No JavaScript, React, or new runtime dependency is required.

@import "@k4k3ru/tokens/dist/style.css";
@import "@k4k3ru/design-system-list/style.css";

<ul class="list list--divided list--responsive" role="list" aria-label="Applications">
  <li class="list__item">
    <div class="list__body">
      <strong class="list__headline">Example application</strong>
      <p class="list__description">Application description</p>
      <p class="list__supporting">Active · Updated today</p>
    </div>
    <div class="list__trailing"><button type="button">Manage</button></div>
  </li>
</ul>

Add list__leading before the body for an icon or avatar. Omit unused slots. list--divided adds decorative lines between items; no extra list items or separator roles are needed. list--responsive moves trailing actions below the content at widths below 600px. Without it, actions stay alongside the body. Use actual links/buttons for interactive content, rather than clickable list items. role="list" preserves list semantics in browsers that suppress them for unstyled lists. Label icon-only actions and hide decorative icons from assistive technology.

Override --list-item-padding-inline, --list-item-padding-block, --list-item-gap, --list-text-gap, --list-color, --list-supporting-color, --list-divider-color, --list-background or the headline/supporting typography variables on the list. Long content wraps; text is not silently truncated.

For loading, reuse loading__skeleton from the Loading package inside these slots. The consuming page owns skeleton shapes, loading state, timing, request cancellation and announcements. This package does not infer skeleton DOM from data.

Build: npm run build. Open example/index.html through a local static server.

References: M3 Lists, Material Web List anatomy, shadcn Separator. These inform anatomy and visual grouping; shared tokens determine appearance.

Smaller size

Use list--smaller on the component root. Item padding and gap; preserves text size.

See shared sizing guidance and examples.