{"componentChunkName":"component---src-pages-components-tile-code-mdx","path":"/components/tile/code/","result":{"pageContext":{"frontmatter":{"title":"Tile","description":"Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/tile/code.mdx","titleType":"prepend","MdxNode":{"id":"fca737f2-4e8f-5b21-b614-a4470469e873","children":[],"parent":"a3bb4121-480e-5da9-ba1a-7888c5c6b6bd","internal":{"content":"---\ntitle: Tile\ndescription: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ Tile: ['light'] }}>\n  {`\n<Tile>\n  Default tile\n</Tile>\n  `}\n</ComponentDemo>\n\n## Clickable tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--clickable',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--clickable',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ ClickableTile: ['light', 'clicked'] }}>\n  {`\n<ClickableTile\n  href=\"#\"\n>\n  Clickable Tile\n</ClickableTile>\n  `}\n</ComponentDemo>\n\n## Radio tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--radio',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--selectable',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ RadioTile: ['light'] }}>\n  {`\n<TileGroup\n  defaultSelected=\"default-selected\"\n  legend=\"Radio Tile Group\"\n  name=\"tile-group\"\n>\n  <RadioTile\n    id=\"tile-1\"\n    name=\"tiles\"\n    tabIndex={0}\n    value=\"standard\"\n  >\n    Radio Tile\n  </RadioTile>\n  <RadioTile\n    id=\"tile-2\"\n    name=\"tiles\"\n    tabIndex={0}\n    value=\"default-selected\"\n  >\n    Radio Tile\n  </RadioTile>\n  <RadioTile\n    id=\"tile-3\"\n    name=\"tiles\"\n    tabIndex={0}\n    value=\"selected\"\n  >\n    Radio Tile\n  </RadioTile>\n</TileGroup>\n  `}\n</ComponentDemo>\n\n## Multiselect tile\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tile--multi-select',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--multi-select',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ SelectableTile: ['light', 'selected'] }}>\n  {`\n<div\n  aria-label=\"selectable tiles\"\n  role=\"group\"\n>\n  <SelectableTile\n    id=\"tile-1\"\n    name=\"tiles\"\n    tabIndex={0}\n    title=\"title\"\n    value=\"value\"\n  >\n    Multi-select Tile\n  </SelectableTile>\n  <SelectableTile\n    id=\"tile-2\"\n    name=\"tiles\"\n    tabIndex={0}\n    title=\"title\"\n    value=\"value\"\n  >\n    Multi-select Tile\n  </SelectableTile>\n  <SelectableTile\n    id=\"tile-3\"\n    name=\"tiles\"\n    tabIndex={0}\n    title=\"title\"\n    value=\"value\"\n  >\n    Multi-select Tile\n  </SelectableTile>\n</div>\n  `}\n</ComponentDemo>\n\n## Expandable tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--expandable',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--expandable',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ ExpandableTile: ['light', 'expanded'] }}>\n  {`\n<ExpandableTile\n  tabIndex={0}\n  tileCollapsedIconText=\"Interact to Expand tile\"\n  tileExpandedIconText=\"Interact to Collapse tile\"\n  tileMaxHeight={0}\n  tilePadding={0}\n>\n  <TileAboveTheFoldContent>\n    <div style={{ height: '64px'}}>\n      Above the fold content here\n    </div>\n  </TileAboveTheFoldContent>\n  <TileBelowTheFoldContent>\n    <div style={{ height: '64px'}}>\n      Below the fold content here\n    </div>\n  </TileBelowTheFoldContent>\n</ExpandableTile>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"451a45b496491440999dea81c3e2f934","counter":1560,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tile","description":"Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Tile\ndescription: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ Tile: ['light'] }}>\n  {`\n<Tile>\n  Default tile\n</Tile>\n  `}\n</ComponentDemo>\n\n## Clickable tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--clickable',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--clickable',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--clickable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ ClickableTile: ['light', 'clicked'] }}>\n  {`\n<ClickableTile\n  href=\"#\"\n>\n  Clickable Tile\n</ClickableTile>\n  `}\n</ComponentDemo>\n\n## Radio tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--radio',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--selectable',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ RadioTile: ['light'] }}>\n  {`\n<TileGroup\n  defaultSelected=\"default-selected\"\n  legend=\"Radio Tile Group\"\n  name=\"tile-group\"\n>\n  <RadioTile\n    id=\"tile-1\"\n    name=\"tiles\"\n    tabIndex={0}\n    value=\"standard\"\n  >\n    Radio Tile\n  </RadioTile>\n  <RadioTile\n    id=\"tile-2\"\n    name=\"tiles\"\n    tabIndex={0}\n    value=\"default-selected\"\n  >\n    Radio Tile\n  </RadioTile>\n  <RadioTile\n    id=\"tile-3\"\n    name=\"tiles\"\n    tabIndex={0}\n    value=\"selected\"\n  >\n    Radio Tile\n  </RadioTile>\n</TileGroup>\n  `}\n</ComponentDemo>\n\n## Multiselect tile\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tile--multi-select',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--multi-select',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--selectable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ SelectableTile: ['light', 'selected'] }}>\n  {`\n<div\n  aria-label=\"selectable tiles\"\n  role=\"group\"\n>\n  <SelectableTile\n    id=\"tile-1\"\n    name=\"tiles\"\n    tabIndex={0}\n    title=\"title\"\n    value=\"value\"\n  >\n    Multi-select Tile\n  </SelectableTile>\n  <SelectableTile\n    id=\"tile-2\"\n    name=\"tiles\"\n    tabIndex={0}\n    title=\"title\"\n    value=\"value\"\n  >\n    Multi-select Tile\n  </SelectableTile>\n  <SelectableTile\n    id=\"tile-3\"\n    name=\"tiles\"\n    tabIndex={0}\n    title=\"title\"\n    value=\"value\"\n  >\n    Multi-select Tile\n  </SelectableTile>\n</div>\n  `}\n</ComponentDemo>\n\n## Expandable tile\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tile--expandable',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tiles--expandable',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtile--expandable',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tile',\n  }}\n  knobs={{ ExpandableTile: ['light', 'expanded'] }}>\n  {`\n<ExpandableTile\n  tabIndex={0}\n  tileCollapsedIconText=\"Interact to Expand tile\"\n  tileExpandedIconText=\"Interact to Collapse tile\"\n  tileMaxHeight={0}\n  tilePadding={0}\n>\n  <TileAboveTheFoldContent>\n    <div style={{ height: '64px'}}>\n      Above the fold content here\n    </div>\n  </TileAboveTheFoldContent>\n  <TileBelowTheFoldContent>\n    <div style={{ height: '64px'}}>\n      Below the fold content here\n    </div>\n  </TileBelowTheFoldContent>\n</ExpandableTile>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/tile/code.mdx"}}}}