{"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":"eea32bbd-f11a-5bf9-9575-9670a65eb234","children":[],"parent":"795f96fe-0e72-577d-86a2-54a74a332084","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  {`\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  {`\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  {`\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  {`\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  {`\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":"513c6093d511f69cc8363a5d3a778aa6","counter":1567,"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  {`\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  {`\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  {`\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  {`\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  {`\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/3b23ef32/src/pages/components/tile/code.mdx"}}}}