{"componentChunkName":"component---src-pages-components-structured-list-code-mdx","path":"/components/structured-list/code/","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/code.mdx","titleType":"prepend","MdxNode":{"id":"09756b7d-44db-56fc-8419-975fc4cffa67","children":[],"parent":"bf9316e2-e823-5fac-9914-0557c19b1cf8","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\nimport { CheckmarkFilled16 } from \"@carbon/icons-react\";\n\n## Structured list\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/structuredlist--simple\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=structured-list\",\n  }}\n>\n  {`\n<StructuredListWrapper ariaLabel=\"Structured list\">\n  <StructuredListHead>\n    <StructuredListRow\n      head\n      tabIndex={0}\n    >\n      <StructuredListCell head>\n        ColumnA\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnB\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnC\n      </StructuredListCell>\n    </StructuredListRow>\n  </StructuredListHead>\n  <StructuredListBody>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n    </StructuredListRow>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n    </StructuredListRow>\n  </StructuredListBody>\n</StructuredListWrapper>\n  `}\n</ComponentDemo>\n\n## Structured list with selection\n\n<ComponentDemo\n  scope={{ CheckmarkFilled16 }}\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/structuredlist--selection\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-vmodel\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=structured-list\",\n  }}\n  knobs={{\n    StructuredListWrapper: [\"border\"],\n    StructuredListRow: [\"label\"],\n    StructuredListCell: [\"noWrap\"],\n  }}\n>\n  {`\n<StructuredListWrapper selection ariaLabel=\"Structured list\">\n  <StructuredListHead>\n    <StructuredListRow\n      head\n      tabIndex={0}\n    >\n      <StructuredListCell head>\n        ColumnA\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnB\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnC\n      </StructuredListCell>\n      <StructuredListCell head/>\n    </StructuredListRow>\n  </StructuredListHead>\n  <StructuredListBody>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n      <StructuredListInput\n        id=\"row-1\"\n        value=\"row-1\"\n        title=\"row-1\"\n        name=\"row-1\"\n        defaultChecked\n      />\n     <StructuredListCell>\n        <CheckmarkFilled16\n          className=\"bx--structured-list-svg\"\n          aria-label=\"select an option\">\n          <title>select an option</title>\n        </CheckmarkFilled16>\n      </StructuredListCell>\n    </StructuredListRow>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n      <StructuredListInput\n        id=\"row-2\"\n        value=\"row-2\"\n        title=\"row-2\"\n        name=\"row-2\"\n      />\n     <StructuredListCell>\n        <CheckmarkFilled16\n          className=\"bx--structured-list-svg\"\n          aria-label=\"select an option\">\n          <title>select an option</title>\n        </CheckmarkFilled16>\n      </StructuredListCell>\n    </StructuredListRow>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 3\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 3\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n      <StructuredListInput\n        id=\"row-3\"\n        value=\"row-3\"\n        title=\"row-3\"\n        name=\"row-3\"\n      />\n     <StructuredListCell>\n        <CheckmarkFilled16\n          className=\"bx--structured-list-svg\"\n          aria-label=\"select an option\">\n          <title>select an option</title>\n        </CheckmarkFilled16>\n      </StructuredListCell>\n    </StructuredListRow>\n  </StructuredListBody>\n</StructuredListWrapper>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"a03b41030ba520120625bf440db66c0c","counter":1548,"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\nimport { CheckmarkFilled16 } from \"@carbon/icons-react\";\n\n## Structured list\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/structuredlist--simple\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-structured-list--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=structured-list\",\n  }}\n>\n  {`\n<StructuredListWrapper ariaLabel=\"Structured list\">\n  <StructuredListHead>\n    <StructuredListRow\n      head\n      tabIndex={0}\n    >\n      <StructuredListCell head>\n        ColumnA\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnB\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnC\n      </StructuredListCell>\n    </StructuredListRow>\n  </StructuredListHead>\n  <StructuredListBody>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n    </StructuredListRow>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n    </StructuredListRow>\n  </StructuredListBody>\n</StructuredListWrapper>\n  `}\n</ComponentDemo>\n\n## Structured list with selection\n\n<ComponentDemo\n  scope={{ CheckmarkFilled16 }}\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/structuredlist--selection\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist--selectable-with-vmodel\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=structured-list\",\n  }}\n  knobs={{\n    StructuredListWrapper: [\"border\"],\n    StructuredListRow: [\"label\"],\n    StructuredListCell: [\"noWrap\"],\n  }}\n>\n  {`\n<StructuredListWrapper selection ariaLabel=\"Structured list\">\n  <StructuredListHead>\n    <StructuredListRow\n      head\n      tabIndex={0}\n    >\n      <StructuredListCell head>\n        ColumnA\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnB\n      </StructuredListCell>\n      <StructuredListCell head>\n        ColumnC\n      </StructuredListCell>\n      <StructuredListCell head/>\n    </StructuredListRow>\n  </StructuredListHead>\n  <StructuredListBody>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 1\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n      <StructuredListInput\n        id=\"row-1\"\n        value=\"row-1\"\n        title=\"row-1\"\n        name=\"row-1\"\n        defaultChecked\n      />\n     <StructuredListCell>\n        <CheckmarkFilled16\n          className=\"bx--structured-list-svg\"\n          aria-label=\"select an option\">\n          <title>select an option</title>\n        </CheckmarkFilled16>\n      </StructuredListCell>\n    </StructuredListRow>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 2\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n      <StructuredListInput\n        id=\"row-2\"\n        value=\"row-2\"\n        title=\"row-2\"\n        name=\"row-2\"\n      />\n     <StructuredListCell>\n        <CheckmarkFilled16\n          className=\"bx--structured-list-svg\"\n          aria-label=\"select an option\">\n          <title>select an option</title>\n        </CheckmarkFilled16>\n      </StructuredListCell>\n    </StructuredListRow>\n    <StructuredListRow tabIndex={0}>\n      <StructuredListCell>\n        Row 3\n      </StructuredListCell>\n      <StructuredListCell>\n        Row 3\n      </StructuredListCell>\n      <StructuredListCell>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.\n      </StructuredListCell>\n      <StructuredListInput\n        id=\"row-3\"\n        value=\"row-3\"\n        title=\"row-3\"\n        name=\"row-3\"\n      />\n     <StructuredListCell>\n        <CheckmarkFilled16\n          className=\"bx--structured-list-svg\"\n          aria-label=\"select an option\">\n          <title>select an option</title>\n        </CheckmarkFilled16>\n      </StructuredListCell>\n    </StructuredListRow>\n  </StructuredListBody>\n</StructuredListWrapper>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/structured-list/code.mdx"}}}}