Add new info callout for ODS recommendation

site/assets/scss/docs.scss

@@ -57,7 +57,6 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "anchor";
 
 // Boosted mod
-@import "alerts";
 @import "mixins";
 @import "boosted";
 @import "tarteaucitron";

site/content/docs/5.3/components/badge.md

@@ -14,9 +14,9 @@ Badges scale to match the size of the immediate parent element by using relative
 
 ### Headings
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This component variant should not be used because it does not exist in the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <h1>Example heading <span class="badge bg-secondary">New</span></h1>
@@ -31,9 +31,9 @@ This component variant should not be used because it does not exist in the Orang
 
 Badges can be used as part of links or buttons to provide a counter.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <button type="button" class="btn btn-primary">
@@ -51,11 +51,11 @@ 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.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This component variant should be used **only** inside a header component.
 
 Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examples. You can also refer to the [Global headers](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <a href="#" class="position-relative">
@@ -78,9 +78,9 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp
 
 {{< added-in "5.2.0" >}}
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 These component variants should not be used because they do not exist in the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
@@ -99,11 +99,11 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
 
 Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
 
 Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). You can also refer to the [Tags](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 {{< badge.inline >}}

site/content/docs/5.3/components/breadcrumb.md

@@ -75,11 +75,11 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">

site/content/docs/5.3/components/button-group.md

@@ -36,11 +36,11 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 ## Mixed styles
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-secondary`.
 
 Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" >}}) secondary variant component. You can also refer to the [Buttons: standard](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic mixed styles example">
@@ -56,11 +56,11 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
 
 Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This **checkbox** variant should not be used because it does not respect the Orange Design System specifications.
 
 From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
@@ -92,9 +92,9 @@ From the Orange Design System point of view, checkboxes should be represented li
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
@@ -173,9 +173,9 @@ Instead of applying button sizing classes to every button in a group, just add `
 
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
@@ -199,9 +199,9 @@ This variant should not be used because it does not respect the Orange Design Sy
 
 Make a set of buttons appear vertically stacked rather than horizontally.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 These 2 vertical variants should not be used because they do not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">

site/content/docs/5.3/components/buttons.md

@@ -226,11 +226,11 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 
 You can even roll your own custom sizing with CSS variables:
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <button type="button" class="btn btn-primary"
@@ -274,11 +274,11 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
 
 Create responsive stacks of full-width, "block buttons" like those in Boosted 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications.
 
 Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="d-grid gap-2">
@@ -318,11 +318,11 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
 
 The button plugin allows you to create simple on/off toggle buttons.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 These variants with only **one toggle button** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a toggle button should not be used alone.
 
 Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< callout info >}}
 Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

site/content/docs/5.3/components/carousel.md

@@ -155,11 +155,11 @@ Pausing the carousel by hovering one slide should not be used.
 
 You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 **Captions** should not be used because they do not respect the Orange Design System specifications.
 
 Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af118d/p/7773e1-carousel-navigation/b/99a7b7) guidelines on the Orange Design System website.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div id="carouselExampleCaptions" class="carousel slide">

site/content/docs/5.3/components/collapse.md

@@ -12,9 +12,9 @@ toc: true
 
 The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 Triggering a collapse behavior from a button component should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< callout info >}}
 {{< partial "callouts/info-prefersreducedmotion.md" >}}

site/content/docs/5.3/components/dropdowns.md

@@ -140,11 +140,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
 </div>
 ```
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This small variant 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.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 <div class="bd-example">
   <div class="btn-group">
@@ -273,11 +273,11 @@ And putting it to use in a navbar:
 
 Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant 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.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="dropdown-center">
@@ -355,11 +355,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 
 Make the dropup menu centered above the toggle with `.dropup-center` on the parent element.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant 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.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="dropup-center dropup">
@@ -718,11 +718,11 @@ Separate groups of related menu items with a divider.
 
 Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant 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.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
@@ -739,11 +739,11 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 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.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant 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.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="dropdown-menu">
@@ -835,9 +835,9 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 
 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.
 
-{{< ods-incompatibility-alert >}}
+{{< 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.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group">

site/content/docs/5.3/components/list-group.md

@@ -144,9 +144,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.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant, which is just an **example illustrating the use of the layout utility**, should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 {{< list-group.inline >}}
@@ -202,9 +202,9 @@ Contextual classes also work with `.list-group-item-action` for `<a>` and `<butt
 
 Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}).
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <ul class="list-group">
@@ -227,9 +227,9 @@ This variant should not be used because it does not respect the Orange Design Sy
 
 Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="list-group">
@@ -264,9 +264,9 @@ This variant should not be used because it does not respect the Orange Design Sy
 
 Place Boosted's checkboxes and radios within list group items and customize as needed. You can use them without `<label>`s, but please remember to include an `aria-label` attribute and value for accessibility.
 
-{{< ods-incompatibility-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <ul class="list-group">