{"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":"dc997f26-b758-52b9-b795-24b4f5391af2","children":[],"parent":"d3a997ab-e666-5dfb-8d31-386ccf11320a","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":"0ff6fd1981c5c1c285bb6dd67606c6c2","counter":1579,"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/1dde86ed/src/pages/components/structured-list/usage.mdx"}}}}