{"componentChunkName":"component---src-pages-components-link-style-mdx","path":"/components/link/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Link","description":"Links are used primarily as a navigational element. Links may also change what or how data is displayed.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/link/style.mdx","titleType":"prepend","MdxNode":{"id":"b2620ec9-5dab-54d4-82f5-75c0007870e1","children":[],"parent":"4f07acd3-3064-5b3f-9283-1e13bd21804c","internal":{"content":"---\ntitle: Link\ndescription: Links are used primarily as a navigational element. Links may also change what or how data is displayed.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class       | Property | Color token |\n| ----------- | -------- | ----------- |\n| `.bx--link` | color    | `$link-01`  |\n\n### Interactive states\n\n| Class       | Property   | Color token           |\n| ----------- | ---------- | --------------------- |\n| `:hover`    | text color | `$hover-primary-text` |\n| `:active`   | text color | `$text-01`            |\n| `:focus`    | border     | `$focus`              |\n| `:visited`  | text color | `$visited-link`       |\n| `:disabled` | text color | `$disabled-02`        |\n\n<div className=\"image--fixed\">\n\n![Example of enabled, hover, and disabled link states](images/link-style-1.png)\n\n</div>\n\n<Caption>Normal, hover, disabled link states</Caption>\n\n## Typography\n\nLinks should not exceed three words.\n\n| Property    | Font-size (px/rem) | Font-weight   | Text style       |\n| ----------- | ------------------ | ------------- | ---------------- |\n| `.bx--link` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\n### Recommended\n\nLinks can be grouped horizontally or vertically and must be underlined. The following specs are not built into the Link component but are recommended by design as the proper distance between grouped Links.\n\n| Class       | Property      | px / rem | Spacing token |\n| ----------- | ------------- | -------- | ------------- |\n| `.bx--link` | padding-right | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Link structure and spacing measurements](images/link-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for Link | px / rem</Caption>\n","type":"Mdx","contentDigest":"35d291acb86fa6ee975e6c50b46fd7dc","counter":1124,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Link","description":"Links are used primarily as a navigational element. Links may also change what or how data is displayed.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Link\ndescription: Links are used primarily as a navigational element. Links may also change what or how data is displayed.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class       | Property | Color token |\n| ----------- | -------- | ----------- |\n| `.bx--link` | color    | `$link-01`  |\n\n### Interactive states\n\n| Class       | Property   | Color token           |\n| ----------- | ---------- | --------------------- |\n| `:hover`    | text color | `$hover-primary-text` |\n| `:active`   | text color | `$text-01`            |\n| `:focus`    | border     | `$focus`              |\n| `:visited`  | text color | `$visited-link`       |\n| `:disabled` | text color | `$disabled-02`        |\n\n<div className=\"image--fixed\">\n\n![Example of enabled, hover, and disabled link states](images/link-style-1.png)\n\n</div>\n\n<Caption>Normal, hover, disabled link states</Caption>\n\n## Typography\n\nLinks should not exceed three words.\n\n| Property    | Font-size (px/rem) | Font-weight   | Text style       |\n| ----------- | ------------------ | ------------- | ---------------- |\n| `.bx--link` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\n### Recommended\n\nLinks can be grouped horizontally or vertically and must be underlined. The following specs are not built into the Link component but are recommended by design as the proper distance between grouped Links.\n\n| Class       | Property      | px / rem | Spacing token |\n| ----------- | ------------- | -------- | ------------- |\n| `.bx--link` | padding-right | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Link structure and spacing measurements](images/link-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for Link | px / rem</Caption>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/link/style.mdx"}}}}