{"componentChunkName":"component---src-pages-components-tile-style-mdx","path":"/components/tile/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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"]},"relativePagePath":"/components/tile/style.mdx","titleType":"prepend","MdxNode":{"id":"3bcee569-6937-5adc-a3ad-264f1e1ea7ab","children":[],"parent":"206484df-3a84-5ff9-a177-ddd494ca069d","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']\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":"1937fe905a37060dd3d9fd431a19be77","counter":1176,"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"]},"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']\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":"/tmp/42b44a0/src/pages/components/tile/style.mdx"}}}}