mica
mica

list

Native lists with inset dividers, flexible content, and optional metadata and actions. No item cards or imposed interaction.

Example

  • Opposition reportPDF · Updated today
    2.4 MB
  • Second-half clipsVideo · 8 clips

Entries share a list rather than each receiving a card. Dividers separate rows by default; metadata, leading visuals, and actions are optional.

Open the complete example for editable sample notes, files, and people. See cards for the same list inside a shared surface.

Usage

<ol data-list role="list">
  <li>
    <div data-list-body>
      <p>The midfield stayed compact after the break.</p>
      <div data-list-meta>
        <time datetime="2026-09-06T16:42:00">Today, 4:42 PM</time>
        <div data-list-actions>
          <button type="button" aria-label="Edit note from 4:42 PM">Edit</button>
        </div>
      </div>
    </div>
  </li>
</ol>

Use a native ul or ol with direct li children. Explicit role="list" preserves list semantics when markers are removed in Safari. Use ol when ordering matters. If visible rank matters, author it as leading content; Mica does not generate numbers.

Rows may contain an optional leading visual, a flexible data-list-body, and optional trailing information or controls. For long notes, put metadata and actions beneath the body text so they can wrap naturally. Use an app-specific rule such as white-space:pre-wrap when notes need to preserve line breaks.

These are ordinary lists, not listboxes, menus, or grids. There is no row-wide click target, hover fill, keyboard controller, selection state, or generated icon. Author native links and buttons for actions. Give repeated action buttons record-specific accessible names; keep decorative icons hidden from assistive technology.

Dividers and composition

<ul data-list role="list">…</ul>
<ul data-list data-dividers="none" role="list">…</ul>

Inset dividers are the default. Opt out with data-dividers="none"; only their paint changes, preserving row spacing. Omit the attribute to restore dividers. The list has no outer border or background.

Set --list-inset on the list to inset both its rows and dividers. Its default is zero, suitable for a page or an already-padded parent. Inside a direct m-card-body flush, Mica uses the card’s --card-pad automatically. Dividers remain aligned with content rather than spanning the outer card.

An empty collection can use an ordinary paragraph next to the list. Loading and errors can compose with skeletons and callouts. Application code owns data, editing, deletion, focus restoration, and any live announcements. The list presentation requires no JavaScript module.

API

HookContract
ul/ol[data-list]Native list containing direct list items.
data-dividers="none"Optional on the list; hides row divider paint.
data-list-leadingOptional direct row child for an authored icon, avatar, or rank.
data-list-bodyFlexible row child containing text, links, and optional metadata.
data-list-title, data-list-descriptionOptional emphasis and secondary-text hooks; use an appropriate native element.
data-list-metaWrapping secondary information below the main content.
data-list-actionsWrapping native action buttons, usually within metadata.
data-list-trailingOptional direct row child for metadata or controls at the inline end.

Defaults: --list-inset 0px; --list-divider-color border role; --list-row-padding space-md; --list-gap space-sm; --list-align flex-start; --list-leading-size 2rem; --list-font-size .875rem; --list-line-height 1.55; --list-title-weight 600; --list-description-size .8125rem; --list-meta-size .75rem.

Set --list-align:center for compact file or people rows. Change leading size for your artwork. Theme properties can be overridden in ordinary unlayered CSS; list dividers and the containing card border remain independent.

← cardbadge →