Skip to content

Commit 286f16b

Browse files
mdoffooddXhmikosR
authored
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 <gael.poupard@orange.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
1 parent 594e5fd commit 286f16b

File tree

5 files changed

+64
-46
lines changed

5 files changed

+64
-46
lines changed

‎scss/_type.scss

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,14 +84,19 @@
8484

8585
// Blockquotes
8686
.blockquote {
87-
margin-bottom: $spacer;
87+
margin-bottom: $blockquote-margin-y;
8888
@include font-size($blockquote-font-size);
89+
90+
> :last-child {
91+
margin-bottom: 0;
92+
}
8993
}
9094

9195
.blockquote-footer {
92-
display: block;
93-
@include font-size($blockquote-small-font-size);
94-
color: $blockquote-small-color;
96+
margin-top: -$blockquote-margin-y;
97+
margin-bottom: $blockquote-margin-y;
98+
@include font-size($blockquote-footer-font-size);
99+
color: $blockquote-footer-color;
95100

96101
&::before {
97102
content: "\2014\00A0"; // em dash, nbsp

‎scss/_variables.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -447,9 +447,10 @@ $text-muted: $gray-600 !default;
447447

448448
$initialism-font-size: $small-font-size !default;
449449

450-
$blockquote-small-color: $gray-600 !default;
451-
$blockquote-small-font-size: $small-font-size !default;
450+
$blockquote-margin-y: $spacer !default;
452451
$blockquote-font-size: $font-size-base * 1.25 !default;
452+
$blockquote-footer-color: $gray-600 !default;
453+
$blockquote-footer-font-size: $small-font-size !default;
453454

454455
$hr-margin-y: $spacer !default;
455456
$hr-color: inherit !default;

‎site/content/docs/5.0/content/reboot.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,8 +397,8 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
397397
<div class="bd-example">
398398
<blockquote class="blockquote">
399399
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
400-
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
401400
</blockquote>
401+
<p>Someone famous in <cite title="Source Title">Source Title</cite></p>
402402
</div>
403403

404404
### Inline elements

‎site/content/docs/5.0/content/typography.md

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -188,37 +188,49 @@ For quoting blocks of content from another source within your document. Wrap `<b
188188

189189
{{< example >}}
190190
<blockquote class="blockquote">
191-
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
191+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
192192
</blockquote>
193193
{{< /example >}}
194194

195195
### Naming a source
196196

197-
Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
197+
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.
198198

199199
{{< example >}}
200-
<blockquote class="blockquote">
201-
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
202-
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
203-
</blockquote>
200+
<figure>
201+
<blockquote class="blockquote">
202+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
203+
</blockquote>
204+
<figcaption class="blockquote-footer">
205+
Someone famous in <cite title="Source Title">Source Title</cite>
206+
</figcaption>
207+
</figure>
204208
{{< /example >}}
205209

206210
### Alignment
207211

208212
Use text utilities as needed to change the alignment of your blockquote.
209213

210214
{{< example >}}
211-
<blockquote class="blockquote text-center">
212-
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
213-
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
214-
</blockquote>
215+
<figure class="text-center">
216+
<blockquote class="blockquote">
217+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
218+
</blockquote>
219+
<figcaption class="blockquote-footer">
220+
Someone famous in <cite title="Source Title">Source Title</cite>
221+
</figcaption>
222+
</figure>
215223
{{< /example >}}
216224

217225
{{< example >}}
218-
<blockquote class="blockquote text-right">
219-
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
220-
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
221-
</blockquote>
226+
<figure class="text-right">
227+
<blockquote class="blockquote">
228+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
229+
</blockquote>
230+
<figcaption class="blockquote-footer">
231+
Someone famous in <cite title="Source Title">Source Title</cite>
232+
</figcaption>
233+
</figure>
222234
{{< /example >}}
223235

224236
## Lists

‎site/content/docs/5.0/examples/masonry/index.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@ <h5 class="card-title">Card title that wraps to a new line</h5>
3333
</div>
3434
<div class="col-sm-6 col-lg-4 mb-4">
3535
<div class="card p-3">
36-
<blockquote class="blockquote mb-0 card-body">
37-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
38-
<footer class="blockquote-footer">
39-
<small class="text-muted">
40-
Someone famous in <cite title="Source Title">Source Title</cite>
41-
</small>
42-
</footer>
43-
</blockquote>
36+
<figure class="p-3 mb-0">
37+
<blockquote class="blockquote">
38+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
39+
</blockquote>
40+
<figcaption class="blockquote-footer mb-0 text-muted">
41+
Someone famous in <cite title="Source Title">Source Title</cite>
42+
</figcaption>
43+
</figure>
4444
</div>
4545
</div>
4646
<div class="col-sm-6 col-lg-4 mb-4">
@@ -55,21 +55,21 @@ <h5 class="card-title">Card title</h5>
5555
</div>
5656
<div class="col-sm-6 col-lg-4 mb-4">
5757
<div class="card bg-primary text-white text-center p-3">
58-
<blockquote class="blockquote mb-0">
59-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
60-
<footer class="blockquote-footer text-white">
61-
<small>
62-
Someone famous in <cite title="Source Title">Source Title</cite>
63-
</small>
64-
</footer>
65-
</blockquote>
58+
<figure class="mb-0">
59+
<blockquote class="blockquote">
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
61+
</blockquote>
62+
<figcaption class="blockquote-footer mb-0 text-white">
63+
Someone famous in <cite title="Source Title">Source Title</cite>
64+
</figcaption>
65+
</figure>
6666
</div>
6767
</div>
6868
<div class="col-sm-6 col-lg-4 mb-4">
6969
<div class="card text-center">
7070
<div class="card-body">
7171
<h5 class="card-title">Card title</h5>
72-
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
72+
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
7373
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
7474
</div>
7575
</div>
@@ -81,14 +81,14 @@ <h5 class="card-title">Card title</h5>
8181
</div>
8282
<div class="col-sm-6 col-lg-4 mb-4">
8383
<div class="card p-3 text-right">
84-
<blockquote class="blockquote mb-0">
85-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
86-
<footer class="blockquote-footer">
87-
<small class="text-muted">
88-
Someone famous in <cite title="Source Title">Source Title</cite>
89-
</small>
90-
</footer>
91-
</blockquote>
84+
<figure class="mb-0">
85+
<blockquote class="blockquote">
86+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
87+
</blockquote>
88+
<figcaption class="blockquote-footer mb-0 text-muted">
89+
Someone famous in <cite title="Source Title">Source Title</cite>
90+
</figcaption>
91+
</figure>
9292
</div>
9393
</div>
9494
<div class="col-sm-6 col-lg-4 mb-4">

0 commit comments

Comments
 (0)