{
  "id": "L02",
  "title": "Two-line list",
  "topic": "lists",
  "use": "The normal case — an entry over two lines. The first says what it is about, the second whom it belongs to. On the right stands a column of fixed width, here the deadline. There is no third line of text; what would land there belongs into the column on the right or onto the detail page.",
  "decisions": [
    "Exactly one secondary line: the first line says what the entry is about, the second whom it belongs to. What does not fit there goes into the column on the right or onto the detail page — three lines per entry turn a list into a block of text in which nothing is found.",
    "The deadline column has a fixed width: otherwise each deadline starts somewhere else and they form no line along which they can be compared.",
    "A deadline is a date, and a near one says how near beside it — “08/26/2026 · in 2 days”: whoever passes a deadline on needs the date, so it stands in the line for everyone, not only on hover. Its time stands in the time element's datetime."
  ],
  "try": [
    {
      "do": "Read the deadlines on the right from top to bottom",
      "then": "they start on one edge, because their column has a fixed width"
    },
    {
      "do": "Read the second deadline",
      "then": "the date stands first, 08/26/2026, and “in 2 days” beside it"
    },
    {
      "do": "Count the lines of each entry",
      "then": "two in every entry — what it is about, and whom it belongs to"
    },
    {
      "do": "Make the window narrow",
      "then": "the text column gives way, the deadline column keeps its width"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<style>\n  /* One width for every deadline, so they start on one edge. */\n  .l02-due {\n    inline-size: 10.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 tasks these are, come from the screen around the pattern; SC01 places them. -->\n\n  <ed-list label=\"Open tasks\">\n    <ed-list-item>\n      Payroll tax return July 2026\n      <span slot=\"description\">Bergmann &amp; Söhne Fahrzeugtechnik GmbH &amp; Co. KG · 104721</span>\n      <span slot=\"end\" class=\"l02-due\"><time datetime=\"2026-08-10T23:59\">08/10/2026</time> · overdue</span>\n    </ed-list-item>\n    <ed-list-item>\n      Contribution statement August 2026\n      <span slot=\"description\">Bergmann &amp; Söhne Fahrzeugtechnik GmbH &amp; Co. KG · 104721</span>\n      <span slot=\"end\" class=\"l02-due\"><time datetime=\"2026-08-26T12:00\">08/26/2026</time> · in 2 days</span>\n    </ed-list-item>\n    <ed-list-item>\n      Advance VAT return July 2026\n      <span slot=\"description\">Steinbach-Wallner Immobilienverwaltung GmbH · 104733</span>\n      <span slot=\"end\" class=\"l02-due\"><time datetime=\"2026-09-10T23:59\">09/10/2026</time></span>\n    </ed-list-item>\n    <ed-list-item>\n      Social insurance registration — new hire\n      <span slot=\"description\">Odenwälder Präzisionsguss AG · 104688</span>\n      <span slot=\"end\" class=\"l02-due\"><time datetime=\"2026-09-15T23:59\">09/15/2026</time></span>\n    </ed-list-item>\n    <ed-list-item>\n      Approve annual accounts 2025\n      <span slot=\"description\">Dr. Kettner-Lohmeyer Zahnmedizin MVZ GmbH · 104802</span>\n      <span slot=\"end\" class=\"l02-due\"><time datetime=\"2026-09-30T23:59\">09/30/2026</time></span>\n    </ed-list-item>\n  </ed-list>\n</div>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l02-two-line-list/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}
