diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md
index 580669a16f..c9fae18bd7 100644
--- a/site/content/docs/5.3/components/badge.md
+++ b/site/content/docs/5.3/components/badge.md
@@ -14,6 +14,9 @@ Badges scale to match the size of the immediate parent element by using relative
### Headings
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
This component variant should not be used because it does not exist in the Orange Design System specifications.
{{< /design-callout-alert >}}
@@ -26,11 +29,15 @@ This component variant should not be used because it does not exist in the Orang
Example heading New
Example heading New
{{< /example >}}
+
### Buttons
Badges can be used as part of links or buttons to provide a counter.
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
This component should not be used because it does not exist in the Orange Design System specifications.
{{< /design-callout-alert >}}
@@ -44,6 +51,7 @@ This component should not be used because it does not exist in the Orange Design
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
+
### Positioned
@@ -51,6 +59,9 @@ Unless the context is clear (as with the "Notifications" example, where it is un
Use utilities to modify a `.badge` and position it in the corner of a link with an icon.
+
+See Bootstrap's variants that can be useful in some contexts
+
{{< design-callout-alert >}}
This component variant should be used **only** inside a header component.
@@ -73,11 +84,15 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp
+
## Background colors
{{< added-in "5.2.0" >}}
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
These component variants should not be used because they do not exist in the Orange Design System specifications.
{{< /design-callout-alert >}}
@@ -94,11 +109,15 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}
+
## Pill badges
Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
This component should not be used because it does not exist in the Orange Design System specifications.
@@ -111,6 +130,7 @@ Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}).
{{ .name | title }}{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
+
## CSS
diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md
index 3ef0ecdbf1..66bba05040 100644
--- a/site/content/docs/5.3/components/breadcrumb.md
+++ b/site/content/docs/5.3/components/breadcrumb.md
@@ -75,6 +75,9 @@ $breadcrumb-divider: url("data:image/svg+xml,
{{< /example >}}
+
### Forms
Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{< docsref "/utilities/spacing" >}}) to give it the negative space you require.
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications.
@@ -932,11 +951,21 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
{{< /example >}}
+
## Dropdown options
Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.
+
+See Bootstrap's variants
+
+{{< design-callout-alert >}}
+This variant with a `data-bs-offset` attribute having values different than `"0,0"` should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
{{< example >}}
@@ -964,11 +993,15 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
{{< /example >}}
+
### Auto close behavior
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
The 3 last auto close behavior variants should not be used because featuring a single selection, they do no respect the Orange Design System specifications. They should be used only with multiple selections.
{{< /design-callout-alert >}}
@@ -1018,6 +1051,7 @@ The 3 last auto close behavior variants should not be used because featuring a s
{{< /example >}}
+
## CSS
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 498dfe76ef..ebdd6b56a2 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -146,6 +146,9 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
This variant is just an **example illustrating the use of the layout utility**. It should not be used because it does not respect the Orange Design System specifications.
{{< /design-callout-alert >}}
@@ -161,6 +164,7 @@ This variant is just an **example illustrating the use of the layout utility**.
{{- end -}}
{{< /list-group.inline >}}
{{< /example >}}
+
## Variants
@@ -238,6 +242,9 @@ Add badges to any list group item to show unread counts, activity, and more with
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
+
+See Bootstrap's variants
+
{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications.
{{< /design-callout-alert >}}
@@ -270,11 +277,15 @@ This variant should not be used because it does not respect the Orange Design Sy
{{< /example >}}
+
## Checkboxes and radios
Place Boosted's checkboxes and radios within list group items and customize as needed. You can use them without `