Info row

wu-info-row shows one label and value pair: the label at the start, the value at the end. Adjacent rows get a line between them, and long values wrap.

Class	Effect
`wu-info-row`	Root. Label and value on one row, wrapping when narrow
`wu-info-row-label`	Part. Muted label
`wu-info-row-value`	Part. Value, end-aligned, tabular figures
`total`	Total row: strong line above, bold label and larger value

Rows

Subtotal $120.00

Tax $9.60

Total $129.60

<div>
  <div class="wu-info-row">
    <span class="wu-info-row-label">Subtotal</span>
    <span class="wu-info-row-value">$120.00</span>
  </div>
  <div class="wu-info-row">
    <span class="wu-info-row-label">Tax</span>
    <span class="wu-info-row-value">$9.60</span>
  </div>
  <div class="wu-info-row total">
    <span class="wu-info-row-label">Total</span>
    <span class="wu-info-row-value">$129.60</span>
  </div>
</div>

In a description list

The rows also work as <div> groups with <dt> and <dd> inside a <dl>.

Order: #10482
Tracking: 1Z999AA10123456784

<dl>
  <div class="wu-info-row">
    <dt class="wu-info-row-label">Order</dt>
    <dd class="wu-info-row-value">#10482</dd>
  </div>
  <div class="wu-info-row">
    <dt class="wu-info-row-label">Tracking</dt>
    <dd class="wu-info-row-value">1Z999AA10123456784</dd>
  </div>
</dl>

Info row or description list

Use the info row for a short summary read as label and value pairs, such as an order total or a details panel. Use the description list for longer terms and descriptions, or when a description runs over several lines.

Right to left

Labels sit at the right and values at the left.

المجموع الفرعي $120.00

الإجمالي $129.60

<div>
  <div class="wu-info-row">
    <span class="wu-info-row-label">المجموع الفرعي</span>
    <span class="wu-info-row-value">$120.00</span>
  </div>
  <div class="wu-info-row total">
    <span class="wu-info-row-label">الإجمالي</span>
    <span class="wu-info-row-value">$129.60</span>
  </div>
</div>

Load only the info row

@use "@wovenui/components/info-row";

The info row needs no other component.