{"componentChunkName":"component---src-pages-components-structured-list-usage-mdx","path":"/components/structured-list/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Structured list","description":"Structured lists group content that is similar or related, such as terms and definitions.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/structured-list/usage.mdx","titleType":"prepend","MdxNode":{"id":"12f273b3-e382-5f8d-a830-ed311229e6e4","children":[],"parent":"72edac46-0143-5797-bb3a-2a721fa229ce","internal":{"content":"---\ntitle: Structured list\ndescription: Structured lists group content that is similar or related, such as terms and definitions.\ntabs: ['Code', 'Usage', 'Style']\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) 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), 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)\n- When the user selects an item from the list, the selected row will appear with the `checkmark--filled` icon.\n","type":"Mdx","contentDigest":"c21dc9fbeb2d97a43006a6fc26cd7f97","counter":1165,"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"]},"exports":{},"rawBody":"---\ntitle: Structured list\ndescription: Structured lists group content that is similar or related, such as terms and definitions.\ntabs: ['Code', 'Usage', 'Style']\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) 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), 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)\n- When the user selects an item from the list, the selected row will appear with the `checkmark--filled` icon.\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/structured-list/usage.mdx"}}}}