From 149cac64db74c7192a379d09671b39faec40c5fa Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sun, 20 Sep 2020 16:30:00 +0300
Subject: [PATCH] Replace data SVGs with inline SVGs

Taken from upstream v4-dev and adapted.
---
 docs/cerulean/index.html  | 5 ++++-
 docs/cosmo/index.html     | 5 ++++-
 docs/cyborg/index.html    | 5 ++++-
 docs/darkly/index.html    | 5 ++++-
 docs/default/index.html   | 5 ++++-
 docs/flatly/index.html    | 5 ++++-
 docs/journal/index.html   | 5 ++++-
 docs/litera/index.html    | 5 ++++-
 docs/lumen/index.html     | 5 ++++-
 docs/lux/index.html       | 5 ++++-
 docs/materia/index.html   | 5 ++++-
 docs/minty/index.html     | 5 ++++-
 docs/pulse/index.html     | 5 ++++-
 docs/sandstone/index.html | 5 ++++-
 docs/simplex/index.html   | 5 ++++-
 docs/sketchy/index.html   | 5 ++++-
 docs/slate/index.html     | 5 ++++-
 docs/solar/index.html     | 5 ++++-
 docs/spacelab/index.html  | 5 ++++-
 docs/superhero/index.html | 5 ++++-
 docs/united/index.html    | 5 ++++-
 docs/yeti/index.html      | 5 ++++-
 22 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/docs/cerulean/index.html b/docs/cerulean/index.html
index 166da6ef7..9d3b3f6c4 100644
--- a/docs/cerulean/index.html
+++ b/docs/cerulean/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/cosmo/index.html b/docs/cosmo/index.html
index ec7a15cca..301361990 100644
--- a/docs/cosmo/index.html
+++ b/docs/cosmo/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/cyborg/index.html b/docs/cyborg/index.html
index dda5d479c..8df43e284 100644
--- a/docs/cyborg/index.html
+++ b/docs/cyborg/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/darkly/index.html b/docs/darkly/index.html
index a4cfbc736..29473fa08 100644
--- a/docs/darkly/index.html
+++ b/docs/darkly/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/default/index.html b/docs/default/index.html
index bf262922e..2915cf02e 100644
--- a/docs/default/index.html
+++ b/docs/default/index.html
@@ -1388,7 +1388,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/flatly/index.html b/docs/flatly/index.html
index 3867d7e20..a159874b5 100644
--- a/docs/flatly/index.html
+++ b/docs/flatly/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/journal/index.html b/docs/journal/index.html
index 05aa61106..3fa170b6f 100644
--- a/docs/journal/index.html
+++ b/docs/journal/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/litera/index.html b/docs/litera/index.html
index 06712eefd..10d34ce8e 100644
--- a/docs/litera/index.html
+++ b/docs/litera/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/lumen/index.html b/docs/lumen/index.html
index e66e6dcc9..755bfe16b 100644
--- a/docs/lumen/index.html
+++ b/docs/lumen/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/lux/index.html b/docs/lux/index.html
index de6aaf67e..5bb154a51 100644
--- a/docs/lux/index.html
+++ b/docs/lux/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/materia/index.html b/docs/materia/index.html
index 1f722ec11..562961c72 100644
--- a/docs/materia/index.html
+++ b/docs/materia/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/minty/index.html b/docs/minty/index.html
index d56a1e24e..bc016a87f 100644
--- a/docs/minty/index.html
+++ b/docs/minty/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/pulse/index.html b/docs/pulse/index.html
index a6a19d347..3b6f28bde 100644
--- a/docs/pulse/index.html
+++ b/docs/pulse/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/sandstone/index.html b/docs/sandstone/index.html
index b96e0b195..cecc8f30e 100644
--- a/docs/sandstone/index.html
+++ b/docs/sandstone/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/simplex/index.html b/docs/simplex/index.html
index 4c6138502..c490577fe 100644
--- a/docs/simplex/index.html
+++ b/docs/simplex/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/sketchy/index.html b/docs/sketchy/index.html
index 623727a66..41ad624ea 100644
--- a/docs/sketchy/index.html
+++ b/docs/sketchy/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/slate/index.html b/docs/slate/index.html
index fbffc1593..bee46e5f0 100644
--- a/docs/slate/index.html
+++ b/docs/slate/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/solar/index.html b/docs/solar/index.html
index ae5b0d059..a4695fbe8 100644
--- a/docs/solar/index.html
+++ b/docs/solar/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/spacelab/index.html b/docs/spacelab/index.html
index 7f7e658b0..9acb4b180 100644
--- a/docs/spacelab/index.html
+++ b/docs/spacelab/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/superhero/index.html b/docs/superhero/index.html
index e4d14ca2c..807343765 100644
--- a/docs/superhero/index.html
+++ b/docs/superhero/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/united/index.html b/docs/united/index.html
index a4edad34b..f9ce68355 100644
--- a/docs/united/index.html
+++ b/docs/united/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>
diff --git a/docs/yeti/index.html b/docs/yeti/index.html
index 439285fd7..a1333965a 100644
--- a/docs/yeti/index.html
+++ b/docs/yeti/index.html
@@ -1391,7 +1391,10 @@ <h3 class="card-header">Card header</h3>
                   <h5 class="card-title">Special title treatment</h5>
                   <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                 </div>
-                <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27318%27%20height%3D%27180%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%20318%20180%27%3E%3Cpath%20fill%3D%27%23777%27%20d%3D%27M0%200h318v180H0z%27%2F%3E%3Ctext%20x%3D%27129.359%27%20y%3D%2797.35%27%20fill%3D%27rgba(255%2C255%2C255%2C.75)%27%20font-family%3D%27Helvetica%2Cmonospace%27%20font-size%3D%2716pt%27%20font-weight%3D%27400%27%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Card image">
+                <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200" aria-label="Placeholder: Image cap" focusable="false" role="img" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                  <rect width="100%" height="100%" fill="#868e96"></rect>
+                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
+                </svg>
                 <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>
                 </div>