Blockquote examples mismatch between typography and card

[FlorentTorregrosa]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In documentation, Content > Typography > Naming a source:

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.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

In documentation, Components > Card > Header and Footer, there is an example of a quote with source in a card but the HTML does not match the example in typography:

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

The source is not outside the blockquote tag and not in a figcaption.

I found the related PR:

• fixing blockquote footer examples HTML #30085
• v5: Redo blockquote attributions #30814

And regarding the PRs, I think it is the example in card which should be updated.

If I got confirmation that it is that which should be fixed, I can try to provide a PR.

Reduced test cases

The card example should contain something like that in for its HTML, Maybe CSS will need to be adapted because currently not looking exactly like the documentation example:

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <figure class="mb-0">
      <blockquote class="blockquote">
        <p>A well-known quote, contained in a blockquote element.</p>
      </blockquote>
      <figcaption class="blockquote-footer">
        Someone famous in <cite title="Source Title">Source Title</cite>
      </figcaption>
    </figure>
  </div>
</div>

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.3.3