diff --git a/docs/content/components/links.md b/docs/content/components/links.md index fdc28111..931bf7c0 100644 --- a/docs/content/components/links.md +++ b/docs/content/components/links.md @@ -10,32 +10,33 @@ bundle: links Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. -By default `` elements already use the right link color and apply an underline on hover. +By default `` elements already use the right link color and apply an underline on hover. So in most cases the `.Link` class is not really needed. ```html live -Some text with a default link -``` - -If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class. - -```html live -Some text with a span that behaves like a link +Some text with a link +Some text with a link ``` If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.** +## Primary link + Use `.Link--primary` to turn the link color to blue only on hover. ```html live
Some text with a Link--primary
``` +## Secondary link + Use `.Link--secondary` for a more subtle link color that turns blue on hover. ```html live Some text with a Link--secondary ``` +## Muted link + Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`. ```html live @@ -43,6 +44,8 @@ Use `.Link--muted` also removes the underline on hover. Tip: You can also use thSome text with a Link--primary no-underline
``` +## On hover link + Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover. ```html live @@ -51,6 +54,18 @@ Use `.Link--onHover` to make any text color used with links to turn blue on hove ``` +## Nested link + +The `.Link` class can be nested inside an `` element if only part of it should be styled like a link. + +```html live + + A nested Link + +``` + +## Link and color utilities + Link classes in combination with [color utilities](../utilities/colors) lets you colorize information separately inside of a link but have all of the link turn into one color on hover. ```html live