From b28a984eef2669c5809444222babe39c7fe72ca9 Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Sat, 27 Jul 2024 14:53:36 -0600
Subject: [PATCH] All Example Pages: Add copy instructions and CodePen button
 to HTML source section (pull #3041)

Resolve issue #3027 with the following changes:
1. Direct readers to copy HTML source from codepen instead of from the example page.
2. Add an additional codepen button adjacent to the directions.

Note that if users copy the source directly from the example page, the code may not work as designed because of spacing differences between the HTML source file and the formatting of the source code for display within the web page. Thus, this change instructs users to open the source in codepen where the original spacing is preserved. It makes doing so easy by providing a codepen button adjacent to the instructions.

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
---
 content-templates/Example-Template.html        |  3 ++-
 .../patterns/accordion/examples/accordion.html |  5 +++--
 content/patterns/alert/examples/alert.html     |  5 +++--
 .../alertdialog/examples/alertdialog.html      |  5 +++--
 .../breadcrumb/examples/breadcrumb.html        |  5 +++--
 content/patterns/button/examples/button.html   |  5 +++--
 .../patterns/button/examples/button_idl.html   |  5 +++--
 .../examples/carousel-1-prev-next.html         |  5 +++--
 .../carousel/examples/carousel-2-tablist.html  |  5 +++--
 .../checkbox/examples/checkbox-mixed.html      |  5 +++--
 .../patterns/checkbox/examples/checkbox.html   |  5 +++--
 .../examples/combobox-autocomplete-both.html   |  5 +++--
 .../examples/combobox-autocomplete-list.html   |  5 +++--
 .../examples/combobox-autocomplete-none.html   |  5 +++--
 .../combobox/examples/combobox-datepicker.html |  5 +++--
 .../examples/combobox-select-only.html         |  5 +++--
 .../patterns/combobox/examples/grid-combo.html |  5 +++--
 .../examples/datepicker-dialog.html            |  5 +++--
 .../patterns/dialog-modal/examples/dialog.html |  5 +++--
 .../disclosure/examples/disclosure-faq.html    |  5 +++--
 .../examples/disclosure-image-description.html |  5 +++--
 .../examples/disclosure-navigation-hybrid.html |  5 +++--
 .../examples/disclosure-navigation.html        |  5 +++--
 content/patterns/grid/examples/data-grids.html | 11 +++++++----
 .../patterns/grid/examples/layout-grids.html   | 11 +++++++----
 content/patterns/link/examples/link.html       | 11 +++++++----
 .../listbox/examples/listbox-collapsible.html  |  5 +++--
 .../listbox/examples/listbox-grouped.html      |  5 +++--
 .../examples/listbox-rearrangeable.html        |  8 +++++---
 .../listbox/examples/listbox-scrollable.html   |  5 +++--
 .../menu-button-actions-active-descendant.html |  5 +++--
 .../examples/menu-button-actions.html          |  5 +++--
 .../examples/menu-button-links.html            |  5 +++--
 .../menubar/examples/menubar-editor.html       |  5 +++--
 .../menubar/examples/menubar-navigation.html   |  5 +++--
 content/patterns/meter/examples/meter.html     |  5 +++--
 .../radio/examples/radio-activedescendant.html |  5 +++--
 .../patterns/radio/examples/radio-rating.html  |  5 +++--
 content/patterns/radio/examples/radio.html     |  5 +++--
 .../examples/slider-multithumb.html            |  5 +++--
 .../slider/examples/slider-color-viewer.html   |  5 +++--
 .../slider/examples/slider-rating.html         |  5 +++--
 .../patterns/slider/examples/slider-seek.html  |  5 +++--
 .../slider/examples/slider-temperature.html    |  5 +++--
 .../examples/datepicker-spinbuttons.html       |  5 +++--
 .../switch/examples/switch-button.html         |  5 +++--
 .../switch/examples/switch-checkbox.html       |  5 +++--
 content/patterns/switch/examples/switch.html   |  5 +++--
 .../table/examples/sortable-table.html         |  5 +++--
 content/patterns/table/examples/table.html     |  5 +++--
 .../patterns/tabs/examples/tabs-automatic.html |  5 +++--
 .../patterns/tabs/examples/tabs-manual.html    |  5 +++--
 content/patterns/toolbar/examples/toolbar.html |  5 +++--
 .../patterns/treegrid/examples/treegrid-1.html |  5 +++--
 .../treeview/examples/treeview-1a.html         |  5 +++--
 .../treeview/examples/treeview-1b.html         |  5 +++--
 .../treeview/examples/treeview-navigation.html |  5 +++--
 content/shared/css/core.css                    |  1 +
 content/shared/js/examples.js                  | 18 ++++++++++++++++--
 59 files changed, 201 insertions(+), 122 deletions(-)

diff --git a/content-templates/Example-Template.html b/content-templates/Example-Template.html
index 4a6231b8e7..e22469348f 100644
--- a/content-templates/Example-Template.html
+++ b/content-templates/Example-Template.html
@@ -212,11 +212,12 @@ <h2>Javascript and CSS Source Code</h2>
 
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html
index 565ae39baa..7eca23f625 100644
--- a/content/patterns/accordion/examples/accordion.html
+++ b/content/patterns/accordion/examples/accordion.html
@@ -255,13 +255,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
index fe7df259db..745bae013f 100644
--- a/content/patterns/alert/examples/alert.html
+++ b/content/patterns/alert/examples/alert.html
@@ -146,13 +146,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html
index ad566e3385..239e66c412 100644
--- a/content/patterns/alertdialog/examples/alertdialog.html
+++ b/content/patterns/alertdialog/examples/alertdialog.html
@@ -233,13 +233,14 @@ <h2 id="src_label">Javascript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex_alertdialog', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex_alertdialog', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/breadcrumb/examples/breadcrumb.html b/content/patterns/breadcrumb/examples/breadcrumb.html
index 1851510d9d..3f2ac6117f 100644
--- a/content/patterns/breadcrumb/examples/breadcrumb.html
+++ b/content/patterns/breadcrumb/examples/breadcrumb.html
@@ -127,13 +127,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
index 53d9b53985..d738354601 100644
--- a/content/patterns/button/examples/button.html
+++ b/content/patterns/button/examples/button.html
@@ -208,13 +208,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
index 3fdb4da72f..e80b9f1022 100644
--- a/content/patterns/button/examples/button_idl.html
+++ b/content/patterns/button/examples/button_idl.html
@@ -199,13 +199,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index 150fb1c9e5..eed797074f 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -524,13 +524,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index c94d95c335..fe22585c8b 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -710,13 +710,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/checkbox/examples/checkbox-mixed.html b/content/patterns/checkbox/examples/checkbox-mixed.html
index 42e1deed10..c4aafa8c7e 100644
--- a/content/patterns/checkbox/examples/checkbox-mixed.html
+++ b/content/patterns/checkbox/examples/checkbox-mixed.html
@@ -208,13 +208,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
index 1bdc4aba71..73b3d706f2 100644
--- a/content/patterns/checkbox/examples/checkbox.html
+++ b/content/patterns/checkbox/examples/checkbox.html
@@ -195,14 +195,15 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2>HTML Source Code</h2>
         <h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html
index 01130f3a93..26a87a6dab 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-both.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html
@@ -531,13 +531,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html
index 63a7a80772..fc47b07e34 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-list.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html
@@ -525,13 +525,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html
index e57fc1d249..9503c57bef 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-none.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html
@@ -467,13 +467,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
index cb8ecaeef7..3fc085a474 100644
--- a/content/patterns/combobox/examples/combobox-datepicker.html
+++ b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -710,13 +710,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
index abbfda5e3d..4f11120a67 100644
--- a/content/patterns/combobox/examples/combobox-select-only.html
+++ b/content/patterns/combobox/examples/combobox-select-only.html
@@ -407,13 +407,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html
index 888136b506..9907c5587a 100644
--- a/content/patterns/combobox/examples/grid-combo.html
+++ b/content/patterns/combobox/examples/grid-combo.html
@@ -386,13 +386,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html
index debcd78cc1..59ac1de487 100644
--- a/content/patterns/dialog-modal/examples/datepicker-dialog.html
+++ b/content/patterns/dialog-modal/examples/datepicker-dialog.html
@@ -644,13 +644,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
index 10eb352117..de5244f42a 100644
--- a/content/patterns/dialog-modal/examples/dialog.html
+++ b/content/patterns/dialog-modal/examples/dialog.html
@@ -356,13 +356,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index d5fd41d88f..cce108ad31 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -224,13 +224,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index 86c312f1e2..2caa36d603 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -366,13 +366,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 29d8d4331a..9aebeeedd2 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -366,13 +366,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 822540e47f..4e3c7caafb 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -361,13 +361,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/grid/examples/data-grids.html b/content/patterns/grid/examples/data-grids.html
index cc4710a342..36d0c4c98b 100644
--- a/content/patterns/grid/examples/data-grids.html
+++ b/content/patterns/grid/examples/data-grids.html
@@ -769,30 +769,33 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2>HTML Source Code</h2>
         <h3 id="sc1_label">Example 1: Minimal Data Grid</h3>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
         </script>
 
         <h3 id="sc2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
+        <p id="sc2_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc2"></code></pre>
         <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
+          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files', 'sc2_description');
         </script>
 
         <h3 id="sc3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
+        <p id="sc3_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc3"></code></pre>
         <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
+          sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files', 'sc3_description');
         </script>
         <!--  After all source has been added, run make to do the insert.  -->
         <script>
diff --git a/content/patterns/grid/examples/layout-grids.html b/content/patterns/grid/examples/layout-grids.html
index 5644821366..2642136f85 100644
--- a/content/patterns/grid/examples/layout-grids.html
+++ b/content/patterns/grid/examples/layout-grids.html
@@ -671,30 +671,33 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2>HTML Source Code</h2>
         <h3 id="sc1_label">Example 1: Simple List of Links</h3>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
         </script>
 
         <h3 id="sc2_label">Example 2: Pill List For Components Like a List of Message Recipients</h3>
+        <p id="sc2_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc2"></code></pre>
         <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
+          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files', 'sc2_description');
         </script>
 
         <h3 id="sc3_label">Example 3: Scrollable Search Results</h3>
+        <p id="sc3_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc3"></code></pre>
         <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
+          sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files', 'sc3_description');
         </script>
         <!--  After all source has been added, run make to do the insert.  -->
         <script>
diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html
index 694567b40f..5def265243 100644
--- a/content/patterns/link/examples/link.html
+++ b/content/patterns/link/examples/link.html
@@ -173,24 +173,27 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2>HTML Source Code</h2>
         <h3 id="sc1_label">Link 1</h3>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <h3 id="sc2_label">Link 2</h3>
+        <p id="sc2_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
         <pre><code id="sc2"></code></pre>
         <div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>
         <h3 id="sc3_label">Link 3</h3>
+        <p id="sc3_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc3_start_sep" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of"></div>
         <pre><code id="sc3"></code></pre>
         <div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
-          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
-          sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
+          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files', 'sc2_description');
+          sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files', 'sc3_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
index 2689624519..5fa5958390 100644
--- a/content/patterns/listbox/examples/listbox-collapsible.html
+++ b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -318,13 +318,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html
index 37f8237441..75ab78eebf 100644
--- a/content/patterns/listbox/examples/listbox-grouped.html
+++ b/content/patterns/listbox/examples/listbox-grouped.html
@@ -292,13 +292,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html
index a9500377ce..bce043d135 100644
--- a/content/patterns/listbox/examples/listbox-rearrangeable.html
+++ b/content/patterns/listbox/examples/listbox-rearrangeable.html
@@ -525,21 +525,23 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2>HTML Source Code</h2>
         <h3 id="sc1_label">Example 1: Single-Select Listbox</h3>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
         </script>
         <h3 id="sc2_label">Example 2: Multi-Select Listbox</h3>
+        <p id="sc2_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
         <pre><code id="sc2"></code></pre>
         <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
         <script>
-          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
+          sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files', 'sc2_description');
         </script>
         <!--  After all source has been added, run make to do the insert.  -->
         <script>
diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 56683c29c0..2ab524eb67 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -328,13 +328,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
index 5c7bde9003..18a5cd4295 100644
--- a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
+++ b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
@@ -338,13 +338,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html
index 7ebfec5219..94487885dc 100644
--- a/content/patterns/menu-button/examples/menu-button-actions.html
+++ b/content/patterns/menu-button/examples/menu-button-actions.html
@@ -317,13 +317,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html
index 2622c2927b..a6722a606b 100644
--- a/content/patterns/menu-button/examples/menu-button-links.html
+++ b/content/patterns/menu-button/examples/menu-button-links.html
@@ -353,13 +353,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'cssJsFiles');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'cssJsFiles', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/menubar/examples/menubar-editor.html b/content/patterns/menubar/examples/menubar-editor.html
index ba03677cc3..150d7028d3 100644
--- a/content/patterns/menubar/examples/menubar-editor.html
+++ b/content/patterns/menubar/examples/menubar-editor.html
@@ -780,13 +780,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/menubar/examples/menubar-navigation.html b/content/patterns/menubar/examples/menubar-navigation.html
index 596d5e4863..1c8ee23b58 100644
--- a/content/patterns/menubar/examples/menubar-navigation.html
+++ b/content/patterns/menubar/examples/menubar-navigation.html
@@ -814,13 +814,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc_label" aria-label="Start of "></div>
         <pre><code id="sc1"></code></pre>
         <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc_label" aria-label="End of "></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/meter/examples/meter.html b/content/patterns/meter/examples/meter.html
index 655b66bb9a..e8ba6be6ac 100644
--- a/content/patterns/meter/examples/meter.html
+++ b/content/patterns/meter/examples/meter.html
@@ -130,13 +130,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html
index 3affb356fa..bc88302e90 100644
--- a/content/patterns/radio/examples/radio-activedescendant.html
+++ b/content/patterns/radio/examples/radio-activedescendant.html
@@ -265,13 +265,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/radio/examples/radio-rating.html b/content/patterns/radio/examples/radio-rating.html
index 74e3f61442..220772e60f 100644
--- a/content/patterns/radio/examples/radio-rating.html
+++ b/content/patterns/radio/examples/radio-rating.html
@@ -283,13 +283,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/radio/examples/radio.html b/content/patterns/radio/examples/radio.html
index 901db42f44..05dd093bd8 100644
--- a/content/patterns/radio/examples/radio.html
+++ b/content/patterns/radio/examples/radio.html
@@ -254,13 +254,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/slider-multithumb/examples/slider-multithumb.html b/content/patterns/slider-multithumb/examples/slider-multithumb.html
index c5d8560a6a..a043a12d43 100644
--- a/content/patterns/slider-multithumb/examples/slider-multithumb.html
+++ b/content/patterns/slider-multithumb/examples/slider-multithumb.html
@@ -260,13 +260,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html
index 9f52c937cf..4d3a4ade93 100644
--- a/content/patterns/slider/examples/slider-color-viewer.html
+++ b/content/patterns/slider/examples/slider-color-viewer.html
@@ -311,13 +311,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html
index 1c7fb40a54..4c4307317c 100644
--- a/content/patterns/slider/examples/slider-rating.html
+++ b/content/patterns/slider/examples/slider-rating.html
@@ -313,13 +313,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/slider/examples/slider-seek.html b/content/patterns/slider/examples/slider-seek.html
index a55aad4044..68002f63d0 100644
--- a/content/patterns/slider/examples/slider-seek.html
+++ b/content/patterns/slider/examples/slider-seek.html
@@ -306,13 +306,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/slider/examples/slider-temperature.html b/content/patterns/slider/examples/slider-temperature.html
index 6035f74266..96c84cf511 100644
--- a/content/patterns/slider/examples/slider-temperature.html
+++ b/content/patterns/slider/examples/slider-temperature.html
@@ -287,13 +287,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
index 730d1bc3a7..3701c76f15 100644
--- a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
+++ b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
@@ -323,13 +323,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html
index 9f1f778d90..92755aec0c 100644
--- a/content/patterns/switch/examples/switch-button.html
+++ b/content/patterns/switch/examples/switch-button.html
@@ -226,13 +226,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/switch/examples/switch-checkbox.html b/content/patterns/switch/examples/switch-checkbox.html
index 04b86b959f..ffdacff4a5 100644
--- a/content/patterns/switch/examples/switch-checkbox.html
+++ b/content/patterns/switch/examples/switch-checkbox.html
@@ -184,13 +184,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/switch/examples/switch.html b/content/patterns/switch/examples/switch.html
index 85ab26a99e..2f0c68d6b9 100644
--- a/content/patterns/switch/examples/switch.html
+++ b/content/patterns/switch/examples/switch.html
@@ -190,13 +190,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/table/examples/sortable-table.html b/content/patterns/table/examples/sortable-table.html
index 80e18dd808..6f8e206512 100644
--- a/content/patterns/table/examples/sortable-table.html
+++ b/content/patterns/table/examples/sortable-table.html
@@ -207,13 +207,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/table/examples/table.html b/content/patterns/table/examples/table.html
index dc3a5e5db0..06ffa81f1e 100644
--- a/content/patterns/table/examples/table.html
+++ b/content/patterns/table/examples/table.html
@@ -171,13 +171,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/tabs/examples/tabs-automatic.html b/content/patterns/tabs/examples/tabs-automatic.html
index 361cf69a2f..7412cd9634 100644
--- a/content/patterns/tabs/examples/tabs-automatic.html
+++ b/content/patterns/tabs/examples/tabs-automatic.html
@@ -347,13 +347,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/tabs/examples/tabs-manual.html b/content/patterns/tabs/examples/tabs-manual.html
index 9da53c50d1..7b80f39f84 100644
--- a/content/patterns/tabs/examples/tabs-manual.html
+++ b/content/patterns/tabs/examples/tabs-manual.html
@@ -341,13 +341,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/toolbar/examples/toolbar.html b/content/patterns/toolbar/examples/toolbar.html
index d6cb864d78..3fb3464048 100644
--- a/content/patterns/toolbar/examples/toolbar.html
+++ b/content/patterns/toolbar/examples/toolbar.html
@@ -951,13 +951,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for "></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for "></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html
index f5335a9f8c..11e3bb813d 100644
--- a/content/patterns/treegrid/examples/treegrid-1.html
+++ b/content/patterns/treegrid/examples/treegrid-1.html
@@ -455,13 +455,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/treeview/examples/treeview-1a.html b/content/patterns/treeview/examples/treeview-1a.html
index c3f4aa3bc3..f64bdb94d5 100644
--- a/content/patterns/treeview/examples/treeview-1a.html
+++ b/content/patterns/treeview/examples/treeview-1a.html
@@ -417,13 +417,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'start', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'start', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/treeview/examples/treeview-1b.html b/content/patterns/treeview/examples/treeview-1b.html
index e937e4335a..5922710238 100644
--- a/content/patterns/treeview/examples/treeview-1b.html
+++ b/content/patterns/treeview/examples/treeview-1b.html
@@ -443,13 +443,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'start', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'start', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/patterns/treeview/examples/treeview-navigation.html b/content/patterns/treeview/examples/treeview-navigation.html
index 2efbeccdc9..605b1d7240 100644
--- a/content/patterns/treeview/examples/treeview-navigation.html
+++ b/content/patterns/treeview/examples/treeview-navigation.html
@@ -688,13 +688,14 @@ <h2>JavaScript and CSS Source Code</h2>
         </ul>
       </section>
 
-      <section>
+      <section class="example-code">
         <h2 id="sc1_label">HTML Source Code</h2>
+        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
           sourceCode.make();
         </script>
       </section>
diff --git a/content/shared/css/core.css b/content/shared/css/core.css
index ab1619cdb8..f6b1f1068e 100644
--- a/content/shared/css/core.css
+++ b/content/shared/css/core.css
@@ -69,6 +69,7 @@ th .example-header {
   margin-left: 1em;
 }
 
+.example-code button,
 .example-header button {
   display: inline-block;
   position: relative;
diff --git a/content/shared/js/examples.js b/content/shared/js/examples.js
index 27beafe0ee..ac03b91d95 100644
--- a/content/shared/js/examples.js
+++ b/content/shared/js/examples.js
@@ -54,6 +54,7 @@ aria.widget.SourceCode = function () {
   this.code = new Array();
   this.exampleHeader = new Array();
   this.resources = new Array();
+  this.HTMLDescription = new Array();
 };
 
 /**
@@ -63,6 +64,7 @@ aria.widget.SourceCode = function () {
  * @param {string} codeId          - ID of element containing only and all of the html used to render the example widget
  * @param {string} exampleHeaderId - ID of header element under which the "Open in Codepen" button belongs
  * @param {string} cssJsFilesId    - ID of element containing links to all the relevant js and css files used for the example widget
+ * @param {string} HTMLDescriptionId - ID of the separator element under the HTML Source Code which the "Open in Codepen" button belongs
  * @function add
  * @memberof aria.widget.SourceCode
  */
@@ -70,11 +72,13 @@ aria.widget.SourceCode.prototype.add = function (
   locationId,
   codeId,
   exampleHeaderId,
-  cssJsFilesId
+  cssJsFilesId,
+  HTMLDescriptionId
 ) {
   this.location[this.location.length] = locationId;
   this.code[this.code.length] = codeId;
   this.exampleHeader[this.exampleHeader.length] = exampleHeaderId;
+  this.HTMLDescription[this.HTMLDescription.length] = HTMLDescriptionId;
   this.resources[this.resources.length] = cssJsFilesId;
 };
 
@@ -88,10 +92,20 @@ aria.widget.SourceCode.prototype.make = function () {
   for (var i = 0; i < this.location.length; i++) {
     var sourceCodeNode = document.getElementById(this.location[i]);
     var nodeCode = document.getElementById(this.code[i]);
+    var exampleAmount = document.querySelectorAll('[id^="ex"]');
 
     sourceCodeNode.className = 'sourcecode';
     this.createCode(sourceCodeNode, nodeCode, 0, true);
 
+    if (this.HTMLDescription[i]) {
+      addOpenInCodePenForm(
+        i + exampleAmount,
+        this.HTMLDescription[i],
+        this.code[i],
+        this.resources[i]
+      );
+    }
+
     // Remove unnecessary `<br>` element.
     if (sourceCodeNode.innerHTML.startsWith('<br>')) {
       sourceCodeNode.innerHTML = sourceCodeNode.innerHTML.replace('<br>', '');
@@ -369,7 +383,7 @@ function addOpenInCodePenForm(
   exampleFilesId
 ) {
   var jsonInputId = 'codepen-data-ex-' + exampleIndex;
-  var buttonId = exampleCodeId + '-codepenbutton';
+  var buttonId = exampleHeaderId + '-codepenbutton';
 
   var form = document.createElement('form');
   form.setAttribute('action', 'https://codepen.io/pen/define');