v5: Redo blockquote attributions (#30814)

* v5: Redo blockquote attributions

- Renames -small-* variables to -footer-*
- Updates blockquote demos with attribution to place it outside the blockquote with a figure wrapper

* Updated class name

* docs(examples): refactor blockquotes in masonry example

Co-authored-by: Gaël Poupard <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

5 files changed, 64 insertions, 46 deletions

diff --git a/scss/_type.scss b/scss/_type.scss
index efa2c8155..b2d524ca1 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -84,14 +84,19 @@
 
 // Blockquotes
 .blockquote {
-  margin-bottom: $spacer;
+  margin-bottom: $blockquote-margin-y;
   @include font-size($blockquote-font-size);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 .blockquote-footer {
-  display: block;
-  @include font-size($blockquote-small-font-size);
-  color: $blockquote-small-color;
+  margin-top: -$blockquote-margin-y;
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-footer-font-size);
+  color: $blockquote-footer-color;
 
   &::before {
     content: "\2014\00A0"; // em dash, nbsp
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2af7461a0..2e0d0cef6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -447,9 +447,10 @@ $text-muted:                  $gray-600 !default;
 
 $initialism-font-size:        $small-font-size !default;
 
-$blockquote-small-color:      $gray-600 !default;
-$blockquote-small-font-size:  $small-font-size !default;
+$blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-base * 1.25 !default;
+$blockquote-footer-color:     $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md
index e9f6dac1a..2af004574 100644
--- a/site/content/docs/5.0/content/reboot.md
+++ b/site/content/docs/5.0/content/reboot.md
@@ -397,8 +397,8 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
 <div class="bd-example">
   <blockquote class="blockquote">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
   </blockquote>
+  <p>Someone famous in <cite title="Source Title">Source Title</cite></p>
 </div>
 
 ### Inline elements
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
index 0bbe54c42..0ae59b4cd 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.0/content/typography.md
@@ -188,19 +188,23 @@ For quoting blocks of content from another source within your document. Wrap `<b
 
 {{< example >}}
 <blockquote class="blockquote">
-  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
 {{< /example >}}
 
 ### Naming a source
 
-Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
+The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well.
 
 {{< example >}}
-<blockquote class="blockquote">
-  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-</blockquote>
+<figure>
+  <blockquote class="blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
 {{< /example >}}
 
 ### Alignment
@@ -208,17 +212,25 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
 Use text utilities as needed to change the alignment of your blockquote.
 
 {{< example >}}
-<blockquote class="blockquote text-center">
-  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-</blockquote>
+<figure class="text-center">
+  <blockquote class="blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
 {{< /example >}}
 
 {{< example >}}
-<blockquote class="blockquote text-right">
-  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-</blockquote>
+<figure class="text-right">
+  <blockquote class="blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
 {{< /example >}}
 
 ## Lists
diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html
index e3ef747dd..046a80091 100644
--- a/site/content/docs/5.0/examples/masonry/index.html
+++ b/site/content/docs/5.0/examples/masonry/index.html
@@ -33,14 +33,14 @@ extra_js:
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card p-3">
-        <blockquote class="blockquote mb-0 card-body">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">
-            <small class="text-muted">
-              Someone famous in <cite title="Source Title">Source Title</cite>
-            </small>
-          </footer>
-        </blockquote>
+        <figure class="p-3 mb-0">
+          <blockquote class="blockquote">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+          </blockquote>
+          <figcaption class="blockquote-footer mb-0 text-muted">
+            Someone famous in <cite title="Source Title">Source Title</cite>
+          </figcaption>
+        </figure>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
@@ -55,21 +55,21 @@ extra_js:
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card bg-primary text-white text-center p-3">
-        <blockquote class="blockquote mb-0">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
-          <footer class="blockquote-footer text-white">
-            <small>
-              Someone famous in <cite title="Source Title">Source Title</cite>
-            </small>
-          </footer>
-        </blockquote>
+        <figure class="mb-0">
+          <blockquote class="blockquote">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+          </blockquote>
+          <figcaption class="blockquote-footer mb-0 text-white">
+            Someone famous in <cite title="Source Title">Source Title</cite>
+          </figcaption>
+        </figure>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
-          <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+          <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
           <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
       </div>
@@ -81,14 +81,14 @@ extra_js:
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card p-3 text-right">
-        <blockquote class="blockquote mb-0">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">
-            <small class="text-muted">
-              Someone famous in <cite title="Source Title">Source Title</cite>
-            </small>
-          </footer>
-        </blockquote>
+        <figure class="mb-0">
+          <blockquote class="blockquote">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+          </blockquote>
+          <figcaption class="blockquote-footer mb-0 text-muted">
+            Someone famous in <cite title="Source Title">Source Title</cite>
+          </figcaption>
+        </figure>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">