From 4e23c10d9cd0ad81a13c1cef6d4b2627083c6e38 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 21 May 2024 17:00:59 -0700
Subject: [PATCH] chore: use local placeholder image in html files (#9392)

**Related Issue:** None

## Summary

- Use local placeholder image for images
- Remove duplicate links for
`https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css`
- Update Maps SDK url to use the `next` version so it is always up to
date.
- Update links to external URLs to use `http://www.esri.com`
- Update input value's that are links to be `http://www.esri.com`
---
 .../src/demos/_assets/images/placeholder.svg  |   5 +
 .../src/demos/accordion.html                  | 216 +++++++++---------
 .../calcite-components/src/demos/avatar.html  |  12 +-
 .../calcite-components/src/demos/card.html    | 184 +++++++++++++--
 .../calcite-components/src/demos/chip.html    |  66 +++---
 .../calcite-components/src/demos/flow.html    |   6 +-
 .../src/demos/input-time-picker.html          |   1 -
 .../calcite-components/src/demos/link.html    |   2 +-
 .../calcite-components/src/demos/list.html    |   6 +-
 .../calcite-components/src/demos/menu.html    |   5 +-
 .../calcite-components/src/demos/modal.html   |   6 +-
 .../src/demos/mode/auto.html                  |  32 ++-
 .../src/demos/navigation.html                 |   9 +-
 .../calcite-components/src/demos/popover.html |   2 +-
 .../src/demos/shell-panel.html                |   4 +-
 .../src/demos/shell/basic.html                |  10 +-
 .../src/demos/shell/block-configurations.html |  28 ++-
 .../demo-app-advanced-2-shell-header.html     |   4 +-
 .../src/demos/shell/demo-app-advanced-2.html  |  28 ++-
 .../src/demos/shell/demo-app-advanced-3.html  |  28 ++-
 .../demo-app-advanced-center-row-async.html   |   4 +-
 .../shell/demo-app-advanced-center-row.html   |  28 ++-
 .../src/demos/shell/demo-app-advanced.html    |  30 ++-
 .../src/demos/shell/demo-app-blank.html       |   4 +-
 .../shell/demo-app-center-row-action-bar.html |  28 ++-
 .../shell/demo-app-full-window-reversed.html  |  28 ++-
 .../src/demos/shell/demo-app-full-window.html |  28 ++-
 .../src/demos/shell/demo-app-rtl.html         |  16 +-
 .../src/demos/shell/demo-app.html             |  40 +++-
 .../src/demos/shell/nesting-testing-flow.html |   4 +-
 .../src/demos/shell/nesting-testing.html      |   4 +-
 .../demos/shell/panel-with-action-bar.html    |   2 +-
 .../src/demos/shell/popup-config-example.html |  30 ++-
 .../src/demos/shell/resizable-panels.html     |   4 +-
 .../src/demos/sortable-list.html              |  24 +-
 .../calcite-components/src/demos/stack.html   |   4 +-
 .../src/demos/tip-manager.html                |  40 +++-
 .../src/demos/tip/basic.html                  |  56 ++++-
 38 files changed, 723 insertions(+), 305 deletions(-)
 create mode 100644 packages/calcite-components/src/demos/_assets/images/placeholder.svg

diff --git a/packages/calcite-components/src/demos/_assets/images/placeholder.svg b/packages/calcite-components/src/demos/_assets/images/placeholder.svg
new file mode 100644
index 00000000000..a1b876e1742
--- /dev/null
+++ b/packages/calcite-components/src/demos/_assets/images/placeholder.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="100%" height="100%" viewBox="0 0 120 120" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="120" fill="#EFF1F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z" fill="#687787"/>
+</svg>
diff --git a/packages/calcite-components/src/demos/accordion.html b/packages/calcite-components/src/demos/accordion.html
index a4d9d60cb4c..72013ee02bb 100644
--- a/packages/calcite-components/src/demos/accordion.html
+++ b/packages/calcite-components/src/demos/accordion.html
@@ -58,16 +58,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion scale="s">
             <calcite-accordion-item scale="s" heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -94,16 +94,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion scale="m">
             <calcite-accordion-item scale="m" heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -130,16 +130,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion scale="l">
             <calcite-accordion-item scale="m" heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -171,19 +171,19 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion scale="s">
             <calcite-accordion-item icon="banana" heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item icon="car" heading="Accordion Item 2" description="A great subtitle"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               icon="map"
               heading="Accordion Item 3 with a potentially two line title"
               description="A great subtitle"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item icon="plane" heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
           </calcite-accordion>
         </div>
@@ -191,19 +191,19 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion scale="m">
             <calcite-accordion-item icon="banana" heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item icon="car" heading="Accordion Item 2" description="A great subtitle"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               icon="map"
               heading="Accordion Item 3 with a potentially two line title"
               description="A great subtitle"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item icon="plane" heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
           </calcite-accordion>
         </div>
@@ -211,19 +211,19 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion scale="l">
             <calcite-accordion-item icon="banana" heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item icon="car" heading="Accordion Item 2" description="A great subtitle"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               icon="map"
               heading="Accordion Item 3 with a potentially two line title"
               description="A great subtitle"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item icon="plane" heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
           </calcite-accordion>
         </div>
@@ -236,16 +236,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-type="caret" scale="s">
             <calcite-accordion-item heading="Accordion Item" description="A bit of subtext about this item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -274,16 +274,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-type="caret" scale="m">
             <calcite-accordion-item heading="Accordion Item" description="A bit of subtext about this item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -312,16 +312,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-type="caret" scale="l">
             <calcite-accordion-item heading="Accordion Item" description="A bit of subtext about this item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -355,16 +355,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-position="start" scale="s">
             <calcite-accordion-item heading="Accordion Item" description="A bit of subtext about this item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -393,16 +393,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-position="start" scale="m">
             <calcite-accordion-item heading="Accordion Item" description="A bit of subtext about this item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -431,16 +431,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-position="start" scale="l">
             <calcite-accordion-item heading="Accordion Item" description="A bit of subtext about this item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -474,16 +474,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-position="end" icon-type="plus-minus" scale="s">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -512,16 +512,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-position="end" icon-type="plus-minus" scale="m">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -550,16 +550,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion icon-position="end" icon-type="plus-minus" scale="l">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-tree lines>
@@ -593,16 +593,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion appearance="transparent" scale="s">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -616,16 +616,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion appearance="transparent" scale="m">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -639,16 +639,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion appearance="transparent" scale="l">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -667,16 +667,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single" scale="s">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -690,16 +690,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single" scale="m">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -713,16 +713,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single" scale="l">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -743,16 +743,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single-persist" scale="s">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -766,16 +766,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single-persist" scale="m">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -789,16 +789,16 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single-persist" scale="l">
             <calcite-accordion-item heading="Accordion Item"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 3 with a potentially two line title"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 5">
               <calcite-segmented-control scale="s">
@@ -817,19 +817,19 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single-persist" scale="s">
             <calcite-accordion-item heading="Accordion Item" icon-start="car" icon-end="car"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2" icon-start="plane" icon-end="plane"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               heading="Accordion Item 3 with a potentially two line title"
               icon-start="banana"
               icon-end="banana"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4" icon-start="driving-distance" icon-end="driving-distance"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               heading="Accordion Item 5"
@@ -847,19 +847,19 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single-persist" scale="m">
             <calcite-accordion-item heading="Accordion Item" icon-start="car" icon-end="car"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2" icon-start="plane" icon-end="plane"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               heading="Accordion Item 3 with a potentially two line title"
               icon-start="banana"
               icon-end="banana"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4" icon-start="driving-distance" icon-end="driving-distance"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               heading="Accordion Item 5"
@@ -877,19 +877,19 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
         <div class="child">
           <calcite-accordion selection-mode="single-persist" scale="l">
             <calcite-accordion-item heading="Accordion Item" icon-start="car" icon-end="car"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 2" icon-start="plane" icon-end="plane"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               heading="Accordion Item 3 with a potentially two line title"
               icon-start="banana"
               icon-end="banana"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item heading="Accordion Item 4" icon-start="driving-distance" icon-end="driving-distance"
-              ><img src="https://placem.at/places?w=200&txt=0" />
+              ><img width="200" src="./_assets/images/placeholder.svg" />
             </calcite-accordion-item>
             <calcite-accordion-item
               heading="Accordion Item 5"
diff --git a/packages/calcite-components/src/demos/avatar.html b/packages/calcite-components/src/demos/avatar.html
index eeb304e0583..831c08fa912 100644
--- a/packages/calcite-components/src/demos/avatar.html
+++ b/packages/calcite-components/src/demos/avatar.html
@@ -52,15 +52,15 @@ <h1 style="margin: 0 auto; text-align: center">Avatar</h1>
         <div class="child right-aligned-text">Image With Label</div>
 
         <div class="child">
-          <calcite-avatar thumbnail="http://placekitten.com/105/105" scale="s" label="kitten"> </calcite-avatar>
+          <calcite-avatar thumbnail="./_assets/images/placeholder.svg" scale="s" label="kitten"> </calcite-avatar>
         </div>
 
         <div class="child">
-          <calcite-avatar thumbnail="http://placekitten.com/40/40" scale="m" label="kitten"></calcite-avatar>
+          <calcite-avatar thumbnail="./_assets/images/placeholder.svg" scale="m" label="kitten"></calcite-avatar>
         </div>
 
         <div class="child">
-          <calcite-avatar thumbnail="http://placekitten.com/120/120" scale="l" label="kitten"></calcite-avatar>
+          <calcite-avatar thumbnail="./_assets/images/placeholder.svg" scale="l" label="kitten"></calcite-avatar>
         </div>
       </div>
 
@@ -261,21 +261,21 @@ <h1 style="margin: 0 auto; text-align: center">Avatar</h1>
         <div class="child">
           <calcite-avatar scale="s" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
           <calcite-avatar scale="s" user-id="9de33a713bd84690bbc618e98ecf7567"></calcite-avatar>
-          <calcite-avatar scale="s" thumbnail="http://placekitten.com/40/40"></calcite-avatar>
+          <calcite-avatar scale="s" thumbnail="./_assets/images/placeholder.svg"></calcite-avatar>
           <calcite-avatar scale="s" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
         </div>
 
         <div class="child">
           <calcite-avatar scale="m" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
           <calcite-avatar scale="m" user-id="9de33a713bd84690bbc618e98ecf7567"></calcite-avatar>
-          <calcite-avatar scale="m" thumbnail="http://placekitten.com/40/40"></calcite-avatar>
+          <calcite-avatar scale="m" thumbnail="./_assets/images/placeholder.svg"></calcite-avatar>
           <calcite-avatar scale="m" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
         </div>
 
         <div class="child">
           <calcite-avatar scale="l" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
           <calcite-avatar scale="l" user-id="9de33a713bd84690bbc618e98ecf7567"></calcite-avatar>
-          <calcite-avatar scale="l" thumbnail="http://placekitten.com/40/40"></calcite-avatar>
+          <calcite-avatar scale="l" thumbnail="./_assets/images/placeholder.svg"></calcite-avatar>
           <calcite-avatar scale="l" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
         </div>
       </div>
diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
index 50c17bc872a..e7ec6046922 100644
--- a/packages/calcite-components/src/demos/card.html
+++ b/packages/calcite-components/src/demos/card.html
@@ -241,7 +241,13 @@ <h3 slot="heading">ArcGIS Online: Gallery and Organization pages</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -279,7 +285,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -313,7 +325,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <span slot="description"
                 >by
                 <calcite-link href="">example_user</calcite-link>
@@ -346,7 +364,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <div>
                 Created: Apr 22, 2019
@@ -381,7 +405,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
 
               <div>
@@ -449,7 +479,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <span slot="description"
                 >by
                 <calcite-link href="">example_user</calcite-link>
@@ -482,7 +518,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <calcite-button
                 type="button"
@@ -510,7 +552,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               <span slot="description">Johnathan Smith</span>
               <span slot="footer-start">Nov 25, 2018</span>
@@ -534,7 +582,13 @@ <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               <span slot="description">Johnathan Smith</span>
               <span slot="footer-start">Nov 25, 2018</span>
@@ -558,7 +612,13 @@ <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               <span slot="description">Johnathan Smith</span>
               <span slot="footer-start">Nov 25, 2018</span>
@@ -588,7 +648,13 @@ <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
               <span slot="description"
                 >A great example of a study description that might wrap to a line or two, but isn't overly
@@ -598,7 +664,13 @@ <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
               <span slot="description"
@@ -615,7 +687,13 @@ <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -626,7 +704,13 @@ <h3 slot="heading">Loading example</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -637,7 +721,13 @@ <h3 slot="heading">Loading example</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -648,7 +738,13 @@ <h3 slot="heading">Loading example</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -665,13 +761,25 @@ <h3 slot="heading">Loading example</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Untitled experience</h3>
               <span slot="description">Subtext</span>
               <calcite-button slot="footer-start" width="full">Go</calcite-button>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Untitled experience</h3>
               <span slot="description">Subtext</span>
               <calcite-button slot="footer-start" width="full">Go</calcite-button>
@@ -682,7 +790,13 @@ <h3 slot="heading">Untitled experience</h3>
         <div class="child">thumbnail-position="block-start"</div>
         <div class="child">
           <calcite-card thumbnail-position="block-start">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+            <img
+              slot="thumbnail"
+              alt="Sample image alt"
+              width="200"
+              height="150"
+              src="./_assets/images/placeholder.svg"
+            />
             <h3 slot="heading">Portland Businesses</h3>
             <span slot="description"
               >by
@@ -724,7 +838,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">thumbnail-position="block-end"</div>
         <div class="child">
           <calcite-card thumbnail-position="block-end">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+            <img
+              slot="thumbnail"
+              alt="Sample image alt"
+              width="200"
+              height="150"
+              src="./_assets/images/placeholder.svg"
+            />
             <h3 slot="heading">Portland Businesses</h3>
             <span slot="description"
               >by
@@ -767,7 +887,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card thumbnail-position="inline-start">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -805,7 +931,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card thumbnail-position="inline-start">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -848,7 +980,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">thumbnail-position="inline-end"</div>
         <div class="child">
           <calcite-card thumbnail-position="inline-end">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+            <img
+              slot="thumbnail"
+              alt="Sample image alt"
+              width="200"
+              height="150"
+              src="./_assets/images/placeholder.svg"
+            />
             <h3 slot="heading">Portland Businesses</h3>
             <span slot="description"
               >by
diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html
index 9b9d752f205..e8d9cdd7589 100644
--- a/packages/calcite-components/src/demos/chip.html
+++ b/packages/calcite-components/src/demos/chip.html
@@ -198,15 +198,15 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip value="chip" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
             <calcite-chip value="chip" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
             <calcite-chip value="chip" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
           </div>
@@ -215,15 +215,15 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip value="chip" appearance="outline" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
             <calcite-chip value="chip" scale="m" appearance="outline" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
             <calcite-chip value="chip" scale="l" appearance="outline" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
           </div>
@@ -232,15 +232,15 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip value="chip" appearance="outline-fill" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
             <calcite-chip value="chip" scale="m" appearance="outline-fill" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
             <calcite-chip value="chip" scale="l" appearance="outline-fill" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
               Siamese Cat
             </calcite-chip>
           </div>
@@ -785,13 +785,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip value="chip" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip value="chip" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip value="chip" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
           </div>
         </div>
@@ -799,13 +799,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip value="chip" appearance="outline" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip value="chip" appearance="outline" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip value="chip" appearance="outline" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
           </div>
         </div>
@@ -813,13 +813,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip value=" chip" appearance="outline-fill" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip value=" chip" appearance="outline-fill" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip value=" chip" appearance="outline-fill" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
           </div>
         </div>
@@ -832,13 +832,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip closable value="chip" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip closable value="chip" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip closable value="chip" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
           </div>
         </div>
@@ -846,13 +846,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip closable value="chip" appearance="outline" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip closable value="chip" appearance="outline" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip closable value="chip" appearance="outline" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
           </div>
         </div>
@@ -860,13 +860,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div class="chip-group">
             <calcite-chip closable value="chip" appearance="outline-fill" scale="s">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip closable value="chip" appearance="outline-fill" scale="m" kind="inverse">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
             <calcite-chip closable value="chip" appearance="outline-fill" scale="l" kind="brand">
-              <img slot="image" src="https://placekitten.com/80/80" />
+              <img slot="image" width="80" height="80" src="./_assets/images/placeholder.svg" />
             </calcite-chip>
           </div>
         </div>
@@ -947,7 +947,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
         <div class="child">
           <div style="width: 280px; margin: 0 auto">
             <calcite-card selectable>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placeimg.com/280/200/nature" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="280"
+                height="200"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="title">My great Workforce project that might wrap two lines</h3>
               <span slot="subtitle">Johnathan Smith</span>
               <calcite-chip-group class="themed-children-card" scale="s" slot="footer-start" style="flex-flow: row">
@@ -979,7 +985,9 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
               <img
                 slot="thumbnail"
                 alt="Sample image alt"
-                src="https://placeimg.com/400/200/nature"
+                width="400"
+                height="200"
+                src="./_assets/images/placeholder.svg"
                 style="width: 340px; height: 200px"
               />
               <h3 slot="title">My great Workforce project that might wrap two lines</h3>
diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index be7e3ada11e..8a9e6e0c17d 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -41,19 +41,19 @@
           <calcite-flow custom-item-selectors="custom-flow-item">
             <calcite-flow-item heading="flow-item-1">
               <div slot="content-top">Slot for a content-top.</div>
-              <img src="https://via.placeholder.com/250x250.png?text=calcite-flow-item" />
+              <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
             <custom-flow-item heading="custom-flow-item">
               <div slot="content-top">Slot for a content-top.</div>
-              <img src="https://via.placeholder.com/250x250.png?text=custom-flow-item" />
+              <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
             <calcite-flow-item heading="flow-item-2">
               <div slot="content-top">Slot for a content-top.</div>
-              <img src="https://via.placeholder.com/250x250.png?text=calcite-panel" />
+              <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
diff --git a/packages/calcite-components/src/demos/input-time-picker.html b/packages/calcite-components/src/demos/input-time-picker.html
index cc27d441495..b098a9221c7 100644
--- a/packages/calcite-components/src/demos/input-time-picker.html
+++ b/packages/calcite-components/src/demos/input-time-picker.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Input Time Picker</title>
-    <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../build/calcite.css" />
     <script type="module" src="../build/calcite.esm.js"></script>
     <script src="./_assets/head.js"></script>
diff --git a/packages/calcite-components/src/demos/link.html b/packages/calcite-components/src/demos/link.html
index c267de9b272..180af7ea058 100644
--- a/packages/calcite-components/src/demos/link.html
+++ b/packages/calcite-components/src/demos/link.html
@@ -179,7 +179,7 @@
 
         <div class="trigger-external-wrap-paragraph">
           <calcite-link
-            href="http://google.com"
+            href="http://www.esri.com"
             rel="noopener noreferrer"
             target="_blank"
             class="font-size-1"
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index 4119e8a3f3f..92e783add62 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -405,7 +405,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-avatar
                 scale="m"
                 slot="content-start"
-                thumbnail="http://mariadefatima.github.io/DASHH/img/profile_avatar.png"
+                thumbnail="./_assets/images/placeholder.svg"
               ></calcite-avatar>
               <calcite-icon
                 scale="s"
@@ -433,7 +433,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-avatar
                 scale="m"
                 slot="content-start"
-                thumbnail="https://i1.sndcdn.com/avatars-000304648977-7nhi7j-t500x500.jpg"
+                thumbnail="./_assets/images/placeholder.svg"
               ></calcite-avatar>
               <calcite-icon
                 scale="s"
@@ -461,7 +461,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-avatar
                 scale="m"
                 slot="content-start"
-                thumbnail="http://mariadefatima.github.io/DASHH/img/friends/jake.jpg"
+                thumbnail="./_assets/images/placeholder.svg"
               ></calcite-avatar>
               <calcite-icon
                 scale="s"
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index 2ea4822e234..221adb99efc 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -5,13 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Calcite Menu / Calcite Menu Item</title>
-    <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../build/calcite.css" />
     <script type="module" src="../build/calcite.esm.js"></script>
     <script src="_assets/head.js"></script>
 
-    <script src="https://js.arcgis.com/4.19/"></script>
-    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
 
     <link rel="stylesheet" href="/demos/_assets/navigation-demos.css" />
   </head>
diff --git a/packages/calcite-components/src/demos/modal.html b/packages/calcite-components/src/demos/modal.html
index 0c69fc79ba3..b4be3337052 100644
--- a/packages/calcite-components/src/demos/modal.html
+++ b/packages/calcite-components/src/demos/modal.html
@@ -911,7 +911,7 @@ <h3 slot="header">Ui Background css overriding --calcite-modal-content-backgroun
               <h4>Card Example</h4>
               <div class="flex">
                 <calcite-card selected selectable>
-                  <img slot="thumbnail" src="https://placem.at/places?w=260&h=160&txt=0" />
+                  <img slot="thumbnail" width="260" height="160" src="./_assets/images/placeholder.svg" />
 
                   <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                   <span slot="subtitle"
@@ -922,7 +922,7 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                   <calcite-link slot="footer-end">Trail füt</calcite-link>
                 </calcite-card>
                 <calcite-card selected selectable>
-                  <img slot="thumbnail" src="https://placem.at/places?w=260&h=160&txt=0" />
+                  <img slot="thumbnail" width="206" height="160" src="./_assets/images/placeholder.svg" />
 
                   <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                   <span slot="subtitle"
@@ -933,7 +933,7 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                   <calcite-link slot="footer-end">Trail füt</calcite-link>
                 </calcite-card>
                 <calcite-card selected selectable>
-                  <img slot="thumbnail" src="https://placem.at/places?w=260&h=160&txt=0" />
+                  <img slot="thumbnail" width="206" height="160" src="./_assets/images/placeholder.svg" />
 
                   <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                   <span slot="subtitle"
diff --git a/packages/calcite-components/src/demos/mode/auto.html b/packages/calcite-components/src/demos/mode/auto.html
index c11cbdfdcaf..a22dc24a540 100644
--- a/packages/calcite-components/src/demos/mode/auto.html
+++ b/packages/calcite-components/src/demos/mode/auto.html
@@ -14,9 +14,9 @@
         },
       };
     </script>
-    <script src="https://js.arcgis.com/4.23/"></script>
-    <link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/dark/main.css" />
-    <link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
+    <link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/dark/main.css" />
+    <link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
     <style>
       html,
       body,
@@ -185,7 +185,7 @@
                       <section class="form-section">
                         <label>
                           URL
-                          <input type="text" value="https://ca-times.brightspotcdn.com/dims4/default/" />
+                          <input type="text" value="http://www.esri.com/" />
                         </label>
                       </section>
                       <calcite-block-section text="Options">
@@ -250,7 +250,13 @@ <h2>Boomer v Millennial - California</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image of nature."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -264,7 +270,13 @@ <h2>Boomer v Millennial - California</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image of nature."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -273,7 +285,13 @@ <h2>Boomer v Millennial - California</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image of nature."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/navigation.html b/packages/calcite-components/src/demos/navigation.html
index 51952df706e..c7ce300c77b 100644
--- a/packages/calcite-components/src/demos/navigation.html
+++ b/packages/calcite-components/src/demos/navigation.html
@@ -5,13 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Calcite Nav / Calcite Nav Logo / Calcite Nav User</title>
-    <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../build/calcite.css" />
     <script type="module" src="../build/calcite.esm.js"></script>
     <script src="_assets/head.js"></script>
 
-    <script src="https://js.arcgis.com/4.19/"></script>
-    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
 
     <link rel="stylesheet" href="/demos/_assets/navigation-demos.css" />
   </head>
@@ -506,14 +505,14 @@ <h3>
             slot="user"
             full-name="Wendell Berry"
             username="wBerry_arcgis"
-            thumbnail="https://placebear.com/50/50"
+            thumbnail="./_assets/images/placeholder.svg"
           >
           </calcite-navigation-user>
         </calcite-navigation>
       </calcite-shell>
       <calcite-shell>
         <calcite-navigation slot="header">
-          <calcite-navigation-user slot="user" full-name="Wendell Berry" thumbnail="https://placebear.com/50/50">
+          <calcite-navigation-user slot="user" full-name="Wendell Berry" thumbnail="./_assets/images/placeholder.svg">
           </calcite-navigation-user>
         </calcite-navigation>
       </calcite-shell>
diff --git a/packages/calcite-components/src/demos/popover.html b/packages/calcite-components/src/demos/popover.html
index 2ed07e99148..679436151d0 100644
--- a/packages/calcite-components/src/demos/popover.html
+++ b/packages/calcite-components/src/demos/popover.html
@@ -165,7 +165,7 @@ <h1 style="margin: 0 auto; text-align: center">Popover</h1>
         closable
         style="width: 25vw"
       >
-        <img src="https://www.fillmurray.com/640/360" style="width: 100%" />
+        <img width="100%" height="360" src="./_assets/images/placeholder.svg" />
         <div style="padding: 0.5rem 1rem 0.75rem">
           <p style="margin-top: 0">
             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index 1d0a1619fd8..fe241d016af 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -14,8 +14,8 @@
         },
       };
     </script>
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/shell/basic.html b/packages/calcite-components/src/demos/shell/basic.html
index 0b0ba00263d..3723d4f3e5e 100644
--- a/packages/calcite-components/src/demos/shell/basic.html
+++ b/packages/calcite-components/src/demos/shell/basic.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.12/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       @media (min-width: 1025px) {
         .example-container {
@@ -34,7 +34,7 @@ <h2 class="heading">Shell Header: My App</h2>
                 </header>
               </div>
               <p>Shell Content</p>
-              <img src="https://via.placeholder.com/700x400" alt="placeholder" />
+              <img width="700" height="400" src="./_assets/images/placeholder.svg" alt="placeholder" />
             </calcite-shell>
           </div>
           <h2>Shell with Footer</h2>
@@ -46,7 +46,7 @@ <h2 class="heading">Shell Header: My App</h2>
                 </header>
               </div>
               <p>Shell Content</p>
-              <img src="https://via.placeholder.com/700x400" alt="placeholder" />
+              <img width="700" height="400" src="./_assets/images/placeholder.svg" alt="placeholder" />
 
               <footer slot="footer">Footer</footer>
             </calcite-shell>
@@ -63,7 +63,7 @@ <h2 class="heading">Shell Header: My App</h2>
                 </header>
               </div>
               <p>Shell Content</p>
-              <img src="https://via.placeholder.com/700x400" alt="placeholder" />
+              <img width="700" height="400" src="./_assets/images/placeholder.svg" alt="placeholder" />
             </calcite-shell>
           </div>
         </div>
diff --git a/packages/calcite-components/src/demos/shell/block-configurations.html b/packages/calcite-components/src/demos/shell/block-configurations.html
index ebfd56d0e9d..69087469936 100644
--- a/packages/calcite-components/src/demos/shell/block-configurations.html
+++ b/packages/calcite-components/src/demos/shell/block-configurations.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -826,7 +826,13 @@ <h2>Cool app</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -840,7 +846,13 @@ <h2>Cool app</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -849,7 +861,13 @@ <h2>Cool app</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="600"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
index b0e1e2c8ea2..c08acc0f920 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
index c5e93debbbe..77c4639e69d 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -237,7 +237,13 @@ <h2 class="heading">My App</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -251,7 +257,13 @@ <h2 class="heading">My App</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -260,7 +272,13 @@ <h2 class="heading">My App</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
index 7397ebc1647..b657ec6be61 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -516,7 +516,13 @@ <h2 class="heading">My App</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -530,7 +536,13 @@ <h2 class="heading">My App</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -539,7 +551,13 @@ <h2 class="heading">My App</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html
index d537e956489..2cacf3739f2 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
index 855d8fa55e9..0988f7486d0 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -391,7 +391,13 @@ <h2>Boomer v Millennial - California</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -405,7 +411,13 @@ <h2>Boomer v Millennial - California</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -414,7 +426,13 @@ <h2>Boomer v Millennial - California</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced.html b/packages/calcite-components/src/demos/shell/demo-app-advanced.html
index 02cf98ee5f4..0c4ac70b4f6 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced.html
@@ -14,8 +14,8 @@
         },
       };
     </script>
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -175,7 +175,7 @@
                       <section class="form-section">
                         <label>
                           URL
-                          <input type="text" value="https://ca-times.brightspotcdn.com/dims4/default/" />
+                          <input type="text" value="http://www.esri.com" />
                         </label>
                       </section>
                       <calcite-block-section text="Options">
@@ -240,7 +240,13 @@ <h2>Boomer v Millennial - California</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -254,7 +260,13 @@ <h2>Boomer v Millennial - California</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -263,7 +275,13 @@ <h2>Boomer v Millennial - California</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-blank.html b/packages/calcite-components/src/demos/shell/demo-app-blank.html
index 6d0b364aa94..6d9d9e0d2ca 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-blank.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-blank.html
@@ -7,8 +7,8 @@
     <title>Boomer v Millennial - California</title>
 
     <script src="../_assets/head.js"></script>
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
index b142ca3ea27..c66e72d5d67 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -412,7 +412,13 @@ <h2>Boomer v Millennial - California</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -426,7 +432,13 @@ <h2>Boomer v Millennial - California</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -435,7 +447,13 @@ <h2>Boomer v Millennial - California</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
index 2a1a58a318d..a118f1963d5 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.12/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -360,7 +360,13 @@ <h2 class="heading">My App</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager">
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -374,7 +380,13 @@ <h2 class="heading">My App</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -383,7 +395,13 @@ <h2 class="heading">My App</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window.html b/packages/calcite-components/src/demos/shell/demo-app-full-window.html
index 1beca5cea1c..f8cf0a3f279 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-full-window.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-full-window.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.12/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
@@ -337,7 +337,13 @@ <h2 class="heading">My App</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -351,7 +357,13 @@ <h2 class="heading">My App</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -360,7 +372,13 @@ <h2 class="heading">My App</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-rtl.html b/packages/calcite-components/src/demos/shell/demo-app-rtl.html
index 34a3178bc2d..0bbec20c3fb 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-rtl.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-rtl.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.12/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       @media (min-width: 1025px) {
         .example-container {
@@ -144,7 +144,7 @@ <h2>Mode Theme</h2>
                     <calcite-action slot="header-menu-actions" text="Do a cool thing" text-enabled></calcite-action>
                     <calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
                       <calcite-block-content>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Cool things">
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
@@ -168,7 +168,7 @@ <h2>Mode Theme</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
@@ -183,7 +183,7 @@ <h2>Mode Theme</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/nature" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
@@ -283,7 +283,7 @@ <h2>Dark Mode</h2>
                     <calcite-action slot="header-menu-actions" text="Do a cool thing" text-enabled></calcite-action>
                     <calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
                       <calcite-block-content>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Cool things">
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
@@ -307,7 +307,7 @@ <h2>Dark Mode</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
@@ -322,7 +322,7 @@ <h2>Dark Mode</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/nature" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app.html b/packages/calcite-components/src/demos/shell/demo-app.html
index ed860a53ac0..ec44124e038 100644
--- a/packages/calcite-components/src/demos/shell/demo-app.html
+++ b/packages/calcite-components/src/demos/shell/demo-app.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.12/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       @media (min-width: 1025px) {
         .example-container {
@@ -144,7 +144,7 @@ <h2>Light Mode</h2>
                     <calcite-action slot="header-menu-actions" text="Do a cool thing" text-enabled></calcite-action>
                     <calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
                       <calcite-block-content>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" ssrc="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Cool things">
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
@@ -168,7 +168,7 @@ <h2>Light Mode</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
@@ -183,7 +183,7 @@ <h2>Light Mode</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/nature" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
@@ -204,7 +204,13 @@ <h2 class="heading">My App</h2>
               <calcite-tip-manager slot="center-row">
                 <calcite-tip-group group-title="Astronomy">
                   <calcite-tip heading="The Red Rocks and Blue Water">
-                    <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                    <img
+                      slot="thumbnail"
+                      width="1000"
+                      height="600"
+                      src="./_assets/images/placeholder.svg"
+                      alt="This is an image."
+                    />
                     <p>
                       This tip is how a tip should really look. It has a landscape or square image and a small amount of
                       text content. This paragraph is in an "info" slot.
@@ -219,7 +225,13 @@ <h2 class="heading">My App</h2>
                     <a href="http://www.esri.com">This is the "link" slot.</a>
                   </calcite-tip>
                   <calcite-tip heading="The Long Trees">
-                    <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                    <img
+                      slot="thumbnail"
+                      width="1000"
+                      height="600"
+                      src="./_assets/images/placeholder.svg"
+                      alt="This is an image."
+                    />
                     <p>
                       This tip has an image that is a pretty tall. And the text will run out before the end of the
                       image.
@@ -229,7 +241,13 @@ <h2 class="heading">My App</h2>
                   </calcite-tip>
                 </calcite-tip-group>
                 <calcite-tip heading="Square Nature">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="1000"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                   <p>In astronomy, the terms object and body are often used interchangeably.</p>
                   <p>
@@ -332,7 +350,7 @@ <h2>Dark Mode</h2>
                     <calcite-action slot="header-menu-actions" text="Do a cool thing" text-enabled></calcite-action>
                     <calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
                       <calcite-block-content>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Cool things">
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
@@ -356,7 +374,7 @@ <h2>Dark Mode</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/any" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
@@ -371,7 +389,7 @@ <h2>Dark Mode</h2>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                           <calcite-action text-enabled text="cool thing"></calcite-action>
                         </calcite-block-section>
-                        <img alt="demo" src="https://placeimg.com/640/480/nature" width="100%" />
+                        <img alt="demo" src="./_assets/images/placeholder.svg" width="100%" />
                         <calcite-block-section text="Neat things">
                           <calcite-action text-enabled text="neat thing"></calcite-action>
                           <calcite-action text-enabled text="neat thing"></calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
index 36f0a915dd6..c4b45800fe4 100644
--- a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
+++ b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/shell/nesting-testing.html b/packages/calcite-components/src/demos/shell/nesting-testing.html
index c2c1f1a8600..f98bc4f7b45 100644
--- a/packages/calcite-components/src/demos/shell/nesting-testing.html
+++ b/packages/calcite-components/src/demos/shell/nesting-testing.html
@@ -8,8 +8,8 @@
 
     <script src="../_assets/head.js"></script>
 
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/shell/panel-with-action-bar.html b/packages/calcite-components/src/demos/shell/panel-with-action-bar.html
index 05ac4c9a42a..a7e640f20b1 100644
--- a/packages/calcite-components/src/demos/shell/panel-with-action-bar.html
+++ b/packages/calcite-components/src/demos/shell/panel-with-action-bar.html
@@ -17,7 +17,7 @@ <h1>calcite-shell-panel</h1>
 
           <h2>Basic Shell Panel</h2>
           <calcite-shell-panel slot="panel-start" position="start">
-            <img src="https://via.placeholder.com/300x200" alt="placeholder" />
+            <img width="300" height="200" src="./_assets/images/placeholder.svg" alt="placeholder" />
             <calcite-action-bar slot="action-bar">
               <calcite-action-group>
                 <calcite-action text="Add" icon="plus"> </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/popup-config-example.html b/packages/calcite-components/src/demos/shell/popup-config-example.html
index 7fc0b739400..538fa441eec 100644
--- a/packages/calcite-components/src/demos/shell/popup-config-example.html
+++ b/packages/calcite-components/src/demos/shell/popup-config-example.html
@@ -8,9 +8,9 @@
 
     <script src="../_assets/head.js"></script>
 
-    <script src="https://js.arcgis.com/4.23/"></script>
-    <link disabled id="jsapi-theme-dark" rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/dark/main.css" />
-    <link id="jsapi-theme-light" rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
+    <link disabled id="jsapi-theme-dark" rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/dark/main.css" />
+    <link id="jsapi-theme-light" rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
 
     <style>
       html,
@@ -336,7 +336,13 @@ <h2>Cool app</h2>
             <calcite-tip-manager slot="center-row" id="tip-manager" hidden>
               <calcite-tip-group group-title="Astronomy">
                 <calcite-tip heading="The Red Rocks and Blue Water">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip is how a tip should really look. It has a landscape or square image and a small amount of
                     text content. This paragraph is in an "info" slot.
@@ -350,7 +356,13 @@ <h2>Cool app</h2>
                   <a href="http://www.esri.com">This is the "link" slot.</a>
                 </calcite-tip>
                 <calcite-tip heading="The Long Trees">
-                  <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                  <img
+                    slot="thumbnail"
+                    width="1000"
+                    height="600"
+                    src="./_assets/images/placeholder.svg"
+                    alt="This is an image."
+                  />
                   <p>
                     This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                   </p>
@@ -359,7 +371,13 @@ <h2>Cool app</h2>
                 </calcite-tip>
               </calcite-tip-group>
               <calcite-tip heading="Square Nature">
-                <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="1000"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image."
+                />
                 <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
                 <p>In astronomy, the terms object and body are often used interchangeably.</p>
                 <p>
diff --git a/packages/calcite-components/src/demos/shell/resizable-panels.html b/packages/calcite-components/src/demos/shell/resizable-panels.html
index 453ba292e56..cac587c337a 100644
--- a/packages/calcite-components/src/demos/shell/resizable-panels.html
+++ b/packages/calcite-components/src/demos/shell/resizable-panels.html
@@ -14,8 +14,8 @@
         },
       };
     </script>
-    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
-    <script src="https://js.arcgis.com/4.15/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/light/main.css" />
+    <script src="https://js.arcgis.com/next/"></script>
     <style>
       html,
       body,
diff --git a/packages/calcite-components/src/demos/sortable-list.html b/packages/calcite-components/src/demos/sortable-list.html
index 76560aa5236..3e8386047e0 100644
--- a/packages/calcite-components/src/demos/sortable-list.html
+++ b/packages/calcite-components/src/demos/sortable-list.html
@@ -76,20 +76,20 @@ <h1 style="margin: 0 auto; text-align: center">Sortable list</h1>
           <calcite-sortable-list>
             <calcite-block heading="First Block" summary="animals and nature" collapsible drag-handle>
               <calcite-block-section text="Animals" open>
-                <img alt="demo" src="https://placeimg.com/640/480/animals" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
 
               <calcite-block-section text="Nature" open>
-                <img alt="demo" src="https://placeimg.com/640/480/nature" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
             </calcite-block>
             <calcite-block heading="Second Block" summary="Architecture and People" collapsible drag-handle>
               <calcite-block-section text="Architecture" open>
-                <img alt="demo" src="https://placeimg.com/640/480/architecture" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
 
               <calcite-block-section text="People" open>
-                <img alt="demo" src="https://placeimg.com/640/480/people" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
             </calcite-block>
           </calcite-sortable-list>
@@ -104,39 +104,39 @@ <h1 style="margin: 0 auto; text-align: center">Sortable list</h1>
           <calcite-sortable-list style="flex-direction: column">
             <calcite-block heading="First Block" summary="animals and nature" collapsible drag-handle>
               <calcite-block-section text="Animals" open>
-                <img alt="demo" src="https://placeimg.com/640/480/animals" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
 
               <calcite-block-section text="Nature" open>
-                <img alt="demo" src="https://placeimg.com/640/480/nature" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
             </calcite-block>
             <calcite-block heading="Second Block" summary="Architecture and People" collapsible drag-handle>
               <calcite-block-section text="Architecture" open>
-                <img alt="demo" src="https://placeimg.com/640/480/architecture" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
 
               <calcite-block-section text="People" open>
-                <img alt="demo" src="https://placeimg.com/640/480/people" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
             </calcite-block>
 
             <calcite-block heading="Third Block" summary="animals and nature" collapsible drag-handle>
               <calcite-block-section text="Animals" open>
-                <img alt="demo" src="https://placeimg.com/640/480/animals" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
 
               <calcite-block-section text="Nature" open>
-                <img alt="demo" src="https://placeimg.com/640/480/nature" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
             </calcite-block>
             <calcite-block heading="Fourth Block" summary="Architecture and People" collapsible drag-handle>
               <calcite-block-section text="Architecture" open>
-                <img alt="demo" src="https://placeimg.com/640/480/architecture" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
 
               <calcite-block-section text="People" open>
-                <img alt="demo" src="https://placeimg.com/640/480/people" />
+                <img alt="demo" width="640" height="480" src="./_assets/images/placeholder.svg" />
               </calcite-block-section>
             </calcite-block>
           </calcite-sortable-list>
diff --git a/packages/calcite-components/src/demos/stack.html b/packages/calcite-components/src/demos/stack.html
index 83b254a2e2c..ecea891e035 100644
--- a/packages/calcite-components/src/demos/stack.html
+++ b/packages/calcite-components/src/demos/stack.html
@@ -46,7 +46,7 @@
           <calcite-stack>
             <calcite-action appearance="transparent" text="banana" icon="banana" slot="actions-start"></calcite-action>
             Hello World
-            <calcite-avatar slot="content-end" thumbnail="http://placekitten.com/105/105" scale="s"> </calcite-avatar>
+            <calcite-avatar slot="content-end" thumbnail="./_assets/images/placeholder.svg" scale="s"> </calcite-avatar>
             <calcite-chip slot="content-start" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
             <calcite-action appearance="transparent" text="Close" icon="x" slot="actions-end"></calcite-action>
           </calcite-stack>
@@ -62,7 +62,7 @@
             <calcite-stack slot="footer">
               <calcite-action text="select" icon="check" slot="actions-start"></calcite-action>
               <calcite-input disabled></calcite-input>
-              <calcite-avatar slot="content-start" thumbnail="http://placekitten.com/105/105" scale="s">
+              <calcite-avatar slot="content-start" thumbnail="./_assets/images/placeholder.svg" scale="s">
               </calcite-avatar>
               <calcite-chip slot="content-end" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
               <calcite-action text="delete" icon="trash" slot="actions-end"></calcite-action>
diff --git a/packages/calcite-components/src/demos/tip-manager.html b/packages/calcite-components/src/demos/tip-manager.html
index 07d13602ab1..dd06942a4d2 100644
--- a/packages/calcite-components/src/demos/tip-manager.html
+++ b/packages/calcite-components/src/demos/tip-manager.html
@@ -47,7 +47,13 @@
 
         <div class="child">
           <calcite-tip heading="Celestial Bodies!">
-            <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+            <img
+              slot="thumbnail"
+              width="1000"
+              height="600"
+              src="./_assets/images/placeholder.svg"
+              alt="This is an image of nature."
+            />
             <p>
               This tip is how a tip should really look. It has a landscape or square image and a small amount of text
               content. This paragraph is in an "info" slot.
@@ -80,7 +86,13 @@
 
         <div class="child">
           <calcite-tip>
-            <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+            <img
+              slot="thumbnail"
+              width="1000"
+              height="600"
+              src="./_assets/images/placeholder.svg"
+              alt="This is an image of nature."
+            />
             <p>This tip is how a tip should appear without a close button as well as without a heading.</p>
             <p>This is another paragraph in a subsequent "info" slot.</p>
             <a href="http://www.esri.com">This is a link.</a>
@@ -110,7 +122,13 @@
           <calcite-tip-manager>
             <calcite-tip-group group-title="Astronomy">
               <calcite-tip heading="The Red Rocks and Blue Water">
-                <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="600"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image of nature."
+                />
                 <p>
                   This tip is how a tip should really look. It has a landscape or square image and a small amount of
                   text content. This paragraph is in an "info" slot.
@@ -124,7 +142,13 @@
                 <a href="http://www.esri.com">This is the "link" slot.</a>
               </calcite-tip>
               <calcite-tip heading="The Long Trees">
-                <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+                <img
+                  slot="thumbnail"
+                  width="1000"
+                  height="600"
+                  src="./_assets/images/placeholder.svg"
+                  alt="This is an image of nature."
+                />
                 <p>
                   This tip has an image that is a pretty tall. And the text will run out before the end of the image.
                 </p>
@@ -133,7 +157,13 @@
               </calcite-tip>
             </calcite-tip-group>
             <calcite-tip heading="Square Nature">
-              <img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
               <p>In astronomy, the terms object and body are often used interchangeably.</p>
               <p>
diff --git a/packages/calcite-components/src/demos/tip/basic.html b/packages/calcite-components/src/demos/tip/basic.html
index 49851320b7f..8b574caf8ba 100644
--- a/packages/calcite-components/src/demos/tip/basic.html
+++ b/packages/calcite-components/src/demos/tip/basic.html
@@ -17,7 +17,13 @@ <h1>Tip</h1>
           <h2>With thumbnail</h2>
           <div>
             <calcite-tip heading="Celestial Bodies!">
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>
                 This tip is how a tip should really look. It has a landscape or square image and a small amount of text
                 content. This paragraph is in an "info" slot.
@@ -42,7 +48,13 @@ <h2>With no thumbnail</h2>
           <h2>Without heading</h2>
           <div>
             <calcite-tip>
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
               <p>This is another paragraph in a subsequent "info" slot.</p>
               <a href="http://www.esri.com">This is a link.</a>
@@ -52,7 +64,13 @@ <h2>Without heading</h2>
           <h2>Without heading, close-disabled</h2>
           <div>
             <calcite-tip close-disabled>
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
               <p>This is another paragraph in a subsequent "info" slot.</p>
               <a href="http://www.esri.com">This is a link.</a>
@@ -82,7 +100,13 @@ <h2>Tip Group</h2>
           <h2>Tip Group with thumbnails</h2>
           <calcite-tip-group>
             <calcite-tip heading="Celestial Bodies">
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>
                 An astronomical object or celestial object is a naturally occurring physical entity, association, or
                 structure that exists in the observable universe.
@@ -91,7 +115,13 @@ <h2>Tip Group with thumbnails</h2>
               <a href="http://www.esri.com">View Esri</a>
             </calcite-tip>
             <calcite-tip heading="Celestial Bodies">
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>
                 An astronomical object or celestial object is a naturally occurring physical entity, association, or
                 structure that exists in the observable universe.
@@ -104,7 +134,13 @@ <h2>Tip Group with thumbnails</h2>
           <h2>Tip Group with thumbnails, close-disabled</h2>
           <calcite-tip-group>
             <calcite-tip heading="Celestial Bodies" close-disabled="true">
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>
                 An astronomical object or celestial object is a naturally occurring physical entity, association, or
                 structure that exists in the observable universe.
@@ -113,7 +149,13 @@ <h2>Tip Group with thumbnails, close-disabled</h2>
               <a href="http://www.esri.com">View Esri</a>
             </calcite-tip>
             <calcite-tip heading="Celestial Bodies" close-disabled="true">
-              <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+              <img
+                slot="thumbnail"
+                width="1000"
+                height="600"
+                src="./_assets/images/placeholder.svg"
+                alt="This is an image of nature."
+              />
               <p>
                 An astronomical object or celestial object is a naturally occurring physical entity, association, or
                 structure that exists in the observable universe.