{"componentChunkName":"component---src-pages-components-tabs-style-mdx","path":"/components/tabs/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Tabs","description":"Tabs are used to quickly navigate between views within the same context.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/tabs/style.mdx","titleType":"prepend","MdxNode":{"id":"7f7c23fe-ba50-569f-87d4-48a8d214d476","children":[],"parent":"9ef5b952-8aab-5dd7-846e-4484a6fd53c0","internal":{"content":"---\ntitle: Tabs\ndescription: Tabs are used to quickly navigate between views within the same context.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                           | Property      | Color token       |\n| ------------------------------- | ------------- | ----------------- |\n| `.bx--tabs__nav-link`           | text color    | `$text-02`        |\n| `.bx--tabs__nav-item`           | border-bottom | `$ui-03`          |\n| `.bx--tabs__nav-link:selected`  | text color    | `$text-01`        |\n| `.bx--tabs__nav-item--selected` | border-bottom | `$interactive-04` |\n\n### Interactive states\n\n| Class                       | Property      | Color token |\n| --------------------------- | ------------- | ----------- |\n| `.bx--tabs__nav-link:hover` | text color    | `$text-01`  |\n| `.bx--tabs__nav-item:hover` | border-bottom | `$ui-04`    |\n| `.bx--tabs__nav-item:focus` | border        | `$focus`    |\n\n## Typography\n\nTab label should be set in sentence case, and should not exceed three words.\n\n| Class                          | Font-size (px/rem) | Font-weight    | Type token      |\n| ------------------------------ | ------------------ | -------------- | --------------- |\n| `.bx--tabs__nav-link:selected` | 14 / 0.875         | SemiBold / 600 | `$heading-01`   |\n| `.bx--tabs__nav-link`          | 14 / 0.875         | Regular / 400  | `$body-long-01` |\n\n## Structure\n\n| Class                 | Property                    | px / rem | Spacing token |\n| --------------------- | --------------------------- | -------- | ------------- |\n| `.bx--tabs__nav-item` | border-bottom               | 3px      | –             |\n| `.bx--tabs__nav-link` | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n| `.bx--tabs__nav-link` | padding-top, padding-bottom | 8 / 0.5  | `$spacing-03` |\n| `bx--tabs__nav-item`  | margin-left                 | 2px      | `$spacing-01` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for tabs](images/tab-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for tile | px / rem</Caption>\n","type":"Mdx","contentDigest":"2632a10445c66e19658aa6eb9e38e814","counter":1167,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tabs","description":"Tabs are used to quickly navigate between views within the same context.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Tabs\ndescription: Tabs are used to quickly navigate between views within the same context.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                           | Property      | Color token       |\n| ------------------------------- | ------------- | ----------------- |\n| `.bx--tabs__nav-link`           | text color    | `$text-02`        |\n| `.bx--tabs__nav-item`           | border-bottom | `$ui-03`          |\n| `.bx--tabs__nav-link:selected`  | text color    | `$text-01`        |\n| `.bx--tabs__nav-item--selected` | border-bottom | `$interactive-04` |\n\n### Interactive states\n\n| Class                       | Property      | Color token |\n| --------------------------- | ------------- | ----------- |\n| `.bx--tabs__nav-link:hover` | text color    | `$text-01`  |\n| `.bx--tabs__nav-item:hover` | border-bottom | `$ui-04`    |\n| `.bx--tabs__nav-item:focus` | border        | `$focus`    |\n\n## Typography\n\nTab label should be set in sentence case, and should not exceed three words.\n\n| Class                          | Font-size (px/rem) | Font-weight    | Type token      |\n| ------------------------------ | ------------------ | -------------- | --------------- |\n| `.bx--tabs__nav-link:selected` | 14 / 0.875         | SemiBold / 600 | `$heading-01`   |\n| `.bx--tabs__nav-link`          | 14 / 0.875         | Regular / 400  | `$body-long-01` |\n\n## Structure\n\n| Class                 | Property                    | px / rem | Spacing token |\n| --------------------- | --------------------------- | -------- | ------------- |\n| `.bx--tabs__nav-item` | border-bottom               | 3px      | –             |\n| `.bx--tabs__nav-link` | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n| `.bx--tabs__nav-link` | padding-top, padding-bottom | 8 / 0.5  | `$spacing-03` |\n| `bx--tabs__nav-item`  | margin-left                 | 2px      | `$spacing-01` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for tabs](images/tab-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for tile | px / rem</Caption>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/tabs/style.mdx"}}}}