| layout | title | description | group | toc |
|---|---|---|---|---|
docs |
Colors |
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. |
utilities |
true |
{{< callout info >}}
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.
{{< /callout >}}
{{< callout info >}} {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}}
Colorize text with color utilities. If you want to colorize links, you can use the [.link-* helper classes]({{< docsref "/helpers/colored-links" >}}) which have :hover and :focus states.
{{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}
.text-{{ .name }}
{{- end -}} {{< /colors.inline >}}.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
{{< /example >}}Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities do not set color, so in some cases you'll want to use .text-* utilities.
{{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.
{{< markdown >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}