{"componentChunkName":"component---src-pages-components-structured-list-usage-mdx","path":"/components/structured-list/usage/","webpackCompilationHash":"9a5cb62a61994334ab3f","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":"ca94ba6b-aa54-51e3-8ffc-5259f36509e6","children":[],"parent":"577746ee-70ed-5ff4-8bfb-6f251a0cabc7","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":"c40692cddb98e9405c8bd9acce483049","counter":1232,"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/35443907/src/pages/components/structured-list/usage.mdx"}}}}