From 9790d144dd703bb18f942142b5ac7c67aea02dc5 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Mon, 13 Mar 2023 10:44:45 +0100
Subject: [PATCH] Changes after Julien's review: - removing unneeded boosted
 mod comments - adding info about blue design callout in introduction and
 update text about red ones - removing h4 class to callout title

Also:
- renaming ods-alert shortcode to design-callout-alert to be easier to find and refer
---
 site/content/docs/5.3/components/badge.md     | 20 ++++++++--------
 .../content/docs/5.3/components/breadcrumb.md |  4 ++--
 .../docs/5.3/components/button-group.md       | 20 ++++++++--------
 site/content/docs/5.3/components/buttons.md   | 12 +++++-----
 site/content/docs/5.3/components/carousel.md  |  4 ++--
 site/content/docs/5.3/components/collapse.md  |  4 ++--
 site/content/docs/5.3/components/dropdowns.md | 24 +++++++++----------
 .../content/docs/5.3/components/list-group.md | 16 ++++++-------
 site/content/docs/5.3/components/modal.md     |  8 +++----
 site/content/docs/5.3/components/navbar.md    |  4 ++--
 site/content/docs/5.3/components/navs-tabs.md |  8 +++----
 site/content/docs/5.3/components/progress.md  | 16 ++++++-------
 site/content/docs/5.3/components/scrollspy.md |  4 ++--
 site/content/docs/5.3/components/spinners.md  |  4 ++--
 site/content/docs/5.3/components/tooltips.md  |  4 ++--
 site/content/docs/5.3/content/reboot.md       |  4 ++--
 site/content/docs/5.3/content/tables.md       | 10 ++++----
 site/content/docs/5.3/customize/color.md      |  4 ++--
 site/content/docs/5.3/forms/input-group.md    | 20 ++++++++--------
 site/content/docs/5.3/forms/layout.md         |  4 ++--
 .../docs/5.3/getting-started/introduction.md  | 16 +++++++++----
 site/content/docs/5.3/helpers/focus-ring.md   |  4 ++--
 site/content/docs/5.3/helpers/icon-link.md    |  4 ++--
 site/content/docs/5.3/utilities/link.md       |  4 ++--
 ...s-alert.html => design-callout-alert.html} |  4 ++--
 25 files changed, 116 insertions(+), 110 deletions(-)
 rename site/layouts/shortcodes/{ods-alert.html => design-callout-alert.html} (79%)

diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md
index d3164f2c15..cb29bb5317 100644
--- a/site/content/docs/5.3/components/badge.md
+++ b/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-alert >}}
+{{< design-callout-alert >}}
 This component variant should not be used because it does not exist in the Orange Design System specifications.
-{{< /ods-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-alert >}}
+{{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
-{{< /ods-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-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-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-alert >}}
+{{< design-callout-alert >}}
 These component variants should not be used because they do not exist in the Orange Design System specifications.
-{{< /ods-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-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-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 {{< badge.inline >}}
diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md
index 9eb9950727..c4367460c2 100644
--- a/site/content/docs/5.3/components/breadcrumb.md
+++ b/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-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-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 18d5eef1bb..2c31cc1093 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/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-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-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-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-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-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-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-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-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-alert >}}
+{{< design-callout-alert >}}
 These 2 vertical variants should not be used because they do not respect the Orange Design System specifications.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index bfc095145a..69d2d294d2 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/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-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-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-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-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-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-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.
diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md
index b01a1472d7..291a89f48f 100644
--- a/site/content/docs/5.3/components/carousel.md
+++ b/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-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-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div id="carouselExampleCaptions" class="carousel slide">
diff --git a/site/content/docs/5.3/components/collapse.md b/site/content/docs/5.3/components/collapse.md
index 24f3ce9be3..0235728cd1 100644
--- a/site/content/docs/5.3/components/collapse.md
+++ b/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-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-alert >}}
+{{< /design-callout-alert >}}
 
 {{< callout info >}}
 {{< partial "callouts/info-prefersreducedmotion.md" >}}
diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index 544a1dc62a..2be371be18 100644
--- a/site/content/docs/5.3/components/dropdowns.md
+++ b/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-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-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-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-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-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-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-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-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-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-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-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-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="btn-group">
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 70b64f65ff..b49d88f478 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/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-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-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-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-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-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-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-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <ul class="list-group">
diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 907db0c5b7..eb78d14e0a 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -554,11 +554,11 @@ exampleModal.addEventListener('show.bs.modal', event => {
 
 Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This toggle behavior between multiple modals should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons.
 
 Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 <!--Boosted mod: replace aria-label="Close" with a visually hidden span (a11y)-->
 {{< example >}}
@@ -709,11 +709,11 @@ Another override is the option to pop up a modal that covers the user viewport,
 | `.modal-fullscreen-xxl-down` | `1440px` |
 {{< /bs-table >}}
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 These **full screen** variants should not be used because they do not respect the Orange Design System specifications. Indeed, modals should always be placed in the center of a page and not be full screen.
 
 Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 <div class="bd-example">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 91ca2aa57b..b31a194dd6 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -8,11 +8,11 @@ aliases:
 toc: true
 ---
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with Boosted due to a different HTML structure.
 
 In order to build an Orange navbar please refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}).
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 ## How it works
 
diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
index 06b7975245..b52780cfb2 100644
--- a/site/content/docs/5.3/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@@ -155,9 +155,9 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 
 Take that same HTML, but use `.nav-pills` instead:
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it is a button component in the Orange Design System specifications.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <ul class="nav nav-pills">
@@ -363,9 +363,9 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ### Pills with dropdowns
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it is a button component in the Orange Design System specifications.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <ul class="nav nav-pills">
diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
index fe852abda6..4e64f98324 100644
--- a/site/content/docs/5.3/components/progress.md
+++ b/site/content/docs/5.3/components/progress.md
@@ -58,11 +58,11 @@ Boosted provides a handful of [utilities for setting width]({{< docsref "/utilit
 
 You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 The **1px height** variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Progress indicators](https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
@@ -110,11 +110,11 @@ Boosted also provides size variants for progress bar: simply add `.progress-xs`
 
 Use background utility classes to change the appearance of individual progress bars.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 These backgrounds color variants should not be used because they do not respect the Orange Design System specifications. The only background color to use is the primary color.
 
 Please refer to the [Progress indicators](https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
@@ -182,11 +182,11 @@ You can include multiple progress components inside a container with `.progress-
 
 Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 These variants should not be used because they do not respect the Orange Design System specifications.
 
 Please refer to the [Progress indicators](https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
@@ -210,11 +210,11 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 
 The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Progress indicators](https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md
index 9e90f0b9c5..ccea5b61e5 100644
--- a/site/content/docs/5.3/components/scrollspy.md
+++ b/site/content/docs/5.3/components/scrollspy.md
@@ -24,11 +24,11 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
 
 ### Navbar
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This navbar version of the Scrollspy component is not compatible with the Orange Design System.
 
 Refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}) and [Nav & tabs]({{< docsref "/components/navs-tabs" >}}).
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
 
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index 09edaf1823..c7c538ec13 100644
--- a/site/content/docs/5.3/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -8,11 +8,11 @@ aliases:
 toc: true
 ---
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This component contains some spinners that should not be used on Orange sites.
 
 **Growing spinner** and its examples are not compatible with the [Orange Design System]({{< param ods.web >}}).
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 ## About
 
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index 0d7cc5d80c..f6a79455d3 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -59,11 +59,11 @@ Hover over the links below to see tooltips:
 
 {{< added-in "5.2.0" >}}
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This **customized** variant should not be used because it does not respect the Orange Design System specifications. More generally, customizing tooltip CSS might lead to mismatch the Orange Design System.
 
 Please refer to the [Tooltip](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) guidelines  on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
 
diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md
index 8d458e560d..91572e6396 100644
--- a/site/content/docs/5.3/content/reboot.md
+++ b/site/content/docs/5.3/content/reboot.md
@@ -129,9 +129,9 @@ Placeholder links—those without an `href`—are targeted with a more specific
 
 The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 These `<hr>` 3rd and 4th variants can not be used because they do not respect the Orange Design System specifications. For the 3rd variant, it is because of its opacity. For the 4th variant, it is because of its height and its opacity.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <hr>
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index 426fa045d5..9e9fef6088 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -14,11 +14,10 @@ Due to the widespread use of `<table>` elements across third-party widgets like
 
 Using the most basic table markup, here's how `.table`-based tables look in Boosted.
 
-<!-- Boosted mod : design callout -->
-{{< ods-alert info >}}
+{{< design-callout-alert info >}}
 In order to get the row height recommended by Orange Design System, please use the `.table-sm` class in addition to `.table`.
 You can refer to [small tables]({{< docsref "/content/tables#small-tables" >}}) paragraph.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< table class="table" simplified="false" caption="Boosted tables basic look" >}}
 
@@ -249,10 +248,9 @@ Behind the scenes it looks like this:
 
 Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.
 
-<!-- Boosted mod : design callout -->
-{{< ods-alert info >}}
+{{< design-callout-alert info >}}
 To display basic tables, Orange Design System recommends using these compact tables.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< table class="table table-sm" caption="Boosted small table" >}}
 
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
index d0cc12233d..ec1d7c6fa0 100644
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/content/docs/5.3/customize/color.md
@@ -517,11 +517,11 @@ Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-l
 
 ### All colors
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 Some of the colors below, especially the **variants suffixed by** `-100` **to** `-900`, do not belong the Orange Design System specifications.
 
 Please refer to our Boosted [Orange's colors]({{< docsref "/customize/color#oranges-colors" >}}) section and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< callout warning >}}
 All Boosted colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index 91aac9410c..074a73d1aa 100644
--- a/site/content/docs/5.3/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -12,11 +12,11 @@ toc: true
 
 Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<label>`s outside the input group.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 These form variants should not be used because they do not respect the Orange Design System specifications.
 
 Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="input-group mb-3">
@@ -114,11 +114,11 @@ Place any checkbox or radio option within an input group's addon instead of text
 
 While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This form variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="input-group">
@@ -132,11 +132,11 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This form variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="input-group mb-3">
@@ -154,11 +154,11 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 ## Button addons
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 These variants should not be used because they do not respect the Orange Design System specifications. They are not recommended for usability reasons.
 
 Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="input-group mb-3">
@@ -186,11 +186,11 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 ## Buttons with dropdowns
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This **third** form variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <div class="input-group mb-3">
diff --git a/site/content/docs/5.3/forms/layout.md b/site/content/docs/5.3/forms/layout.md
index 1f713ea446..6f7252a9ff 100644
--- a/site/content/docs/5.3/forms/layout.md
+++ b/site/content/docs/5.3/forms/layout.md
@@ -295,11 +295,11 @@ You can then remix that once again with size-specific column classes.
 
 Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-check` align properly.
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This form variant should not be used because it does not respect the Orange Design System specifications.
 
 Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 {{< example >}}
 <form class="row row-cols-lg-auto g-3 align-items-center">
diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md
index abb6af2fb9..5cc31eeb5a 100644
--- a/site/content/docs/5.3/getting-started/introduction.md
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -17,16 +17,24 @@ As Boosted is based on Bootstrap, you'll find in Boosted **all** the Bootstrap's
 
 Among those inherited components and variants, some exist in the Orange Design System and fully respect its design specifications and some don't. Those ones should not be used in your projects to ensure a consistent user experience throughout our Orange web services.
 
-As for maintainability reasons we have to keep them in this documentation, we tagged them with red informational design callouts. They inform you of what should not be used from an Orange design point of view. They suggest, when available, a replacement solution and/or a link to the Orange Design System website to see other possibilities.
+As for maintainability reasons we have to keep them in this documentation, we tagged them with red incompatibility design callouts. They inform you of what should not be used from an Orange design point of view. They suggest, when available, a replacement solution and/or a link to the Orange Design System website to see other possibilities.
 Thanks for taking this information into account.
 
-Design callouts message example:
+Design incompatibility callouts message example:
 
-{{< ods-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" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on on the Orange Design System website.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
+
+In the same spirit, some blue recommendation design callouts will inform you of specific Orange Design System recommendations.
+
+Design recommendation callouts message example:
+
+{{< design-callout-alert info >}}
+To display basic tables, Orange Design System recommends using these compact tables.
+{{< /design-callout-alert >}}
 
 ## Quick start
 
diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md
index 51ed5c8b2d..88592d9cfa 100644
--- a/site/content/docs/5.3/helpers/focus-ring.md
+++ b/site/content/docs/5.3/helpers/focus-ring.md
@@ -9,9 +9,9 @@ toc: true
 added: "5.3"
 ---
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This helper should not be used because the rendering provided in the following examples does not exist in the Orange Design System specifications.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.
 
diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
index 164d74b6d7..d9198198da 100644
--- a/site/content/docs/5.3/helpers/icon-link.md
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -20,9 +20,9 @@ Add `.link-chevron` to bold your link and enhance them with a chevron.
 
 ## Icon link
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 This helper should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
 
diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md
index c81ad1e694..d53e069583 100644
--- a/site/content/docs/5.3/utilities/link.md
+++ b/site/content/docs/5.3/utilities/link.md
@@ -9,9 +9,9 @@ toc: true
 added: 5.3
 ---
 
-{{< ods-alert >}}
+{{< design-callout-alert >}}
 Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, these utilities could help in some cases to build specific ues cases or other reusable components.
-{{< /ods-alert >}}
+{{< /design-callout-alert >}}
 
 ## Link opacity
 
diff --git a/site/layouts/shortcodes/ods-alert.html b/site/layouts/shortcodes/design-callout-alert.html
similarity index 79%
rename from site/layouts/shortcodes/ods-alert.html
rename to site/layouts/shortcodes/design-callout-alert.html
index 0d7a88a621..a764cdabe2 100644
--- a/site/layouts/shortcodes/ods-alert.html
+++ b/site/layouts/shortcodes/design-callout-alert.html
@@ -1,5 +1,5 @@
 {{- /*
-  Usage: `ods-alert "level"`, where `level` is one of info, success, warning or danger (default)
+  Usage: `design-callout-alert "level"`, where `level` is one of info, success, warning or danger (default)
 */ -}}
 
 {{- $level := .Get 0 | default "danger" -}}
@@ -7,7 +7,7 @@
 <div class="alert alert-{{ $level }}">
   <span class="alert-icon"><span class="visually-hidden">{{ $level }}</span></span>
   <div>
-    <div class="alert-heading mb-1 h4">
+    <div class="alert-heading mb-1">
       {{- if eq $level "danger" -}}
         Incompatibility with Orange Design System.
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">More information</a>