summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.2/helpers/colored-links.md
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.2/helpers/colored-links.md')
-rw-r--r--site/content/docs/5.2/helpers/colored-links.md21
1 files changed, 21 insertions, 0 deletions
diff --git a/site/content/docs/5.2/helpers/colored-links.md b/site/content/docs/5.2/helpers/colored-links.md
new file mode 100644
index 0000000..e940196
--- /dev/null
+++ b/site/content/docs/5.2/helpers/colored-links.md
@@ -0,0 +1,21 @@
+---
+layout: docs
+title: Colored links
+description: Colored links with hover states
+group: helpers
+toc: false
+---
+
+You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
+{{- end -}}
+{{< /colored-links.inline >}}
+{{< /example >}}
+
+{{< callout info >}}
+Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
+{{< /callout >}}