{
  "name": "utilities/pairs",
  "title": "Pairs",
  "description": "Use the `ed-pairs` class to lay out the label and value pairs of a record on a grid that stays the same from the first section of a page to the last.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/pairs/",
  "sections": [
    {
      "heading": "Pairs",
      "markdown": "Use the `ed-pairs` class to lay out the label and value pairs of a record on a grid that stays the same from the first section of a page to the last.\n\nReading a record means reading pairs: a label naming a property, a value giving it. The value carries the information, the label says which value it is — so the value gets `--ed-color-text` at medium weight, the label `--ed-color-label` one size down. The class sets both, and it sets tabular numerals on the value so amounts under one another line up on the decimal point.\n\n```html\n<dl class=\"ed-pairs\">\n  <div>\n    <dt>Period</dt>\n    <dd>July 2026</dd>\n  </div>\n  <div>\n    <dt>Entries</dt>\n    <dd>96</dd>\n  </div>\n  <div>\n    <dt>Total</dt>\n    <dd>63,865.84 €</dd>\n  </div>\n  <div>\n    <dt>Opening balance</dt>\n    <dd>0.00 €</dd>\n  </div>\n</dl>\n```"
    },
    {
      "heading": "Markup",
      "markdown": "A pair list is a description list: `dl` with `dt` and `dd`. Not a table — a table implies rows that compare across columns, and these do not.\n\nEach pair is wrapped in a `div`, which the HTML specification allows inside a `dl` for exactly this purpose ([WHATWG HTML § 4.4.9](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)). The wrapper is what makes the pair one grid cell: `dt` and `dd` as direct children would each take a cell of their own, putting a label beside the previous value."
    },
    {
      "heading": "One grid for the whole page",
      "markdown": "The column count is decided once for a page, not once per section, so labels and values form continuous vertical lines from the first section to the last. This is the single most visible difference between a detail page that looks built and one that looks assembled.\n\nThe count is not set as a number — it follows from `--ed-pairs-min-column-size`, which **inherits**. One declaration on a page container reaches every section below it, equal section widths then yield the same count in each, and all of them reduce their columns together when the viewport narrows.\n\n```html\n<div style=\"--ed-pairs-min-column-size: 12rem;\">\n  <h3 class=\"ed-heading-m\">Master data</h3>\n  <dl class=\"ed-pairs\">\n    <div>\n      <dt>Client number</dt>\n      <dd>104721</dd>\n    </div>\n    <div>\n      <dt>Legal form</dt>\n      <dd>GmbH &amp; Co. KG</dd>\n    </div>\n    <div>\n      <dt>VAT identification number</dt>\n      <dd>DE 815 472 093</dd>\n    </div>\n    <div>\n      <dt>Registry number</dt>\n      <dd>HRA 4711</dd>\n    </div>\n  </dl>\n\n  <h3 class=\"ed-heading-m\">Bank details</h3>\n  <dl class=\"ed-pairs\">\n    <div>\n      <dt>IBAN</dt>\n      <dd>DE02 1203 0000 0000 2020 51</dd>\n    </div>\n    <div>\n      <dt>BIC</dt>\n      <dd>BYLADEM1001</dd>\n    </div>\n  </dl>\n</div>\n```\n\nThe second section has fewer pairs than there are columns, and it leaves the trailing cells empty rather than spreading its pairs across the full width. Those empty cells are correct: they keep the columns in place for everything below.\n\nThree or four columns is the working range, because labels like `VAT identification number` need the room. Six is the ceiling, and only where labels are short."
    },
    {
      "heading": "Long values",
      "markdown": "A pair whose value does not fit one column takes two, rather than wrapping to a second line. Set `--ed-pairs-span` on that pair — on the wrapper, not on the list, because it is a decision about one value.\n\n```html\n<dl class=\"ed-pairs\" style=\"--ed-pairs-min-column-size: 12rem;\">\n  <div style=\"--ed-pairs-span: 2;\">\n    <dt>Client</dt>\n    <dd>Bergmann &amp; Sons Vehicle Technology GmbH &amp; Co. KG</dd>\n  </div>\n  <div>\n    <dt>Client number</dt>\n    <dd>104721</dd>\n  </div>\n  <div>\n    <dt>Period</dt>\n    <dd>July 2026</dd>\n  </div>\n  <div>\n    <dt>Entries</dt>\n    <dd>96</dd>\n  </div>\n</dl>\n```\n\nWhere several values on one page would need the span, the minimum column size is too small."
    },
    {
      "heading": "Inline pairs",
      "markdown": "`ed-pairs-inline` puts the label and its value on one line. The label column takes the width of the widest label and is right-aligned within it, so every label sits next to its value and the values form one vertical line. Without that column the values stagger, and a staggered column of values has no line for the eye to follow.\n\nThis form needs no wrapper — `dt` and `dd` flow straight into the two columns.\n\n```html\n<dl class=\"ed-pairs-inline\">\n  <dt>Period</dt>\n  <dd>July 2026</dd>\n  <dt>Entries</dt>\n  <dd>96</dd>\n  <dt>Total</dt>\n  <dd>63,865.84 €</dd>\n</dl>\n```\n\nReach for it with up to about six pairs, short values, and where vertical space is scarce — a card header, a drawer summary, a compact block beside something else. If the widest label would take more than roughly a third of the block's width, the value line is pushed so far right that the pairing stops reading: switch to the stacked form instead of truncating the label.\n\nNever mix the two arrangements inside one block."
    },
    {
      "heading": "Gap",
      "markdown": "By default the gap uses `--ed-space-4` between rows and `--ed-space-6` between columns. Add any [`ed-gap-N`](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/gap) class to set both at once.\n\n```html\n<dl class=\"ed-pairs ed-gap-8\" style=\"--ed-pairs-min-column-size: 10rem;\">\n  <div>\n    <dt>Period</dt>\n    <dd>July 2026</dd>\n  </div>\n  <div>\n    <dt>Entries</dt>\n    <dd>96</dd>\n  </div>\n  <div>\n    <dt>Total</dt>\n    <dd>63,865.84 €</dd>\n  </div>\n</dl>\n```"
    }
  ]
}