エクスクルーシブ

Property List `.mv-property-list`

詳細シート向けに、ネイティブの <dl> で作る純粋な CSS のラベルと値のリスト：左にラベル、共通の 1 列にそろえた値、行ごとのオプションのアクション、または罫線で区切られたセルのグリッド。コンテナが狭くなると自動的にラベルと値を縦に積み重ねた形に切り替わります。

カテゴリー	データ表示
タイプ	CSS のみ（`.mv-property-list`）
ステータス	安定版
Keywords	exclusive, property list, description list, key value, details, detail sheet, record, summary, specs, dl, container query, back office

When to use

A customer, invoice or order page shows its fields as label and value pairs, with an Edit button on some rows
A side panel or drawer lists record details that must stack label over value when the panel is narrow
Server, project or product specs read better as a grid of short labeled values than as one long column
An order summary needs labels on the left and right-aligned amounts that never wrap under their label

Avoid when

Many records are compared side by side, with sorting, filtering or selection → use Data table instead
A few headline figures with animated counters and trends lead a page → use Stats instead
The values are editable inputs of a form rather than read-only details → use Field instead

インストール

node scripts/add.mjs property-list --out ./src/marvelous

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["property-list"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, components/property-list/property-list.css。

使い方

クイックスタート、動作する最小限のマークアップ：

<dl class="mv-property-list">
  <div class="mv-property-list-item">
    <dt>Customer</dt>
    <dd>Northwind Traders Ltd.</dd>
  </div>
  <div class="mv-property-list-item">
    <dt>Payment terms</dt>
    <dd>Net 30</dd>
  </div>
</dl>

基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：

<div id="mv-pl-demo" style="display:grid;gap:1.5rem;width:100%">
  <div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:start">

    <!-- Customer sheet: rows layout, one shared label column, actions on some rows -->
    <section class="mv-card" aria-labelledby="mv-pl-account-title" style="flex:2 1 30rem;min-width:0">
      <div class="mv-card-header">
        <h3 class="mv-card-title" id="mv-pl-account-title">Harborline Supply Co.</h3>
        <p class="mv-card-description">Customer since March 2023 · Account C-10482</p>
        <div class="mv-card-action"><span class="mv-badge" data-variant="success">Active</span></div>
      </div>
      <div class="mv-card-content">
        <dl class="mv-property-list">
          <div class="mv-property-list-item">
            <dt>Account owner</dt>
            <dd>
              <span style="display:inline-flex;align-items:center;gap:0.5rem;vertical-align:middle">
                <span class="mv-avatar" data-size="xs" data-variant="tinted" style="--mv-avatar-hue:200" aria-hidden="true"><span class="mv-avatar-fallback">AO</span></span>
                Amara Okafor
              </span>
            </dd>
            <dd class="mv-property-list-action"><button class="mv-button" type="button" data-variant="ghost" data-size="sm" aria-label="Change account owner">Change</button></dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Billing email</dt>
            <dd>[email protected]<small>Verified on Sep 2, 2026</small></dd>
            <dd class="mv-property-list-action"><button class="mv-button" type="button" data-variant="ghost" data-size="sm" aria-label="Edit billing email">Edit</button></dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Phone</dt>
            <dd>+1 (415) 555-0142</dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Tax ID</dt>
            <dd>94-3172650</dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Payment terms</dt>
            <dd>Net 30<small>Credit limit $25,000.00</small></dd>
            <dd class="mv-property-list-action"><button class="mv-button" type="button" data-variant="ghost" data-size="sm" aria-label="Edit payment terms">Edit</button></dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Billing address</dt>
            <dd>1200 Harbor Blvd, Suite 400<br>Oakland, CA 94607<br>United States</dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Notes</dt>
            <dd>Prefers one consolidated invoice per month. A purchase order number is required on every invoice.</dd>
          </div>
        </dl>
      </div>
    </section>

    <!-- Narrow side panel: the same rows stack on their own; totals stay on one line -->
    <aside class="mv-card" aria-labelledby="mv-pl-invoice-title" style="flex:1 1 17rem;min-width:0">
      <div class="mv-card-header">
        <h3 class="mv-card-title" id="mv-pl-invoice-title">Invoice INV-2026-0418</h3>
        <p class="mv-card-description">Sent to Harborline Supply Co.</p>
      </div>
      <div class="mv-card-content" style="display:grid;gap:1.25rem">
        <dl class="mv-property-list" data-size="sm">
          <div class="mv-property-list-item">
            <dt>Status</dt>
            <dd><span class="mv-badge" data-variant="warning">Due in 9 days</span></dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Issued</dt>
            <dd>Sep 12, 2026</dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Due date</dt>
            <dd>Oct 12, 2026<small>Net 30, bank transfer</small></dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Purchase order</dt>
            <dd>PO-77215</dd>
          </div>
        </dl>
        <dl class="mv-property-list" data-variant="plain" data-stack="never" data-align="end" aria-label="Invoice totals">
          <div class="mv-property-list-item">
            <dt>Subtotal</dt>
            <dd>$4,120.00</dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Discount (5%)</dt>
            <dd>&minus;$206.00</dd>
          </div>
          <div class="mv-property-list-item">
            <dt>Sales tax (8.25%)</dt>
            <dd>$322.91</dd>
          </div>
          <div class="mv-property-list-item" data-emphasis>
            <dt>Total due</dt>
            <dd>$4,236.91</dd>
          </div>
        </dl>
      </div>
    </aside>
  </div>

  <!-- Spec sheet: grid layout with uppercase labels and a full-width pair -->
  <section class="mv-card" aria-labelledby="mv-pl-service-title">
    <div class="mv-card-header">
      <h3 class="mv-card-title" id="mv-pl-service-title">api-gateway</h3>
      <p class="mv-card-description">Last deployed Oct 2, 2026 at 9:41 AM by Kenji Watanabe</p>
      <div class="mv-card-action"><span class="mv-badge" data-variant="success">Healthy</span></div>
    </div>
    <div class="mv-card-content">
      <dl class="mv-property-list" data-layout="grid" data-label="caps">
        <div class="mv-property-list-item">
          <dt>Environment</dt>
          <dd>Production</dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Region</dt>
          <dd>US East (Virginia)</dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Instance type</dt>
          <dd>4 vCPU · 16 GB RAM</dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Public IP</dt>
          <dd>203.0.113.42</dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Uptime</dt>
          <dd>99.98%<small>Last 30 days</small></dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Monthly cost</dt>
          <dd>$412.60<small>Estimate for October</small></dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Runtime</dt>
          <dd>Node.js 22 LTS</dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Scaling</dt>
          <dd>2 to 12 instances</dd>
        </div>
        <div class="mv-property-list-item">
          <dt>Owner team</dt>
          <dd>Platform</dd>
        </div>
        <div class="mv-property-list-item" data-span="full">
          <dt>Description</dt>
          <dd>Routes public API traffic to the order, billing and catalog services, and adds instances when CPU load stays above 70% for five minutes.</dd>
        </div>
      </dl>
    </div>
  </section>
</div>

API

Attributes

Name	タイプ	Default	Description
`data-layout`	rows \| stacked \| grid	`rows`	On .mv-property-list. rows (default, or no attribute): label \| value \| action on one line from 30rem of list width, stacked below; stacked: always label over value; grid: ruled cells with the label over the value, as many columns as fit at --mv-property-list-min each, at most --mv-property-list-columns, one column in a narrow list.
`data-stack`	never		On .mv-property-list (rows layout): keeps label and value on one line at any width, for short labels and amounts such as totals in a narrow summary.
`data-variant`	plain \| card		On .mv-property-list. Default: a hairline between pairs. plain: no dividers, tighter rows (summaries, totals). card: bordered surface with inner padding.
`data-size`	sm \| lg		On .mv-property-list: tighter rows (tables, side panels), or roomier rows with base-size text.
`data-align`	end		On .mv-property-list or one .mv-property-list-item: values aligned to the end with tabular figures when the pair is on one line (amounts, totals). Stacked pairs stay aligned to the start.
`data-label`	caps		On .mv-property-list: labels in small uppercase monospace, for spec sheets and editorial pages.
`data-emphasis`	boolean		On a .mv-property-list-item: a ruled, stronger pair for a total or a balance due (label in the main text color, value semibold and larger), in every variant.
`data-span`	full		On a .mv-property-list-item of the grid layout: the pair takes the whole row (description, notes, address).

Content structure

Name	Description
`dl.mv-property-list > div.mv-property-list-item`	One pair: a `<dt>` label, then one or more `<dd>` values (several dd stack in the value column). Wrap every pair in its div: the layout and dividers depend on it.
`dd > small`	Secondary line under a value, muted and smaller (a hint, a date, a verification note).
`dd.mv-property-list-action`	Last child of a pair: buttons or links for that row (Edit, Copy). Its column only exists when one pair has an action; on stacked pairs it moves to the top right.

CSS classes

Name	Description
`mv-property-list`	On `<dl>`. Root and mv-property-list query container: it takes the width of its parent.
`mv-property-list-item`	On the `<div>` around each dt and dd group.
`mv-property-list-action`	On a `<dd>`: action cell of the row.

CSS variables

Name	Default	Description
`--mv-property-list-label-width`	`fit-content(40%)`	Label column of the rows layout, shared by every pair: by default as wide as the longest label, up to 40% of the list. Set a length (10rem) for a fixed column.
`--mv-property-list-min`	`12rem`	Grid layout: smallest column width.
`--mv-property-list-columns`	`3`	Grid layout: most columns.
`--mv-property-list-gap`	`var(--mv-space-6)`	Space between the label, value and action columns, and between grid columns.
`--mv-property-list-rule`	`var(--mv-border)`	Divider color.
`--mv-property-list-label`	`var(--mv-fg-muted)`	Label color.
`--mv-property-list-bg`	`var(--mv-surface)`	card variant: background.
`--mv-property-list-radius`	`var(--mv-radius-lg)`	card variant: corner radius.

Accessibility

Pure CSS on a native description list: each <dt> label is read with its <dd> values, and the <div> wrappers are valid dl content that assistive technologies ignore. The visual order always follows the source order, so reading and Tab order match in every layout. Give an action an accessible name that says which field it acts on (aria-label="Edit billing email"), because it is read as part of the pair. Labels use the muted text token (4.5:1 or more in both themes); dividers are borders, so they stay visible in forced colors. Long values such as emails or IDs wrap instead of overflowing. No animation. Known limits: the <dl> is a size container, so it takes the width of its parent and must be given a width inside a shrink-to-fit parent (an inline-block, or a flex item with no basis); the label column is shared through subgrid, and browsers without subgrid fall back to a fixed one third and two thirds split.