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

import { List, ListActions, ListBody, ListMeta } from "@akonwi/mica/react";

<List ordered>
  <li>
    <ListBody>
      <p>The midfield stayed compact after the break.</p>
      <ListMeta>
        <time dateTime="2026-09-06T16:42:00">Today, 4:42 PM</time>
        <ListActions>
          <button type="button" aria-label="Edit note from 4:42 PM">Edit</button>
        </ListActions>
      </ListMeta>
    </ListBody>
  </li>
</List>
<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.

import { List, ListTrailing } from "@akonwi/mica/react";

<List>
  <li>Renew the domain before March 3.</li>
  <li>
    Rotate the staging API keys <ListTrailing as="time" dateTime="2026-03-03">Mar 3</ListTrailing>
  </li>
</List>
<ul data-list role="list">
  <li>Renew the domain before March 3.</li>
  <li>Rotate the staging API keys <time data-list-trailing datetime="2026-03-03">Mar 3</time></li>
</ul>

Rows may contain an optional leading visual, a flexible data-list-body, and optional trailing information or controls. A row that is one run of text may leave out the body: the li is then its own body, with the same type and wrapping, and a trailing part still sits at the inline end. Several paragraphs, a title with a description, or metadata need data-list-body. 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

import { List } from "@akonwi/mica/react";

<>
  <List>…</List>
  <List dividers="none">…</List>
</>
<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. Optional when the row is one run of text: a row without it is its own body.
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; an m-avatar used as the leading visual follows it, sizing its initials from --list-leading-size and keeping its own text colour. Theme properties can be overridden in ordinary unlayered CSS; list dividers and the containing card border remain independent.

← cardbadge →