Read the documentation for more. (sm, inherits 12px)
Read the documentation for more. (md, inherits 16px)
Read the documentation for more. (lg, inherits 20px)
Every intention/context color group from the BDS Link spec, at every size, as inline and standalone (with and without the trailing icon). Toggle light/dark mode with the switch in the nav to check both.
Hover a link to see its hover state. Every link below points to its own unique fragment, generated fresh on load, so they all start unvisited -- click one (or tab to it and press Enter) to see just that link's :visited color, without affecting the others. Use the button below to point every link at a brand-new, never-visited fragment again, undoing whichever ones you've clicked, without needing a new incognito window. Tab through the page to check focus rings.
intention="brand" context="on-theme"
| size | inline | standalone | standalone + icon |
|---|---|---|---|
sm | Read the documentation for more. variation=inline · inherits 12px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
md | Read the documentation for more. variation=inline · inherits 16px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
lg | Read the documentation for more. variation=inline · inherits 20px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
intention="neutral" context="on-theme"
| size | inline | standalone | standalone + icon |
|---|---|---|---|
sm | Read the documentation for more. variation=inline · inherits 12px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
md | Read the documentation for more. variation=inline · inherits 16px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
lg | Read the documentation for more. variation=inline · inherits 20px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
intention="brand" context="on-inverse"
| size | inline | standalone | standalone + icon |
|---|---|---|---|
sm | Read the documentation for more. variation=inline · inherits 12px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
md | Read the documentation for more. variation=inline · inherits 16px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
lg | Read the documentation for more. variation=inline · inherits 20px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
intention="neutral" context="on-inverse"
| size | inline | standalone | standalone + icon |
|---|---|---|---|
sm | Read the documentation for more. variation=inline · inherits 12px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
md | Read the documentation for more. variation=inline · inherits 16px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
lg | Read the documentation for more. variation=inline · inherits 20px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
intention="brand" context="on-saturated"
| size | inline | standalone | standalone + icon |
|---|---|---|---|
sm | Read the documentation for more. variation=inline · inherits 12px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
md | Read the documentation for more. variation=inline · inherits 16px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
lg | Read the documentation for more. variation=inline · inherits 20px from parent | View docsvariation=standalone | View docsvariation=standalone iconEnd |
styles/_content.scss -- any link that isn't the Link component, inside markdown article content (raw HTML <a>, or a tag component like {% child-pages %}). Matches intention="neutral" context="on-theme", no size axis of its own -- also inherits from its paragraph.
Read the documentation for more. (sm, inherits 12px)
Read the documentation for more. (md, inherits 16px)
Read the documentation for more. (lg, inherits 20px)