{"componentChunkName":"component---src-pages-components-tile-style-mdx","path":"/components/tile/style/","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/style.mdx","titleType":"prepend","MdxNode":{"id":"f387ecae-d3d3-5893-8807-609bd0b81cc2","children":[],"parent":"f8bc596a-6141-510e-9d95-69e586c98b8e","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## Color\n\n| Class                        | Property         | Color token |\n| ---------------------------- | ---------------- | ----------- |\n| `.bx--tile`                  | background-color | `$ui-01`    |\n| `.bx--tile:focus`            | border           | `$focus`    |\n| `.bx--tile:hover`            | background-color | `$hover-ui` |\n| `.bx--tile--is-selected`     | border           | `$ui-05`    |\n| `.bx--tile__chevron`         | svg              | `$icon-01`  |\n| `.bx--tile__checkmark`       | svg              | `$icon-01`  |\n| `.bx--tile__checkmark:hover` | svg              | `$icon-02`  |\n\n## Structure\n\n| Class       | Property          | px / rem | Spacing token |\n| ----------- | ----------------- | -------- | ------------- |\n| `.bx--tile` | min-height        | 64 / 4   | –             |\n| `.bx--tile` | min-width         | 128 / 8  | –             |\n| `.bx--tile` | padding (minimum) | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for tile](images/tile-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for tile | px / rem</Caption>\n\n### Proportions for grid\n\n| Percentage | XL 1600-1200 | L 1200-992 | M 992-768 | S 768-576 | XS 576-0 |\n| ---------- | ------------ | ---------- | --------- | --------- | -------- |\n| 100%       | ✅           | ✅         | ✅        | ✅        | ✅       |\n| 1/2        | ✅           | ✅         | ✅        | ✅        | ✅       |\n| 2/3        | ✅           | ✅         | ✅        | ✅        |          |\n| 1/3        | ✅           | ✅         | ✅        | ✅        |          |\n| 1/4        | ✅           | ✅         | ✅        | ✅        |          |\n| 1/6        | ✅           | ✅         |           |           |          |\n","type":"Mdx","contentDigest":"5ae4d0ed6f2a7b7a562fa7b3d58a531a","counter":1592,"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## Color\n\n| Class                        | Property         | Color token |\n| ---------------------------- | ---------------- | ----------- |\n| `.bx--tile`                  | background-color | `$ui-01`    |\n| `.bx--tile:focus`            | border           | `$focus`    |\n| `.bx--tile:hover`            | background-color | `$hover-ui` |\n| `.bx--tile--is-selected`     | border           | `$ui-05`    |\n| `.bx--tile__chevron`         | svg              | `$icon-01`  |\n| `.bx--tile__checkmark`       | svg              | `$icon-01`  |\n| `.bx--tile__checkmark:hover` | svg              | `$icon-02`  |\n\n## Structure\n\n| Class       | Property          | px / rem | Spacing token |\n| ----------- | ----------------- | -------- | ------------- |\n| `.bx--tile` | min-height        | 64 / 4   | –             |\n| `.bx--tile` | min-width         | 128 / 8  | –             |\n| `.bx--tile` | padding (minimum) | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for tile](images/tile-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for tile | px / rem</Caption>\n\n### Proportions for grid\n\n| Percentage | XL 1600-1200 | L 1200-992 | M 992-768 | S 768-576 | XS 576-0 |\n| ---------- | ------------ | ---------- | --------- | --------- | -------- |\n| 100%       | ✅           | ✅         | ✅        | ✅        | ✅       |\n| 1/2        | ✅           | ✅         | ✅        | ✅        | ✅       |\n| 2/3        | ✅           | ✅         | ✅        | ✅        |          |\n| 1/3        | ✅           | ✅         | ✅        | ✅        |          |\n| 1/4        | ✅           | ✅         | ✅        | ✅        |          |\n| 1/6        | ✅           | ✅         |           |           |          |\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/tile/style.mdx"}}}}