Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cards: Use svg instead of text inside the placeholder image #1886

Merged
merged 7 commits into from
Mar 16, 2023
Merged

Cards: Use svg instead of text inside the placeholder image #1886

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
95a41d8
Fix
louismaximepiton Mar 9, 2023
08e732d
Fix to be closer to design.
louismaximepiton Mar 13, 2023
cfe5322
Replace `Image cap` by our svg.
louismaximepiton Mar 13, 2023
9f8275d
Merge branch 'main' into main-lmp-card-use-svg-placeholder
julien-deramond Mar 16, 2023
2bf7547
fix(review)
louismaximepiton Mar 16, 2023
b2cf975
fix(review)
louismaximepiton Mar 16, 2023
262831c
Merge branch 'main' into main-lmp-card-use-svg-placeholder
julien-deramond Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions site/content/docs/5.3/components/card.md
View file
Open in desktop
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards

{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was the transition from 'Image cap' to 'icon' validated by our a11y expert or do we need to ask him for a review?
Shouldn't it be tackled on Bootstrap's side? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the right label for upcoming a11y review and yeah it might be proposed on their side as well.

<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand Down Expand Up @@ -69,7 +69,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t

{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<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>
Expand Down Expand Up @@ -122,7 +122,7 @@ Mix and match multiple content types to create the card you need, or throw every

{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand Down Expand Up @@ -356,7 +356,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—

{{< example >}}
<div class="card mb-3">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -369,7 +369,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
<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-body-secondary">Last updated 3 mins ago</small></p>
</div>
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-bottom" text="icon" >}}
</div>
{{< /example >}}

Expand Down Expand Up @@ -494,23 +494,23 @@ Use card groups to render cards as a single, attached element with equal width a
{{< example >}}
<div class="card-group">
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -525,7 +525,7 @@ When using card groups with footers, their content will automatically line up.
{{< example >}}
<div class="card-group">
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -535,7 +535,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -545,7 +545,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -565,7 +565,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -574,7 +574,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
</div>
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -583,7 +583,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
</div>
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -592,7 +592,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
</div>
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -608,7 +608,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -617,7 +617,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
</div>
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -626,7 +626,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
</div>
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -635,7 +635,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
</div>
<div class="col">
<div class="card">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -651,7 +651,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -660,7 +660,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
</div>
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text fw-bold">This is a short card.</p>
Expand All @@ -669,7 +669,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
</div>
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -678,7 +678,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
</div>
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -694,7 +694,7 @@ Just like with card groups, card footers will automatically line up.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand All @@ -706,7 +706,7 @@ Just like with card groups, card footers will automatically line up.
</div>
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -718,7 +718,7 @@ Just like with card groups, card footers will automatically line up.
</div>
<div class="col">
<div class="card h-100">
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag
<div class="modal position-static d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
{{< placeholder width="100%" height="260" class="modal-img" text="Image cap" >}}
{{< placeholder width="100%" height="260" class="modal-img" text="icon" >}}
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/masonry/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h1>Boosted and Masonry</h1>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
{{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="200" class="card-img-top" text="icon" >}}
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</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>
Expand All @@ -48,7 +48,7 @@ <h5 class="card-title">Card title that wraps to a new line</h5>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
{{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
{{< placeholder width="100%" height="200" class="card-img-top" text="icon" >}}
<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>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/helpers/stretched-link.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Multiple links and tap targets are not recommended with stretched links. However

{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card icon" >}}
<div class="card-body">
<h5 class="card-title">Card with stretched link</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>
Expand Down Expand Up @@ -61,7 +61,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel

{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card icon" >}}
<div class="card-body">
<h5 class="card-title">Card with stretched links</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>
Expand Down
6 changes: 4 additions & 2 deletions site/layouts/shortcodes/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@
{{- $rtl := .Get "rtl" | default false -}}

<div class="card{{ if eq $borders false }} border-0{{ end }}{{ if and $borders (eq $background "dark") }} border-dark{{ end }}">
<svg class="bd-placeholder-img card-img-top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}تعليق على الصورة{{ else }}Image cap{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
<svg class="bd-placeholder-img card-img-top" width="100%" height="169" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}العنصر النائب: شرح الصورة{{ else }}Placeholder: Image caption{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%" height="100%" fill="{{ (index $.Site.Data.grays 3).hex }}"/>
<text x="50%" y="50%" fill="{{ (index $.Site.Data.grays 5).hex }}" dy=".3em">{{ if $rtl }}تعليق على الصورة{{ else }}Image cap{{ end }}</text>
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000014" aria-hidden="true" focusable="false">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have a corresponding value in our $.Site.Data.grays list?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I don't think so. I chose to have a kind of watermark with opacity since we have some use cases using colored backgrounds and the grey was pretty ugly to use with. Tell me what you think the best between:
image
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None 😄 Should probably be a dark gray but nevermind, it's not that related to the PR. Edge case.

<path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
</svg>
</svg>
<div class="card-body text-{{ if eq $background "dark" }}white{{ else }}black{{ end }} bg-{{ $background }}{{ if $open }} px-0{{ end }}">
<h3 class="card-title{{ if and $metadata (not $caption) }} mb-3{{ end }}">{{ if $rtl }}عنوان{{ else }}Title{{ end }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/shortcodes/placeholder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<rect width="100%" height="100%" fill="{{ $background }}"/>
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
{{- if $show_icon }}
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000088">
<svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#{{ if (or (eq $background "#000") (eq $background "#333")) }}ffffff30{{ else }}00000014{{ end }}">
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
<path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
</svg>
{{ end -}}
Expand Down