{"record":{"id":"1f31907174e14579","repo":"angular/components","slug":"a-list-item-can-have-at-maximum-three-lines","errorCode":null,"errorMessage":"A list item can have at maximum three lines.","messagePattern":"A list item can have at maximum three lines\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/material/list/list-base.ts","lineNumber":348,"sourceCode":"  const numTitles = item._titles!.length;\n  const numLines = item._lines!.length;\n\n  if (numTitles > 1) {\n    console.warn('A list item cannot have multiple titles.');\n  }\n  if (numTitles === 0 && numLines > 0) {\n    console.warn('A list item line can only be used if there is a list item title.');\n  }\n  if (\n    numTitles === 0 &&\n    item._hasUnscopedTextContent &&\n    item._explicitLines !== null &&\n    item._explicitLines > 1\n  ) {\n    console.warn('A list item cannot have wrapping content without a title.');\n  }\n  if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {\n    console.warn('A list item can have at maximum three lines.');\n  }\n}\n","sourceCodeStart":330,"sourceCodeEnd":351,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/list/list-base.ts#L330-L351","documentation":"Material list items support at most three visual rows (one title + two lines). `sanityCheckListItemContent` counts line content-children and warns in dev mode when there are more than two lines, or two lines plus unscoped text (which would render a fourth row).","triggerScenarios":"A list item containing three or more `matListItemLine` elements, or exactly two lines plus additional unscoped text content, processed by `_updateItemLines`.","commonSituations":"Porting dense old `mat-list` items with many `matLine` spans; cramming metadata rows (subtitle, notes, status) into lines instead of truncating or restructuring.","solutions":["Reduce to one title plus at most two lines; move extra content to `matListItemMeta` or a tooltip.","Merge short lines into a single line element.","If more rows are genuinely needed, use a custom component or expandable rows instead of a list item."],"exampleFix":"<!-- before -->\n<mat-list-item>\n  <span matListItemTitle>Title</span>\n  <span matListItemLine>Line 1</span>\n  <span matListItemLine>Line 2</span>\n  <span matListItemLine>Line 3</span>\n</mat-list-item>\n\n<!-- after -->\n<mat-list-item>\n  <span matListItemTitle>Title</span>\n  <span matListItemLine>Line 1 · Line 2</span>\n  <span matListItemMeta mat-icon-button><mat-icon>info</mat-icon></span>\n</mat-list-item>","handlingStrategy":"validation","validationCode":"const lines = item.querySelectorAll('[matListItemLine]').length;\nconst rawText = [...item.childNodes].some(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim());\nif (lines > 2 || (lines === 2 && rawText)) console.warn('List item exceeds three rows.');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Design list items as title + max two lines from the start.","Move overflow content to matListItemMeta, tooltips, or detail views.","Codify the constraint in shared list item components rather than ad-hoc markup."],"tags":["angular","material","list","content-validation","dev-mode-warning"],"backgroundTag":"invalid-list-item-content","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}