{"componentChunkName":"component---src-pages-components-structured-list-usage-mdx","path":"/components/structured-list/usage/","result":{"pageContext":{"frontmatter":{"title":"Structured list","description":"Structured lists group content that is similar or related, such as terms and definitions.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/structured-list/usage.mdx","titleType":"prepend","MdxNode":{"id":"5db97bf3-f05e-5dba-a78e-1961b3ff0e2c","children":[],"parent":"60b0e091-2679-5502-b140-18f1e156fee7","internal":{"content":"---\ntitle: Structured list\ndescription: Structured lists group content that is similar or related, such as terms and definitions.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## General guidance\n\n_Structured lists_ group content that is similar or related, such as terms and definitions.\n\n## Content\n\n- Row height varies based on content and can expand to fit multiple lines.\n- In a single list, all rows do not have to be the same height.\n- Column widths can either be equally proportional or proportioned based on content.\n- If a list extends past 25 items, consider using a [data table](/components/data-table/code) to present this larger set of content.\n- A maximum of one paragraph of text is recommended per row.\n- Nesting items is not recommended, as structured lists are used to present simple data. If you have additional content that needs to be shown, consider using a [data table](/components/data-table/code), which supports nesting items.\n\n\n\n\n\n\n\n
\n\n## Interaction\n\nStructured lists can be single-select if a user is choosing between a set of options.\n\n#### Guidelines:\n\n- Only one item can be selected from the list.\n- By default, one option should be selected.\n- If you need to select multiple items, use a [data table.](/components/data-table/code)\n- When the user selects an item from the list, the selected row will appear with the `checkmark--filled` icon.\n","type":"Mdx","contentDigest":"ee5e237c1f9ab295129f703784968b28","counter":1583,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Structured list","description":"Structured lists group content that is similar or related, such as terms and definitions.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Structured list\ndescription: Structured lists group content that is similar or related, such as terms and definitions.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## General guidance\n\n_Structured lists_ group content that is similar or related, such as terms and definitions.\n\n## Content\n\n- Row height varies based on content and can expand to fit multiple lines.\n- In a single list, all rows do not have to be the same height.\n- Column widths can either be equally proportional or proportioned based on content.\n- If a list extends past 25 items, consider using a [data table](/components/data-table/code) to present this larger set of content.\n- A maximum of one paragraph of text is recommended per row.\n- Nesting items is not recommended, as structured lists are used to present simple data. If you have additional content that needs to be shown, consider using a [data table](/components/data-table/code), which supports nesting items.\n\n\n\n\n\n\n\n
\n\n## Interaction\n\nStructured lists can be single-select if a user is choosing between a set of options.\n\n#### Guidelines:\n\n- Only one item can be selected from the list.\n- By default, one option should be selected.\n- If you need to select multiple items, use a [data table.](/components/data-table/code)\n- When the user selects an item from the list, the selected row will appear with the `checkmark--filled` icon.\n","fileAbsolutePath":"/zeit/3f757860/src/pages/components/structured-list/usage.mdx"}}}}