{
  "id": "L04",
  "title": "Trailing metadata",
  "topic": "lists",
  "use": "Entries that carry a state, an amount and a date. The three stand on the right in this order — from the coarsest to the finest. Each value has a fixed width of its own; otherwise the amount starts somewhere else in every entry. The state is a badge with a word, not a colored row.",
  "decisions": [
    "Each value gets a fixed width of its own, not the group as a whole: otherwise a longer state pushes everything after it, and the amount starts somewhere else in every entry.",
    "The order is state, amount, date — from the coarsest to the finest, so the entry is read from the outside in, and the same in every entry.",
    "The state is a badge with a word: a colored row says nothing that can be read aloud, and for one man in twelve it says nothing at all.",
    "Amounts stand right-aligned in tabular figures, so their decimal places line up.",
    "Three values are the limit: whoever needs a fourth is comparing values across entries, and that is a table."
  ],
  "try": [
    {
      "do": "Read the amounts from top to bottom",
      "then": "they end on one edge, however long the state before them is"
    },
    {
      "do": "Compare the states",
      "then": "each carries a word, not only a color"
    },
    {
      "do": "Make the window narrow",
      "then": "the text column gives way; state, amount and date keep their widths"
    },
    {
      "do": "Check the order in each entry",
      "then": "state, amount, date — the same in every entry"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<style>\n  /* One width per value, so states, amounts and dates each stand in a column of their own. */\n  .l04-state {\n    inline-size: 6.5rem;\n  }\n\n  .l04-amount {\n    inline-size: 6rem;\n  }\n\n  .l04-date {\n    inline-size: 5.5rem;\n  }\n</style>\n\n<div class=\"ed-stack ed-gap-4\">\n  <!-- Demo only, not part of the pattern. The screen's title, and whose vouchers these are, come from the screen around the pattern; SC01 places them. -->\n\n  <ed-list label=\"Vouchers August 2026\">\n    <ed-list-item>\n      RE-2026-04188\n      <span slot=\"description\">Maintenance of the lift in hall 2 · account 8400</span>\n      <span slot=\"end\" class=\"l04-state\"><ed-badge variant=\"success\">Posted</ed-badge></span>\n      <span slot=\"end\" class=\"l04-amount ed-text-end ed-text-tabular\">€4,812.50</span>\n      <span slot=\"end\" class=\"l04-date ed-text-end\">08/04/2026</span>\n    </ed-list-item>\n    <ed-list-item>\n      RE-2026-04189\n      <span slot=\"description\">Spare parts Odenwälder Präzisionsguss · account 4830</span>\n      <span slot=\"end\" class=\"l04-state\"><ed-badge variant=\"success\">Posted</ed-badge></span>\n      <span slot=\"end\" class=\"l04-amount ed-text-end ed-text-tabular\">€1,247.90</span>\n      <span slot=\"end\" class=\"l04-date ed-text-end\">08/07/2026</span>\n    </ed-list-item>\n    <ed-list-item>\n      RE-2026-04190\n      <span slot=\"description\">Tire change for the Steinbach-Wallner fleet · account 8400</span>\n      <span slot=\"end\" class=\"l04-state\"><ed-badge variant=\"warning\">In review</ed-badge></span>\n      <span slot=\"end\" class=\"l04-amount ed-text-end ed-text-tabular\">€386.45</span>\n      <span slot=\"end\" class=\"l04-date ed-text-end\">08/11/2026</span>\n    </ed-list-item>\n    <ed-list-item>\n      RE-2026-04191\n      <span slot=\"description\">Office flat fee August · account 4120</span>\n      <span slot=\"end\" class=\"l04-state\"><ed-badge variant=\"success\">Posted</ed-badge></span>\n      <span slot=\"end\" class=\"l04-amount ed-text-end ed-text-tabular\">€2,500.00</span>\n      <span slot=\"end\" class=\"l04-date ed-text-end\">08/14/2026</span>\n    </ed-list-item>\n    <ed-list-item>\n      RE-2026-04192\n      <span slot=\"description\">Hotel in Neunkirchen, series 4471 · account 4670</span>\n      <span slot=\"end\" class=\"l04-state\"><ed-badge variant=\"danger\">Rejected</ed-badge></span>\n      <span slot=\"end\" class=\"l04-amount ed-text-end ed-text-tabular\">€164.00</span>\n      <span slot=\"end\" class=\"l04-date ed-text-end\">08/18/2026</span>\n    </ed-list-item>\n  </ed-list>\n</div>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l04-trailing-metadata/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}
