{"componentChunkName":"component---src-pages-components-structured-list-usage-mdx","path":"/components/structured-list/usage/","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":"bea52e29-e909-5b53-b37c-de974d2bfd55","children":[],"parent":"362e4f51-7979-5828-945e-ef4e74ed2492","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/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":"b46466f845cb7c31c391b913b62e6d47","counter":1397,"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/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/3eb073a4/src/pages/components/structured-list/usage.mdx"}}}}