From c450f4b2136bf5dc1eb030bcce59420f32ab6a90 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 6 Sep 2021 16:40:48 +0100
Subject: [PATCH] Turn big note into actual normal doc text

---
 site/content/docs/5.1/components/buttons.md     | 5 +----
 site/content/docs/5.1/utilities/interactions.md | 2 --
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md
index 5858f4bc1682..621078a126bd 100644
--- a/site/content/docs/5.1/components/buttons.md
+++ b/site/content/docs/5.1/components/buttons.md
@@ -93,8 +93,7 @@ Disabled buttons using the `<a>` element behave a bit different:
 <a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
-{{< callout warning >}}
-##### Link functionality caveat
+### Link functionality caveat
 
 To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
 
@@ -103,8 +102,6 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
 <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
-{{< /callout >}}
-
 ## Block buttons
 
 Create responsive stacks of full-width, "block buttons" like those in Bootstrap 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.
diff --git a/site/content/docs/5.1/utilities/interactions.md b/site/content/docs/5.1/utilities/interactions.md
index 228680c6ab76..5324da792a65 100644
--- a/site/content/docs/5.1/utilities/interactions.md
+++ b/site/content/docs/5.1/utilities/interactions.md
@@ -26,14 +26,12 @@ Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element i
 <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
 {{< /example >}}
 
-{{< callout warning >}}
 The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.
 
 If possible, the simpler solution is:
 
 * for form controls, add the `disabled` HTML attribute.
 * for links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.
-{{< /callout >}}
 
 ## Sass