{
  "id": "L05",
  "title": "Divider or cards",
  "topic": "lists",
  "use": "How the entries of a list are told apart — by a divider or as cards. Spacing alone is not enough; rows without a separation read as one continuous mass. The divider is the normal case, also for entries with buttons of their own that fit the row (L06). Cards come in only once an entry carries more than a row holds — an attachment, a row of actions of its own, a progress.",
  "decisions": [
    "Spacing alone is not enough: three entries without a separation are one block of text. It takes an edge — a line or a surface.",
    "The divider is the normal case: it costs no height, keeps the list calm and lets the entries read as one thing. ed-list draws it itself, and it holds two lines, a value on the right and up to two buttons with a More menu (L06).",
    "Cards from the moment an entry carries more than a row holds — an attachment, a row of actions of its own, a progress: then the entry is a thing, not a row, and a thing needs an edge.",
    "Never both at once: the cards are not entries of an ed-list but a list of cards of their own, in a stack. A card inside a divided surface is a card in a card.",
    "There is more room between the cards than inside them, or the group falls apart into pieces that seem to belong to their neighbors.",
    "A badge marks the exceptions — overdue, due soon — and an entry on time says its date in plain text.",
    "A card's action shows that it is working and takes no second press meanwhile, and the confirmation names the entry it was pressed in."
  ],
  "try": [
    {
      "do": "Compare the two versions",
      "then": "the same three entries — on the left divided by lines, on the right as cards"
    },
    {
      "do": "Look at the entries on the right",
      "then": "each carries its attachment and a row of actions — more than a list row holds, which is the reason for the surface"
    },
    {
      "do": "Compare the spacing on the right",
      "then": "there is more room between the cards than inside them"
    },
    {
      "do": "Press Extend deadline on the second card twice in a row",
      "then": "the button shows it is working, and one confirmation names Contribution statement August 2026"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<style>\n  /* One width for every deadline, so they start on one edge. */\n  .l05-due {\n    inline-size: 6rem;\n  }\n</style>\n\n<div class=\"ed-grid\" style=\"--ed-grid-min-column-size: 22rem\">\n  <!-- Demo only, not part of the pattern. Each version stands on a screen of its own; the heading only names the case here. -->\n  <ed-list label=\"Deadlines\">\n    <ed-list-item>\n      Payroll tax return July 2026\n      <span slot=\"description\">Bergmann &amp; Söhne Fahrzeugtechnik · 104721</span>\n      <span slot=\"end\" class=\"l05-due\"><ed-badge variant=\"danger\">Overdue</ed-badge></span>\n    </ed-list-item>\n    <ed-list-item>\n      Contribution statement August 2026\n      <span slot=\"description\">Bergmann &amp; Söhne Fahrzeugtechnik · 104721</span>\n      <span slot=\"end\" class=\"l05-due\"><ed-badge variant=\"warning\">Due soon</ed-badge></span>\n    </ed-list-item>\n    <ed-list-item>\n      Advance VAT return July 2026\n      <span slot=\"description\">Steinbach-Wallner Immobilienverwaltung · 104733</span>\n      <span slot=\"end\" class=\"l05-due\">09/10/2026</span>\n    </ed-list-item>\n  </ed-list>\n\n  <!-- Demo only, not part of the pattern. Each version stands on a screen of its own; the heading only names the case here. -->\n  <ul id=\"l05-cards\" class=\"ed-list-plain ed-stack ed-gap-5 ed-m-0\" role=\"list\" aria-label=\"Deadlines to file\">\n    <li>\n      <ed-card>\n        <span slot=\"header\">Payroll tax return July 2026</span>\n        <ed-badge slot=\"header-end\" variant=\"danger\">Overdue</ed-badge>\n        <div class=\"ed-stack ed-gap-1\">\n          <span>Bergmann &amp; Söhne Fahrzeugtechnik · 104721 · due 08/10/2026</span>\n          <span class=\"ed-cluster ed-gap-1\"><ed-icon name=\"page_pdf\"></ed-icon><a href=\"#l05-payroll-journal\">Payroll journal 07-2026.pdf</a> · 512 kB</span>\n        </div>\n        <div slot=\"footer\" class=\"ed-cluster ed-gap-2\">\n          <ed-button appearance=\"plain\" data-action=\"submit\"><ed-icon slot=\"start\" name=\"send\"></ed-icon>Submit</ed-button>\n          <ed-button appearance=\"plain\" data-action=\"extend\"><ed-icon slot=\"start\" name=\"cal_clock\"></ed-icon>Extend deadline</ed-button>\n        </div>\n      </ed-card>\n    </li>\n    <li>\n      <ed-card>\n        <span slot=\"header\">Contribution statement August 2026</span>\n        <ed-badge slot=\"header-end\" variant=\"warning\">Due soon</ed-badge>\n        <div class=\"ed-stack ed-gap-1\">\n          <span>Bergmann &amp; Söhne Fahrzeugtechnik · 104721 · due 08/26/2026</span>\n          <span class=\"ed-cluster ed-gap-1\"><ed-icon name=\"page_pdf\"></ed-icon><a href=\"#l05-contribution-statement\">Contribution statement 08-2026.pdf</a> · 148 kB</span>\n        </div>\n        <div slot=\"footer\" class=\"ed-cluster ed-gap-2\">\n          <ed-button appearance=\"plain\" data-action=\"submit\"><ed-icon slot=\"start\" name=\"send\"></ed-icon>Submit</ed-button>\n          <ed-button appearance=\"plain\" data-action=\"extend\"><ed-icon slot=\"start\" name=\"cal_clock\"></ed-icon>Extend deadline</ed-button>\n        </div>\n      </ed-card>\n    </li>\n    <li>\n      <ed-card>\n        <span slot=\"header\">Advance VAT return July 2026</span>\n        <div class=\"ed-stack ed-gap-1\">\n          <span>Steinbach-Wallner Immobilienverwaltung · 104733 · due 09/10/2026</span>\n          <span class=\"ed-cluster ed-gap-1\"><ed-icon name=\"page_xls\"></ed-icon><a href=\"#l05-vat-ledger\">Sales ledger 07-2026.xlsx</a> · 96 kB</span>\n        </div>\n        <div slot=\"footer\" class=\"ed-cluster ed-gap-2\">\n          <ed-button appearance=\"plain\" data-action=\"submit\"><ed-icon slot=\"start\" name=\"send\"></ed-icon>Submit</ed-button>\n          <ed-button appearance=\"plain\" data-action=\"extend\"><ed-icon slot=\"start\" name=\"cal_clock\"></ed-icon>Extend deadline</ed-button>\n        </div>\n      </ed-card>\n    </li>\n  </ul>\n</div>\n\n<ed-toast-stack id=\"l05-toasts\"></ed-toast-stack>\n\n<!-- Demo only, not part of the pattern. The product supplies submitFiling(title) and extendDeadline(title), which file the return or ask for more time and resolve once that is done. What the screen does when one fails is not part of this pattern. -->\n\n<script type=\"module\">\n  await customElements.whenDefined('ed-toast-stack');\n\n  const toasts = document.getElementById('l05-toasts');\n  const actions = {\n    submit: { run: submitFiling, done: 'submitted' },\n    extend: { run: extendDeadline, done: 'deadline extension requested' }\n  };\n\n  // One listener for every card: the button finds its entry through the card it stands in.\n  document.getElementById('l05-cards').addEventListener('click', async event => {\n    const button = event.target.closest('ed-button[data-action]');\n    if (!button) return;\n    const title = button.closest('ed-card').querySelector('[slot=\"header\"]').textContent.trim();\n    const action = actions[button.dataset.action];\n    // A loading button takes no click, so a second press runs nothing.\n    button.loading = true;\n    try {\n      await action.run(title);\n      toasts.create({ variant: 'success', title: `${title}: ${action.done}` });\n    } finally {\n      button.loading = false;\n    }\n  });\n</script>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l05-divider-or-cards/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}
