{"version":3,"sources":["webpack:///./src/components/banner/index.js","webpack:///./src/@nib/gatsby-theme-mesh-docs/templates/Content.js","webpack:///./content/components/link.mdx"],"names":["Banner","React","createElement","Inline","space","Link","component","GatsbyLink","to","GridLayout","styled","div","withConfig","displayName","componentId","breakpoint","BREAKPOINTS","DRAWER","Content","props","Theme","theme","nib","Layout","bannerContent","SkipLink","link","text","Header","Sidebar","location","Target","id","Main","pageContext","children","Footer","propTypes","PropTypes","node","object","_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","_ref","components","_objectWithoutProperties","_excluded","mdx","Object","assign","mdxType","parentName","ColorDot","background","isMDXComponent"],"mappings":"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","file":"component---content-components-link-mdx-6237e311fd9a43137c19.js","sourcesContent":["import React from 'react';\nimport {Inline} from '@nib/layout';\nimport Link from '@nib-components/link';\nimport {Link as GatsbyLink} from 'gatsby';\n\nconst Banner = () => (\n  <Inline space={2}>\n    <span>Design Tokens for Mesh have just been released!</span>{' '}\n    <Link component={GatsbyLink} to=\"/design-tokens/overview/\">\n      Check out the design tokens now\n    </Link>\n  </Inline>\n);\n\nexport default Banner;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {breakpoint} from '@nib/layout';\nimport {SkipLink, Target} from '@nib-components/skip-link';\nimport {Footer, Layout, Main, Sidebar} from '@nib/gatsby-theme-mesh-docs';\nimport Theme, {nib} from '@nib-components/theme';\n\nimport Header from '../../../components/header/Header';\nimport {BREAKPOINTS} from '../../../constants';\nimport Banner from '../../../components/banner';\n\nconst GridLayout = styled.div`\n  min-height: 100vh;\n  display: grid;\n  grid-template-areas:\n    'header'\n    'main'\n    'footer';\n  grid-template-rows: 3.5rem 1fr auto;\n  grid-template-columns: 1fr;\n\n  ${breakpoint(BREAKPOINTS.DRAWER)`\n    grid-template-areas:\n      \"header header\"\n      \"sidebar main\"\n      \"sidebar footer\";\n    grid-template-columns: 15rem 1fr;\n  `};\n`;\n\nconst Content = props => {\n  return (\n    <Theme theme={nib}>\n      <Layout bannerContent={<Banner />}>\n        <SkipLink link=\"#content\" text=\"Skip to content\" />\n        <GridLayout>\n          <Header />\n          <Sidebar location={props.location} />\n          <Target id=\"content\" component={Main} pageContext={props.pageContext} location={props.location}>\n            {props.children}\n          </Target>\n          <Footer />\n        </GridLayout>\n      </Layout>\n    </Theme>\n  );\n};\n\nContent.displayName = 'Content';\nContent.propTypes = {\n  children: PropTypes.node,\n  location: PropTypes.object,\n  pageContext: PropTypes.object\n};\n\nexport default Content;\n","import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport DefaultLayout from \"/tmp/node_modules/@nib/gatsby-theme-mesh-docs/src/templates/Content.js\";\nimport Link from '@nib-components/link';\nimport { ColorDot } from '../../src/components/colors/ColorPalette.js';\nexport const _frontmatter = {};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <h2 {...{\n      \"id\": \"installation\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#installation\",\n        \"aria-label\": \"installation permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Installation`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-bash\"\n      }}>{`npm install @nib-components/link\n`}</code></pre>\n    <blockquote>\n      <p parentName=\"blockquote\">{`Note: You will also need to install the peerDependencies `}<a parentName=\"p\" {...{\n          \"href\": \"/components/icons/\"\n        }}>{`@nib/icons`}</a>{` and `}<a parentName=\"p\" {...{\n          \"href\": \"/components/theme/\"\n        }}>{`@nib-components/theme`}</a>{`.`}</p>\n    </blockquote>\n    <h2 {...{\n      \"id\": \"usage\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#usage\",\n        \"aria-label\": \"usage permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Usage`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`import Link from '@nib-components/link';\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"interactive-demo\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#interactive-demo\",\n        \"aria-label\": \"interactive demo permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Interactive demo`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\",\n        \"metastring\": \"live\",\n        \"live\": true\n      }}>{`<Link href=\"#\">Hello World!</Link>\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"props\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#props\",\n        \"aria-label\": \"props permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Props`}</h2>\n    <table>\n      <thead parentName=\"table\">\n        <tr parentName=\"thead\">\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Prop`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Type`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Default`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Description`}</th>\n        </tr>\n      </thead>\n      <tbody parentName=\"table\">\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`color`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`loud`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The link color. Must be one of `}{`[`}<inlineCode parentName=\"td\">{`loud`}</inlineCode>{`, `}<inlineCode parentName=\"td\">{`dark`}</inlineCode>{`, `}<inlineCode parentName=\"td\">{`light`}</inlineCode>{`, `}<inlineCode parentName=\"td\">{`destructive`}</inlineCode>{`]`}{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`component`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`a`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The link component.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`href`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The link `}<inlineCode parentName=\"td\">{`href`}</inlineCode>{` url. Required if `}<inlineCode parentName=\"td\">{`component=\"a\"`}</inlineCode>{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`target`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The target for the link. When set to `}<inlineCode parentName=\"td\">{`\"_blank\"`}</inlineCode>{`, hidden screen-reader only text is automatically added as well as the `}<inlineCode parentName=\"td\">{`ExternalLink`}</inlineCode>{` icon to indicate that the link will open a new tab/window.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`underline`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`boolean`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`true`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Show or hide the underline for the link. Links should prefer underlines for improved accessibility.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`icon`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`component`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Add an icon next to the link text. Must be a valid icon defined in `}<inlineCode parentName=\"td\">{`@nib/icons`}</inlineCode>{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`iconPlacement`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`right`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The placement of the icon next to the link text. Must be one of `}<inlineCode parentName=\"td\">{`['left', 'right']`}</inlineCode>{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`hideNewTabIcon`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`boolean`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`false`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`When `}<inlineCode parentName=\"td\">{`target=\"_blank\"`}</inlineCode>{`, this prop can be used to hide the `}<inlineCode parentName=\"td\">{`ExternalLink`}</inlineCode>{` icon. The screen reader helper text cannot be removed.`}</td>\n        </tr>\n      </tbody>\n    </table>\n    <h2 {...{\n      \"id\": \"using-icons\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#using-icons\",\n        \"aria-label\": \"using icons permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Using icons`}</h2>\n    <p>{`The simplest way to use icons with the link is with the `}<inlineCode parentName=\"p\">{`icon`}</inlineCode>{` and `}<inlineCode parentName=\"p\">{`iconPlacement`}</inlineCode>{` props:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`<Link href=\"#\" icon={ChevronLeftSystemIcon} iconPlacement=\"left\">\n  Link text\n</Link>\n`}</code></pre>\n    <p>{`If you need to customise the icon and have more control over the component, you can provide an icon as an inline function:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`<Link href=\"#\" icon={() => <ChevronLeftSystemIcon size=\"xs\" />} iconPlacement=\"left\">\n  Link text\n</Link>\n`}</code></pre>\n    <h3 {...{\n      \"id\": \"icon-placement\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#icon-placement\",\n        \"aria-label\": \"icon placement permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Icon placement`}</h3>\n    <p>{`The recommended icon placement depends on the link context. If using a horizontal chevron (`}<inlineCode parentName=\"p\">{`ChevronLeftSystemIcon`}</inlineCode>{` or `}<inlineCode parentName=\"p\">{`ChevronRightSystemIcon`}</inlineCode>{`), the icon should be on the side of the text that the chevron is pointing to. For all other icons, they should be placed on the right of the text.`}</p>\n    <h2 {...{\n      \"id\": \"accessibility-requirements\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#accessibility-requirements\",\n        \"aria-label\": \"accessibility requirements permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Accessibility requirements`}</h2>\n    <h3 {...{\n      \"id\": \"color\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#color\",\n        \"aria-label\": \"color permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Color`}</h3>\n    <p>{`Our link component for the `}<inlineCode parentName=\"p\">{`nib`}</inlineCode>{` brand is True Green `}<ColorDot background=\"trueGreen\" mdxType=\"ColorDot\" />{` by default to differentiate it from surrounding non-link text. Where possible you should always use a different color to the surrounding text for a link. Preference should always be given to having green links so that users can more easily recognise clickable elements across our site. Similarly, True Green `}<ColorDot background=\"trueGreen\" mdxType=\"ColorDot\" />{` should be reserved for links (over standard text) to avoid users confusing other copy for a link.`}</p>\n    <p>{`By default our link meets the minimum contrast ratio for web accessibility when used over either a white or light grey background. Be sure to check the contrast if you are using a different background.`}</p>\n    <p>{`Do not rely on color alone to differentiate links - always use an underline as well.`}</p>\n    <h3 {...{\n      \"id\": \"underline\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#underline\",\n        \"aria-label\": \"underline permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Underline`}</h3>\n    <p>{`Our link component is underlined by default to provide an alternative visual cue (other than color) for users who may be color blind. On hover the underline increases from `}<inlineCode parentName=\"p\">{`1px`}</inlineCode>{` to `}<inlineCode parentName=\"p\">{`2px`}</inlineCode>{`. To avoid confusion for all users do not underline text unless it is a link.`}</p>\n    <h3 {...{\n      \"id\": \"labelling\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#labelling\",\n        \"aria-label\": \"labelling permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Labelling`}</h3>\n    <p>{`You should always use meaningful labelling of links (e.g. \"Hospital cover\") rather than abstract link text (e.g. \"click here\"). This helps users who want to tab from link to link, and assists users with screen readers in understanding the page without having to open each link to see where it leads. Link labels should be consistent with where the user will be taken, and should avoid long phrases or sentences as sentence order can change during language translations.`}</p>\n    <h3 {...{\n      \"id\": \"duplicate-labelling\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#duplicate-labelling\",\n        \"aria-label\": \"duplicate labelling permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Duplicate labelling`}</h3>\n    <p>{`Link text should be the same if you have multiple links on the same page that lead to the same location. This avoids confusions for all users alike, and assists in understanding for those using assistive technology.`}</p>\n    <h3 {...{\n      \"id\": \"opening-in-a-new-tab\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#opening-in-a-new-tab\",\n        \"aria-label\": \"opening in a new tab permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Opening in a new tab`}</h3>\n    <p>{`Links should open in the same window in the majority of cases. If your link does need to open in a new tab, do so by adding `}<inlineCode parentName=\"p\">{`target=\"_blank\"`}</inlineCode>{` to the link. This will automatically add hidden screen-reader only text and the `}<inlineCode parentName=\"p\">{`ExternalLink`}</inlineCode>{` icon to indicate that the link will open a new tab/window. This `}<inlineCode parentName=\"p\">{`ExternalLink`}</inlineCode>{` icon will override the `}<inlineCode parentName=\"p\">{`icon`}</inlineCode>{` prop if `}<inlineCode parentName=\"p\">{`iconPlacement=\"right\"`}</inlineCode>{`. If you wish to hide this icon for whatever reason, there is a `}<inlineCode parentName=\"p\">{`hideNewTabIcon`}</inlineCode>{` boolean prop.`}</p>\n    <h3 {...{\n      \"id\": \"document-downloads\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#document-downloads\",\n        \"aria-label\": \"document downloads permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Document downloads`}</h3>\n    <p>{`If your link is to download a document, be sure to include the file type and size in the link text. This assists both general users and those with disabilities, and additionally prevents issues for those on devices which don't support the file type downloaded. For example: `}<a parentName=\"p\" {...{\n        \"href\": \"\"\n      }}>{`Terms and conditions (PDF, 23kb)`}</a></p>\n    <h3 {...{\n      \"id\": \"component\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#component\",\n        \"aria-label\": \"component permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Component`}</h3>\n    <p>{`Our link component uses an `}<inlineCode parentName=\"p\">{`<a>`}</inlineCode>{` tag by default, but can be changed via the `}<inlineCode parentName=\"p\">{`component`}</inlineCode>{` prop. For example, within a single page application you may need to use a `}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/ReactTraining/react-router\"\n      }}>{`react-router`}</a>{` link instead.`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`import Link from '@nib-components/link';\nimport {Link as ReactRouterLink} from 'react-router';\n\n<Link component={ReactRouterLink}>Hello World!</Link>;\n`}</code></pre>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}