{"componentChunkName":"component---src-pages-components-tile-style-mdx","path":"/components/tile/style/","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":"4ea53482-3c1c-5cc2-ba29-cc4ddac2d398","children":[],"parent":"32b25686-4e5f-5bf4-8349-d5c03628abdf","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":"e4fea553f7be3cb753c0b0770d9382d0","counter":1407,"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":"/zeit/3eb073a4/src/pages/components/tile/style.mdx"}}}}