Skip to content

Commit

Permalink
fix(cards): rendering and semantics rework of cards to better fit wit…
Browse files Browse the repository at this point in the history 
…h ODS (#1376)

Co-authored-by: Julien Déramond <[email protected]>
  • Loading branch information
@louismaximepiton @julien-deramond
louismaximepiton and julien-deramond authored Dec 7, 2022
1 parent f5ed0b7 commit f8772e1
Show file tree
Hide file tree
Showing 5 changed files with 638 additions and 710 deletions.
7 changes: 5 additions & 2 deletions scss/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@
}

.card-title {
@extend .h4; // Boosted mod
margin-bottom: var(--#{$prefix}card-title-spacer-y);
// Boosted mod: no `color`

// Boosted mod: prevent unwanted margin when nothing follows…
&:only-child {
Expand All @@ -84,8 +86,9 @@
}

.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-bottom: 0;
@extend .h6; // Boosted mod
margin-top: 0; // Boosted mod
margin-bottom: var(--#{$prefix}card-title-spacer-y); // Boosted mod
}

.card-text:last-child {
Expand Down
58 changes: 29 additions & 29 deletions site/content/docs/5.2/components/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Expand Down Expand Up @@ -55,7 +55,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<h6 class="card-subtitle">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
Expand All @@ -71,7 +71,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
{{< /example >}}
Expand Down Expand Up @@ -125,7 +125,7 @@ Mix and match multiple content types to create the card you need, or throw every
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
Expand Down Expand Up @@ -359,14 +359,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
Expand All @@ -382,7 +382,7 @@ Turn an image into a card background and overlay your card's text. Depending on
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" background="#000" >}}
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small>Last updated 3 mins ago</small></p>
</div>
</div>
Expand All @@ -405,7 +405,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
Expand Down Expand Up @@ -497,23 +497,23 @@ Use card groups to render cards as a single, attached element with equal width a
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
Expand All @@ -528,7 +528,7 @@ When using card groups with footers, their content will automatically line up.
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
Expand All @@ -538,7 +538,7 @@ When using card groups with footers, their content will automatically line up.
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
Expand All @@ -548,7 +548,7 @@ When using card groups with footers, their content will automatically line up.
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
Expand All @@ -568,7 +568,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -577,7 +577,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -586,7 +586,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
Expand All @@ -595,7 +595,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -611,7 +611,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -620,7 +620,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -629,7 +629,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
Expand All @@ -638,7 +638,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -654,7 +654,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -663,7 +663,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
<p class="card-text fw-bold">This is a short card.</p>
</div>
</div>
</div>
Expand All @@ -672,7 +672,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
Expand All @@ -681,7 +681,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Expand All @@ -697,7 +697,7 @@ Just like with card groups, card footers will automatically line up.
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
Expand All @@ -709,7 +709,7 @@ Just like with card groups, card footers will automatically line up.
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
Expand All @@ -721,7 +721,7 @@ Just like with card groups, card footers will automatically line up.
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
Expand Down
Loading

0 comments on commit f8772e1

Please sign in to comment.