From d6671d8f2d30198a13a27c92971ba37cad6bffca Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 21 Jun 2020 13:33:07 +0100 Subject: [PATCH] Docs: move color utility callouts to start of page (#31135) * Move color utility callouts to start of page Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes. * Change heading level otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading --- site/content/docs/5.0/utilities/colors.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 76788034be..6ca7a7d123 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -6,6 +6,16 @@ group: utilities toc: true --- +{{< callout info >}} +##### Dealing with specificity + +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 `
` with the class. +{{< /callout >}} + +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Color 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. @@ -50,13 +60,3 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs- {{- end -}} {{< /colors.inline >}} {{< /markdown >}} - -{{< callout info >}} -#### Dealing with specificity - -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 `
` with the class. -{{< /callout >}} - -{{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}}