From 4bb1946ad10d25a504c2fe3dbfa0875fed096af9 Mon Sep 17 00:00:00 2001
From: Alexander Flenniken <alflennik@users.noreply.github.com>
Date: Mon, 11 Dec 2023 13:02:30 -0500
Subject: [PATCH] Infrastructure: Use aria-practices repo as source for images,
 patterns.html, and practices.html (pull #2869)

Resolve issue 2702 by moving HTML content and images from the wai-aria-practices repo into the aria-practices repo. This includes HTML content for the patterns.html page, the practices.html page, and images across all patterns and examples. A complementary change is made to the build process in the wai-aria-practices repo via PR w3c/wai-aria-practices#280.
---
 .link-checker.js                              |   5 +-
 content/images/pattern-accordion.svg          |   1 +
 content/images/pattern-alert.svg              |   1 +
 content/images/pattern-alertdialog.svg        |   1 +
 content/images/pattern-breadcrumb.svg         |   1 +
 content/images/pattern-button.svg             |   1 +
 content/images/pattern-carousel.svg           |   1 +
 content/images/pattern-checkbox.svg           |   1 +
 content/images/pattern-combobox.svg           |   1 +
 content/images/pattern-dialog-modal.svg       |   1 +
 content/images/pattern-disclosure.svg         |   1 +
 content/images/pattern-feed.svg               |   1 +
 content/images/pattern-grid.svg               |   1 +
 content/images/pattern-landmarks.svg          |   1 +
 content/images/pattern-link.svg               |   1 +
 content/images/pattern-listbox.svg            |   1 +
 content/images/pattern-menu-button.svg        |   1 +
 content/images/pattern-menubar.svg            |   1 +
 content/images/pattern-meter.svg              |   1 +
 content/images/pattern-radio.svg              |   1 +
 content/images/pattern-slider-multithumb.svg  |   1 +
 content/images/pattern-slider.svg             |   1 +
 content/images/pattern-spinbutton.svg         |   1 +
 content/images/pattern-switch.svg             |   1 +
 content/images/pattern-table.svg              |   1 +
 content/images/pattern-tabs.svg               |   1 +
 content/images/pattern-toolbar.svg            |   1 +
 content/images/pattern-tooltip.svg            |   1 +
 content/images/pattern-treegrid.svg           |   1 +
 content/images/pattern-treeview.svg           |   1 +
 content/images/pattern-windowsplitter.svg     |   1 +
 content/images/read-this-first.svg            |   1 +
 .../patterns/accordion/accordion-pattern.html |   1 +
 .../accordion/examples/accordion.html         |   1 +
 content/patterns/alert/alert-pattern.html     |   1 +
 content/patterns/alert/examples/alert.html    |   1 +
 .../alertdialog/alertdialog-pattern.html      |   1 +
 .../alertdialog/examples/alertdialog.html     |   1 +
 .../breadcrumb/breadcrumb-pattern.html        |   1 +
 .../breadcrumb/examples/breadcrumb.html       |   1 +
 content/patterns/button/button-pattern.html   |   1 +
 content/patterns/button/examples/button.html  |   1 +
 .../patterns/button/examples/button_idl.html  |   1 +
 .../patterns/carousel/carousel-pattern.html   |   1 +
 .../examples/carousel-1-prev-next.html        |   1 +
 .../carousel/examples/carousel-2-tablist.html |   1 +
 .../patterns/checkbox/checkbox-pattern.html   |   1 +
 .../checkbox/examples/checkbox-mixed.html     |   1 +
 .../patterns/checkbox/examples/checkbox.html  |   1 +
 .../patterns/combobox/combobox-pattern.html   |   1 +
 .../examples/combobox-autocomplete-both.html  |   1 +
 .../examples/combobox-autocomplete-list.html  |   1 +
 .../examples/combobox-autocomplete-none.html  |   1 +
 .../examples/combobox-datepicker.html         |   1 +
 .../examples/combobox-select-only.html        |   1 +
 .../combobox/examples/grid-combo.html         |   1 +
 .../dialog-modal/dialog-modal-pattern.html    |   1 +
 .../examples/datepicker-dialog.html           |   1 +
 .../dialog-modal/examples/dialog.html         |   1 +
 .../disclosure/disclosure-pattern.html        |   1 +
 .../disclosure/examples/disclosure-faq.html   |   1 +
 .../disclosure-image-description.html         |   1 +
 .../disclosure-navigation-hybrid.html         |   2 +-
 .../examples/disclosure-navigation.html       |   1 +
 content/patterns/feed/examples/feed.html      |   1 +
 content/patterns/feed/feed-pattern.html       |   1 +
 .../grid/examples/advanced-data-grid.html     |   1 +
 .../patterns/grid/examples/data-grids.html    |   1 +
 .../patterns/grid/examples/layout-grids.html  |   1 +
 content/patterns/grid/grid-pattern.html       |   1 +
 .../patterns/landmarks/landmarks-pattern.html |   1 +
 content/patterns/link/examples/link.html      |   1 +
 content/patterns/link/link-pattern.html       |   1 +
 .../listbox/examples/listbox-collapsible.html |   1 +
 .../listbox/examples/listbox-grouped.html     |   1 +
 .../examples/listbox-rearrangeable.html       |   1 +
 .../listbox/examples/listbox-scrollable.html  |   1 +
 content/patterns/listbox/listbox-pattern.html |   1 +
 ...menu-button-actions-active-descendant.html |   1 +
 .../examples/menu-button-actions.html         |   1 +
 .../examples/menu-button-links.html           |   1 +
 .../menu-button/menu-button-pattern.html      |   1 +
 .../menubar/examples/menubar-editor.html      |   1 +
 .../menubar/examples/menubar-navigation.html  |   1 +
 .../menubar/menu-and-menubar-pattern.html     |   1 +
 content/patterns/meter/examples/meter.html    |   1 +
 content/patterns/meter/meter-pattern.html     |   1 +
 content/patterns/patterns.html                | 386 +++++++++++++++++-
 .../examples/radio-activedescendant.html      |   1 +
 .../patterns/radio/examples/radio-rating.html |   1 +
 content/patterns/radio/examples/radio.html    |   1 +
 .../patterns/radio/radio-group-pattern.html   |   1 +
 .../examples/slider-multithumb.html           |   1 +
 .../slider-multithumb-pattern.html            |   1 +
 .../slider/examples/slider-color-viewer.html  |   1 +
 .../slider/examples/slider-rating.html        |   1 +
 .../patterns/slider/examples/slider-seek.html |   1 +
 .../slider/examples/slider-temperature.html   |   1 +
 content/patterns/slider/slider-pattern.html   |   1 +
 .../examples/datepicker-spinbuttons.html      |   1 +
 .../spinbutton/spinbutton-pattern.html        |   1 +
 .../switch/examples/switch-button.html        |   1 +
 .../switch/examples/switch-checkbox.html      |   1 +
 content/patterns/switch/examples/switch.html  |   1 +
 content/patterns/switch/switch-pattern.html   |   1 +
 .../table/examples/sortable-table.html        |   1 +
 content/patterns/table/examples/table.html    |   1 +
 content/patterns/table/table-pattern.html     |   1 +
 .../tabs/examples/tabs-automatic.html         |   1 +
 .../patterns/tabs/examples/tabs-manual.html   |   1 +
 content/patterns/tabs/tabs-pattern.html       |   1 +
 .../patterns/toolbar/examples/toolbar.html    |   1 +
 content/patterns/toolbar/toolbar-pattern.html |   1 +
 content/patterns/tooltip/tooltip-pattern.html |   1 +
 .../treegrid/examples/treegrid-1.html         |   1 +
 .../patterns/treegrid/treegrid-pattern.html   |   1 +
 .../treeview/examples/treeview-1a.html        |   1 +
 .../treeview/examples/treeview-1b.html        |   1 +
 .../examples/treeview-navigation.html         |   1 +
 .../patterns/treeview/treeview-pattern.html   |   1 +
 .../windowsplitter-pattern.html               |   1 +
 content/practices/practices.html              | 107 ++++-
 .../templates/example-usage-warning.html      |   6 +-
 content/shared/templates/read-this-first.html |  20 +
 124 files changed, 621 insertions(+), 23 deletions(-)
 create mode 100644 content/images/pattern-accordion.svg
 create mode 100644 content/images/pattern-alert.svg
 create mode 100644 content/images/pattern-alertdialog.svg
 create mode 100644 content/images/pattern-breadcrumb.svg
 create mode 100644 content/images/pattern-button.svg
 create mode 100644 content/images/pattern-carousel.svg
 create mode 100644 content/images/pattern-checkbox.svg
 create mode 100644 content/images/pattern-combobox.svg
 create mode 100644 content/images/pattern-dialog-modal.svg
 create mode 100644 content/images/pattern-disclosure.svg
 create mode 100644 content/images/pattern-feed.svg
 create mode 100644 content/images/pattern-grid.svg
 create mode 100644 content/images/pattern-landmarks.svg
 create mode 100644 content/images/pattern-link.svg
 create mode 100644 content/images/pattern-listbox.svg
 create mode 100644 content/images/pattern-menu-button.svg
 create mode 100644 content/images/pattern-menubar.svg
 create mode 100644 content/images/pattern-meter.svg
 create mode 100644 content/images/pattern-radio.svg
 create mode 100644 content/images/pattern-slider-multithumb.svg
 create mode 100644 content/images/pattern-slider.svg
 create mode 100644 content/images/pattern-spinbutton.svg
 create mode 100644 content/images/pattern-switch.svg
 create mode 100644 content/images/pattern-table.svg
 create mode 100644 content/images/pattern-tabs.svg
 create mode 100644 content/images/pattern-toolbar.svg
 create mode 100644 content/images/pattern-tooltip.svg
 create mode 100644 content/images/pattern-treegrid.svg
 create mode 100644 content/images/pattern-treeview.svg
 create mode 100644 content/images/pattern-windowsplitter.svg
 create mode 100644 content/images/read-this-first.svg
 create mode 100644 content/shared/templates/read-this-first.html

diff --git a/.link-checker.js b/.link-checker.js
index 2377e0ef6a..4655e412ce 100644
--- a/.link-checker.js
+++ b/.link-checker.js
@@ -1,5 +1,8 @@
 module.exports = {
-  filesToIgnore: ['content/shared/templates/example-usage-warning.html'],
+  filesToIgnore: [
+    // For example:
+    // 'content/shared/templates/example-usage-warning.html',
+  ],
   excludedLinks: {
     'content/patterns/menubar/examples/menubar-navigation.html': [
       '#ex1 [role=menuitem]',
diff --git a/content/images/pattern-accordion.svg b/content/images/pattern-accordion.svg
new file mode 100644
index 0000000000..4ee0b682b6
--- /dev/null
+++ b/content/images/pattern-accordion.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="86" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><filter id="b" filterUnits="userSpaceOnUse" height="86" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur-2" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur-2" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="c"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#c)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#e1ecf7" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="71" rx="3" transform="translate(6 6)" width="72"/></g><path d="m3 0h66a3 3 0 0 1 3 3v9a0 0 0 0 1 0 0h-72a0 0 0 0 1 0 0v-9a3 3 0 0 1 3-3z" fill="#215a9c" transform="translate(6 6)"/><path d="m3 0h66a3 3 0 0 1 3 3v9a0 0 0 0 1 0 0h-72a0 0 0 0 1 0 0v-9a3 3 0 0 1 3-3z" fill="#215a9c" transform="matrix(-1 0 0 -1 78 77)"/><path d="m0 0h72v12h-72z" fill="#215a9c" transform="matrix(-1 0 0 -1 78 63)"/><path d="m0 0h72v2h-72z" fill="#79a1d0" transform="matrix(-1 0 0 -1 78 65)"/><path d="m0 0h32v2h-32z" fill="#185a6a" transform="translate(13.991 25.96)"/><path d="m0 0h16v2h-16z" fill="#185a6a" transform="translate(13.991 32.96)"/><path d="m0 0h24.009v2h-24.009z" fill="#185a6a" transform="translate(13.991 39.96)"/><g fill="#fff"><path d="m9 13.5 4.651 4.651 4.649-4.651z" transform="matrix(-1 0 0 -1 82.651 27.977)"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" transform="translate(55.349 41.174)"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" transform="translate(55.349 55.174)"/></g><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#b)"><rect fill="#fff" height="71" rx="3" transform="translate(6 6)" width="72"/></g><path d="m3 0h66a3 3 0 0 1 3 3v9a0 0 0 0 1 0 0h-72a0 0 0 0 1 0 0v-9a3 3 0 0 1 3-3z" fill="#e1ecf7" transform="translate(6 6)"/><path d="m3 0h66a3 3 0 0 1 3 3v9a0 0 0 0 1 0 0h-72a0 0 0 0 1 0 0v-9a3 3 0 0 1 3-3z" fill="#e1ecf7" transform="matrix(-1 0 0 -1 78 77)"/><path d="m0 0h72v12h-72z" fill="#e1ecf7" transform="matrix(-1 0 0 -1 78 63)"/><path d="m0 0h72v2h-72z" fill="#fff" transform="matrix(-1 0 0 -1 78 65)"/><path d="m0 0h32v2h-32z" fill="#6a6a6a" transform="translate(14 26)"/><path d="m0 0h16v2h-16z" fill="#6a6a6a" transform="translate(13.991 33.96)"/><path d="m0 0h24v2h-24z" fill="#6a6a6a" transform="translate(14 42)"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" fill="#215a9c" transform="matrix(-1 0 0 -1 82.651 27.977)"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" fill="#215a9c" transform="translate(55.349 41.174)"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" fill="#215a9c" transform="translate(55.349 55.174)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-alert.svg b/content/images/pattern-alert.svg
new file mode 100644
index 0000000000..68937594ad
--- /dev/null
+++ b/content/images/pattern-alert.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="33" width="85" x="-.5" y="1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="18" rx="3" transform="translate(7 9)" width="70"/></g><path d="m0 0h28v2h-28z" fill="#6a6a6a" transform="translate(14 17)"/><g fill="none" stroke="#6a6a6a" stroke-width="2"><path d="m381.845 48.254-6.045 6.046" transform="translate(-310.531 -33.278)"/><path d="m375.8 48.254 6.048 6.048" transform="translate(-310.531 -33.278)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-alertdialog.svg b/content/images/pattern-alertdialog.svg
new file mode 100644
index 0000000000..9e3ba6a1cc
--- /dev/null
+++ b/content/images/pattern-alertdialog.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="56" width="85" x="-.5" y="13.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="41" rx="3" transform="translate(7 21)" width="70"/></g><path d="m509.616 191.682 9-15 9 15z" fill="#e9d047" transform="translate(-495.616 -146.681)"/><path d="m0 0h2v4h-2z" fill="#185a6a" transform="translate(22 35)"/><path d="m0 0h2v2h-2z" fill="#185a6a" transform="translate(22 41)"/><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(38 50)"/><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(54 50)"/><g fill="#6a6a6a"><path d="m0 0h28v2h-28z" transform="translate(38 32)"/><path d="m0 0h20v2h-20z" transform="translate(38 39)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-breadcrumb.svg b/content/images/pattern-breadcrumb.svg
new file mode 100644
index 0000000000..0a92ff66bc
--- /dev/null
+++ b/content/images/pattern-breadcrumb.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="31" width="85" x="-.5" y="1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="16" rx="3" transform="translate(7 9)" width="70"/></g><g fill="#215a9c"><path d="m0 0h9v2h-9z" transform="translate(14 16)"/><path d="m0 0h9v2h-9z" transform="translate(41 16)"/><path d="m0 0h9v2h-9z" transform="translate(63 16)"/></g><path d="m-883.421 1109h-2.728l5.928-7.713-6.369-8.287h2.728l6.368 8.287-5.926 7.713z" fill="#d0e0f0" transform="translate(915 -1084)"/><path d="m-862.421 1109h-2.728l5.928-7.713-6.369-8.287h2.728l6.369 8.287-5.927 7.713z" fill="#d0e0f0" transform="translate(915 -1084)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-button.svg b/content/images/pattern-button.svg
new file mode 100644
index 0000000000..38df7318c0
--- /dev/null
+++ b/content/images/pattern-button.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="33" width="62" x="12.5" y="25.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="18" rx="3" transform="translate(20 33)" width="47"/></g><path d="m0 0h20v2h-20z" fill="#6a6a6a" transform="translate(34 41)"/><path d="m11.214 12.214h-3.937l2.072 5.046a.689.689 0 0 1 -.35.891l-1.824.8a.656.656 0 0 1 -.866-.36l-1.969-4.798-3.216 3.307a.657.657 0 0 1 -1.124-.476v-15.945a.657.657 0 0 1 1.124-.479l10.554 10.858a.68.68 0 0 1 -.464 1.156z" fill="#185a6a" transform="translate(59 46)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-carousel.svg b/content/images/pattern-carousel.svg
new file mode 100644
index 0000000000..ead4504eba
--- /dev/null
+++ b/content/images/pattern-carousel.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="52" width="73" x="5.701" y="3.414"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5" flood-opacity=".161"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><rect height="36.515" rx="3" width="57.113"/></clipPath><clipPath id="c"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#c)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><path d="m0 0 6.322 7.64 6.322-7.64z" fill="#185a69" transform="matrix(0 1 -1 0 25.64 59.827)"/><path d="m0 7.64 6.322-7.64 6.322 7.64z" fill="#185a69" transform="matrix(0 1 -1 0 66.899 59.827)"/><g filter="url(#a)"><rect fill="#fff" height="37" rx="3" transform="translate(13.2 10.91)" width="58"/></g><path d="m18.681 14.591a4.091 4.091 0 1 1 -4.09-4.091 4.091 4.091 0 0 1 4.09 4.091z" fill="#e9d047" transform="translate(14.236 6.425)"/><g clip-path="url(#b)" transform="translate(14.089 11.399)"><path d="m15.908 24.813h-15.908l17.872-17.263 8.059 7.784 16.215-15.334 12.382 12.382-.716 11.612-35.9.775-.045.043z" fill="#185a69" transform="translate(3.738 12.856)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-checkbox.svg b/content/images/pattern-checkbox.svg
new file mode 100644
index 0000000000..e4cdc2e5cd
--- /dev/null
+++ b/content/images/pattern-checkbox.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><g fill="#6a6a6a"><path d="m0 0h28v2h-28z" transform="translate(35 21)"/><path d="m0 0h28v2h-28z" transform="translate(35 41)"/><path d="m0 0h28v2h-28z" transform="translate(35 61)"/></g><g fill="none" stroke="#aac7e5" stroke-width="2" transform="translate(17 16)"><rect height="12" rx="1" stroke="none" width="12"/><path d="m1 1h10v10h-10z" fill="none"/></g><rect fill="#185a69" height="12" rx="1" transform="translate(17 36)" width="12"/><path d="m896.375 167.953 2 2 4-4" fill="none" stroke="#fff" stroke-width="2" transform="translate(-876.375 -126.453)"/><g fill="none" stroke="#aac7e5" stroke-width="2" transform="translate(17 57)"><rect height="12" rx="1" stroke="none" width="12"/><path d="m1 1h10v10h-10z" fill="none"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-combobox.svg b/content/images/pattern-combobox.svg
new file mode 100644
index 0000000000..bb3f87adb2
--- /dev/null
+++ b/content/images/pattern-combobox.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="86" width="72" x="5.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="71" rx="3" transform="translate(13 6)" width="57"/></g><path d="m3 0h51a3 3 0 0 1 3 3v15a0 0 0 0 1 0 0h-57a0 0 0 0 1 0 0v-15a3 3 0 0 1 3-3z" fill="#215a9c" transform="translate(13 6)"/><path d="m0 0h18v2h-18z" fill="#fff" transform="translate(21 15)"/><path d="m0 0h18v2h-18z" fill="#6a6a6a" transform="translate(21 32)"/><path d="m0 0h57v12h-57z" fill="#e1ecf7" transform="translate(13 38)"/><path d="m0 0h24v2h-24z" fill="#6a6a6a" transform="translate(21 54)"/><path d="m0 0h26v2h-26z" fill="#215a9c" transform="translate(21 43)"/><path d="m0 0h23v2h-23z" fill="#6a6a6a" transform="translate(21 65)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-dialog-modal.svg b/content/images/pattern-dialog-modal.svg
new file mode 100644
index 0000000000..7fca36b9f8
--- /dev/null
+++ b/content/images/pattern-dialog-modal.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="60" width="85" x="-.5" y="9.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="45" rx="3" transform="translate(7 17)" width="70"/></g><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(42 51)"/><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(58 51)"/><g fill="#6a6a6a"><path d="m0 0h28v2h-28z" transform="translate(14 35)"/><path d="m0 0h20v2h-20z" transform="translate(14 42)"/><path d="m0 0h20v2h-20z" transform="translate(32 24)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-disclosure.svg b/content/images/pattern-disclosure.svg
new file mode 100644
index 0000000000..f926d87cad
--- /dev/null
+++ b/content/images/pattern-disclosure.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><g fill="#185a69"><path d="m9 13.5 4.651 4.651 4.649-4.651z" transform="matrix(0 -1 1 0 .326 30.989)"/><path d="m9.5 13.663 4 4 5-4z" transform="translate(2.5 15.337)"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" transform="matrix(0 -1 1 0 .326 80.314)"/></g><path d="m0 0h47v2h-47z" fill="#215a9c" transform="translate(26 17)"/><path d="m0 0h45v2h-45z" fill="#215a9c" transform="translate(26 30)"/><path d="m0 0h47v2h-47z" fill="#215a9c" transform="translate(26 66)"/><path d="m0 0h40v2h-40z" fill="#6a6a6a" transform="translate(26 38)"/><path d="m0 0h45v2h-45z" fill="#6a6a6a" transform="translate(26 46)"/><path d="m0 0h33v2h-33z" fill="#6a6a6a" transform="translate(26 54)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-feed.svg b/content/images/pattern-feed.svg
new file mode 100644
index 0000000000..c50ca4f408
--- /dev/null
+++ b/content/images/pattern-feed.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="38" width="79" x="2.5" y="4.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><filter id="b" filterUnits="userSpaceOnUse" height="38" width="79" x="2.5" y="35.5"><feOffset/><feGaussianBlur result="blur-2" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur-2" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="c"><rect height="84" rx="3" width="84" x="783" y="256"/></clipPath><filter id="d" filterUnits="userSpaceOnUse" height="30" width="79" x="2.5" y="66.5"><feOffset/><feGaussianBlur result="blur-3" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur-3" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="e"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#e)"><path d="m0 0h84v84h-84z" fill="#fff"/><g transform="translate(-783 -256)"><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(783 241.667)"/><g filter="url(#a)" transform="translate(783 256)"><rect fill="#fff" height="23" rx="3" transform="translate(10 12)" width="64"/></g><g fill="#6a6a6a" stroke="#707070" transform="translate(799 274)"><path d="m0 0h26v2h-26z" stroke="none"/><path d="m.5.5h25v1h-25z" fill="none"/></g><g fill="none" stroke="#215a9c" transform="translate(825 283)"><path d="m0 0h26v2h-26z" stroke="none"/><path d="m.5.5h25v1h-25z" fill="none"/></g><g fill="#6a6a6a" stroke="#707070" transform="translate(799 280)"><path d="m0 0h14v2h-14z" stroke="none"/><path d="m.5.5h13v1h-13z" fill="none"/></g><g filter="url(#b)" transform="translate(783 256)"><rect fill="#fff" height="23" rx="3" transform="translate(10 43)" width="64"/></g><g fill="#6a6a6a" stroke="#707070" transform="translate(799 305)"><path d="m0 0h26v2h-26z" stroke="none"/><path d="m.5.5h25v1h-25z" fill="none"/></g><g fill="none" stroke="#215a9c" transform="translate(825 314)"><path d="m0 0h26v2h-26z" stroke="none"/><path d="m.5.5h25v1h-25z" fill="none"/></g><g fill="#6a6a6a" stroke="#707070" transform="translate(799 311)"><path d="m0 0h14v2h-14z" stroke="none"/><path d="m.5.5h13v1h-13z" fill="none"/></g><g clip-path="url(#c)"><g filter="url(#d)" transform="translate(783 256)"><rect fill="#fff" height="15" rx="3" transform="translate(10 74)" width="64"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-grid.svg b/content/images/pattern-grid.svg
new file mode 100644
index 0000000000..4b3c38a720
--- /dev/null
+++ b/content/images/pattern-grid.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><g fill="#185a69"><path d="m0 0h59v2h-59z" transform="translate(13 23)"/><path d="m0 0h59v2h-59z" transform="translate(13 38)"/><path d="m0 0h59v2h-59z" transform="translate(13 53)"/><path d="m0 0h59v2h-59z" transform="translate(13 68)"/></g><path d="m0 0h15v2h-15z" fill="#6a6a6a" transform="translate(13 31)"/><path d="m0 0h11v2h-11z" fill="#185a69" transform="translate(13 16)"/><path d="m0 0h13v2h-13z" fill="#6a6a6a" transform="translate(37 31)"/><path d="m0 0h13v2h-13z" fill="#185a69" transform="translate(37 16)"/><path d="m0 0h13v2h-13z" fill="#185a69" transform="translate(59 16)"/><path d="m0 0h18v2h-18z" fill="#6a6a6a" transform="translate(13 46)"/><path d="m0 0h11v2h-11z" fill="#6a6a6a" transform="translate(37 46)"/><path d="m0 0h15v2h-15z" fill="#6a6a6a" transform="translate(13 60)"/><path d="m0 0h13v2h-13z" fill="#6a6a6a" transform="translate(37 60)"/><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(60 29)"/><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(60 44)"/><path d="m0 0h12v5h-12z" fill="#215a9c" transform="translate(60 59)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-landmarks.svg b/content/images/pattern-landmarks.svg
new file mode 100644
index 0000000000..3a744dc689
--- /dev/null
+++ b/content/images/pattern-landmarks.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><g fill="#215a9c"><path d="m0 0h48v2h-48z" transform="matrix(0 -1 1 0 20 67)"/><path d="m0 0h28v2h-28z" transform="matrix(0 -1 1 0 62 66)"/><path d="m0 0h56v2h-56z" transform="matrix(-1 0 0 -1 78 38)"/><path d="m0 0h72v2h-72z" transform="matrix(-1 0 0 -1 78 19)"/><path d="m0 0h72v2h-72z" transform="matrix(-1 0 0 -1 78 67)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-link.svg b/content/images/pattern-link.svg
new file mode 100644
index 0000000000..26049b2472
--- /dev/null
+++ b/content/images/pattern-link.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><path d="m0 0h20v2h-20z" fill="#215a9c" transform="translate(32 41)"/><path d="m11.214 12.214h-3.937l2.072 5.046a.689.689 0 0 1 -.35.891l-1.824.8a.656.656 0 0 1 -.866-.36l-1.969-4.798-3.216 3.307a.657.657 0 0 1 -1.124-.476v-15.945a.657.657 0 0 1 1.124-.479l10.554 10.858a.68.68 0 0 1 -.464 1.156z" fill="#185a69" transform="translate(55 42)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-listbox.svg b/content/images/pattern-listbox.svg
new file mode 100644
index 0000000000..16561e92fa
--- /dev/null
+++ b/content/images/pattern-listbox.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="86" width="72" x="6.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="71" rx="3" transform="translate(14 6)" width="57"/></g><path d="m0 0h57v12h-57z" fill="#e1ecf7" transform="translate(14 36)"/><path d="m0 0h26v2h-26z" fill="#215a9c" transform="translate(22 41)"/><g fill="#6a6a6a"><path d="m0 0h26v2h-26z" transform="translate(22 28)"/><path d="m0 0h21v2h-21z" transform="translate(22 54)"/><path d="m0 0h21v2h-21z" transform="translate(22 67)"/><path d="m0 0h21v2h-21z" transform="translate(22 15)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-menu-button.svg b/content/images/pattern-menu-button.svg
new file mode 100644
index 0000000000..1924f15f45
--- /dev/null
+++ b/content/images/pattern-menu-button.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="67" width="57" x="4.5" y="14.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><filter id="b" filterUnits="userSpaceOnUse" height="30" width="68" x="4.5" y="4.5"><feOffset/><feGaussianBlur result="blur-2" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur-2" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="c"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#c)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="52" rx="3" transform="translate(12 22)" width="42"/></g><g filter="url(#b)"><path d="m3 0h47a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3h-50a0 0 0 0 1 0 0v-12a3 3 0 0 1 3-3z" fill="#185a69" transform="translate(12 12)"/></g><g fill="#6a6a6a"><path d="m0 0h26v2h-26z" transform="translate(20 54)"/><path d="m0 0h26v2h-26z" transform="translate(20 44)"/><path d="m0 0h21v2h-21z" transform="translate(20 64)"/><path d="m0 0h21v2h-21z" transform="translate(20 34)"/></g><path d="m0 0h28.094v2h-28.094z" fill="#fff" transform="translate(23.811 19)"/><path d="m11.214 12.214h-3.937l2.072 5.046a.689.689 0 0 1 -.35.891l-1.824.8a.656.656 0 0 1 -.866-.36l-1.969-4.798-3.216 3.307a.657.657 0 0 1 -1.124-.476v-15.945a.657.657 0 0 1 1.124-.479l10.554 10.858a.68.68 0 0 1 -.464 1.156z" fill="#215a9c" transform="translate(61.125 29)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-menubar.svg b/content/images/pattern-menubar.svg
new file mode 100644
index 0000000000..3a75d84688
--- /dev/null
+++ b/content/images/pattern-menubar.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="67" width="59" x="2.5" y="14.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><filter id="b" filterUnits="userSpaceOnUse" height="30" width="85" x="-.5" y="4.5"><feOffset/><feGaussianBlur result="blur-2" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur-2" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="c"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#c)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="52" rx="3" transform="translate(10 22)" width="44"/></g><g filter="url(#b)"><rect fill="#185a69" height="15" rx="3" transform="translate(7 12)" width="70"/></g><path d="m0 0h26v2h-26z" fill="#6a6a6a" transform="translate(18 54)"/><path d="m0 0h26v2h-26z" fill="#6a6a6a" transform="translate(18 44)"/><path d="m0 0h21v2h-21z" fill="#6a6a6a" transform="translate(18 64)"/><path d="m0 0h21v2h-21z" fill="#6a6a6a" transform="translate(18 34)"/><g fill="#fff"><path d="m0 0h13v2h-13z" transform="translate(16 19)"/><path d="m0 0h13v2h-13z" transform="translate(45 19)"/><path d="m9 13.5 3 3 3-3z" transform="translate(22.349 4.5)"/><path d="m9 13.5 3 3 3-3z" transform="translate(51.349 4.5)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-meter.svg b/content/images/pattern-meter.svg
new file mode 100644
index 0000000000..b508bb3e71
--- /dev/null
+++ b/content/images/pattern-meter.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="31" width="78" x="4.5" y="26.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m508 486h40v8h-40z"/></clipPath><clipPath id="c"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#c)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="16" rx="3" transform="translate(12 34)" width="63"/></g><g transform="translate(-492 -448)"><path d="m0 0h40v8h-40z" fill="#215a9c" transform="translate(508 486)"/><g clip-path="url(#b)" fill="#aac7e5"><path d="m0 0h6v23h-6z" transform="matrix(.8660254 .5 -.5 .8660254 516.5 479.081)"/><path d="m0 0h6v23h-6z" transform="matrix(.8660254 .5 -.5 .8660254 540.5 479.081)"/><path d="m0 0h6v23h-6z" transform="matrix(.8660254 .5 -.5 .8660254 528.5 479.081)"/><path d="m0 0h6v23h-6z" transform="matrix(.8660254 .5 -.5 .8660254 551.5 479.081)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-radio.svg b/content/images/pattern-radio.svg
new file mode 100644
index 0000000000..3339928eb9
--- /dev/null
+++ b/content/images/pattern-radio.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><path d="m0 0h28v2h-28z" fill="#6a6a6a" transform="translate(35 21)"/><path d="m0 0h28v2h-28z" fill="#6a6a6a" transform="translate(35 61)"/><rect fill="#e1ecf7" height="20" rx="1" transform="translate(12 32)" width="60"/><g fill="none" stroke="#aac7e5" stroke-width="3" transform="translate(17 16)"><rect height="12" rx="6" stroke="none" width="12"/><rect fill="none" height="9" rx="4.5" width="9" x="1.5" y="1.5"/></g><g fill="#fff" stroke="#215a9c" stroke-width="4" transform="translate(17 36)"><rect height="12" rx="6" stroke="none" width="12"/><rect fill="none" height="8" rx="4" width="8" x="2" y="2"/></g><g fill="none" stroke="#aac7e5" stroke-width="3" transform="translate(17 57)"><rect height="12" rx="6" stroke="none" width="12"/><rect fill="none" height="9" rx="4.5" width="9" x="1.5" y="1.5"/></g><path d="m0 0h28v2h-28z" fill="#215a9c" transform="translate(35 41)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-slider-multithumb.svg b/content/images/pattern-slider-multithumb.svg
new file mode 100644
index 0000000000..ad4c28a5de
--- /dev/null
+++ b/content/images/pattern-slider-multithumb.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><path d="m0 0h56v2h-56z" fill="#aac7e5" transform="translate(14 25)"/><path d="m0 0h56v2h-56z" fill="#aac7e5" transform="translate(14 57)"/><g fill="#215a9c"><path d="m0 0 6.322 7.64 6.322-7.64z" transform="matrix(0 1 -1 0 56.64 20)"/><path d="m0 0 6.322 7.64 6.322-7.64z" transform="matrix(0 1 -1 0 63.897 51.356)"/><path d="m0 7.64 6.322-7.64 6.322 7.64z" transform="matrix(0 1 -1 0 28.14 20)"/><path d="m0 7.64 6.322-7.64 6.322 7.64z" transform="matrix(0 1 -1 0 33 51.356)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-slider.svg b/content/images/pattern-slider.svg
new file mode 100644
index 0000000000..d63b1fa78b
--- /dev/null
+++ b/content/images/pattern-slider.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><path d="m0 0h56v2h-56z" fill="#aac7e5" transform="translate(14 19)"/><rect fill="#215a9c" height="14" rx="1" transform="translate(25 13)" width="4"/><path d="m0 0h56v2h-56z" fill="#aac7e5" transform="translate(14 41)"/><rect fill="#215a9c" height="14" rx="1" transform="translate(25 35)" width="4"/><path d="m0 0h56v2h-56z" fill="#aac7e5" transform="translate(14 63)"/><rect fill="#215a9c" height="14" rx="1" transform="translate(25 57)" width="4"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-spinbutton.svg b/content/images/pattern-spinbutton.svg
new file mode 100644
index 0000000000..cd1c58f008
--- /dev/null
+++ b/content/images/pattern-spinbutton.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><rect fill="#185a69" height="18" rx="1" transform="translate(32 20)" width="21"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" fill="#fff" transform="matrix(-1 0 0 -1 55.803 44.151)"/><rect fill="#185a69" height="18" rx="1" transform="matrix(-1 0 0 -1 53 66)" width="21"/><path d="m9 13.5 4.651 4.651 4.649-4.651z" fill="#fff" transform="translate(29 41.349)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-switch.svg b/content/images/pattern-switch.svg
new file mode 100644
index 0000000000..f2d2c170a0
--- /dev/null
+++ b/content/images/pattern-switch.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="36" width="51" x="16.5" y="24.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="21" rx="10.5" transform="translate(24 32)" width="36"/></g><circle cx="7.5" cy="7.5" fill="#215a9c" r="7.5" transform="translate(27 35)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-table.svg b/content/images/pattern-table.svg
new file mode 100644
index 0000000000..c86d280200
--- /dev/null
+++ b/content/images/pattern-table.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="60" width="73" x="6.5" y="13.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="45" rx="1" transform="translate(14 21)" width="58"/></g><path d="m0 0h58v10h-58z" fill="#e1ecf7" transform="translate(14 33)"/><path d="m0 0h58v10h-58z" fill="#e1ecf7" transform="translate(14 56)"/><g fill="#215a9c"><path d="m0 0h58v2h-58z" transform="translate(14 32)"/><path d="m0 0h58v2h-58z" transform="translate(14 43)"/><path d="m0 0h58v2h-58z" transform="translate(14 54)"/><path d="m0 0h45v2h-45z" transform="matrix(0 -1 1 0 31 66)"/><path d="m0 0h45v2h-45z" transform="matrix(0 -1 1 0 53 66)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-tabs.svg b/content/images/pattern-tabs.svg
new file mode 100644
index 0000000000..32653c370d
--- /dev/null
+++ b/content/images/pattern-tabs.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="67" width="85" x="-.5" y="8.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><path d="m3 52a3 3 0 0 1 -3-3v-46a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8h50v38a3 3 0 0 1 -3 3z" fill="#fff" transform="translate(7 16)"/></g><g fill="#185a69"><path d="m3 0h14a3 3 0 0 1 3 3v8a0 0 0 0 1 0 0h-20a0 0 0 0 1 0 0v-8a3 3 0 0 1 3-3z" transform="translate(33 16)"/><path d="m3 0h14a3 3 0 0 1 3 3v8a0 0 0 0 1 0 0h-20a0 0 0 0 1 0 0v-8a3 3 0 0 1 3-3z" transform="translate(57 16)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-toolbar.svg b/content/images/pattern-toolbar.svg
new file mode 100644
index 0000000000..f19d72c3d8
--- /dev/null
+++ b/content/images/pattern-toolbar.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="33" width="85" x="-.5" y="1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><filter id="b" filterUnits="userSpaceOnUse" height="60" width="85" x="-.5" y="23.5"><feOffset/><feGaussianBlur result="blur-2" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur-2" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="c"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#c)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="18" rx="3" transform="translate(7 9)" width="70"/></g><g filter="url(#b)"><rect fill="#fff" height="45" rx="3" transform="translate(7 31)" width="70"/></g><path d="m0 0h46v2h-46z" fill="#6a6a6a" transform="translate(14 51)"/><path d="m0 0h39v2h-39z" fill="#6a6a6a" transform="translate(14 60)"/><path d="m0 0h42v2h-42z" fill="#6a6a6a" transform="translate(14 42)"/><g fill="#215a9c"><rect height="6" rx="2" transform="matrix(-1 0 0 -1 53 21)" width="14"/><rect height="6" rx="2" transform="matrix(-1 0 0 -1 71 21)" width="14"/><rect height="6" rx="2" transform="matrix(-1 0 0 -1 22 21)" width="9"/><rect height="6" rx="2" transform="matrix(-1 0 0 -1 35 21)" width="9"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-tooltip.svg b/content/images/pattern-tooltip.svg
new file mode 100644
index 0000000000..92198927e1
--- /dev/null
+++ b/content/images/pattern-tooltip.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><path d="m14.992 18.992h-13.992a3 3 0 0 1 -3-3v-14.992a3 3 0 0 1 3-3h41a3 3 0 0 1 3 3v14.992a3 3 0 0 1 -3 3h-13.991l-6.509 7.758z" fill="#d0e0f0" transform="translate(20.5 18.25)"/><g fill="#215a9c"><path d="m0 0h26v2h-26z" transform="translate(25 23)"/><path d="m0 0h18v2h-18z" transform="translate(25 29)"/><circle cx="10.5" cy="10.5" r="10.5" transform="translate(32 51)"/></g><path d="m0 0h2v8h-2z" fill="#fff" transform="matrix(-1 0 0 -1 43.5 67.32)"/><path d="m0 0h2v2h-2z" fill="#fff" transform="matrix(-1 0 0 -1 43.5 57.32)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-treegrid.svg b/content/images/pattern-treegrid.svg
new file mode 100644
index 0000000000..7aa19e66b3
--- /dev/null
+++ b/content/images/pattern-treegrid.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><path d="m9 13.5 4 4 4-4z" fill="#185a69" transform="translate(1 19.674)"/><path d="m9 13.5 4 4 4-4z" fill="#185a69" transform="matrix(0 -1 1 0 -1.5 83.174)"/><g fill="#6a6a6a"><path d="m0 0h21v2h-21z" transform="translate(10 16)"/><path d="m0 0h21v2h-21z" transform="translate(46 16)"/><path d="m0 0h11v2h-11z" transform="translate(21 35)"/><path d="m0 0h27v2h-27z" transform="translate(45 35)"/><path d="m0 0h11v2h-11z" transform="translate(21 68)"/><path d="m0 0h13v2h-13z" transform="translate(46 68)"/></g><path d="m0 0h72v15h-72z" fill="#e1ecf7" transform="translate(6 44)"/><path d="m0 0h8v2h-8z" fill="#215a9c" transform="translate(21 50)"/><path d="m0 0h22v2h-22z" fill="#215a9c" transform="translate(45 50)"/><path d="m0 0h72v2h-72z" fill="#215a9c" transform="translate(6 26)"/><path d="m0 0h72v2h-72z" fill="#215a9c" transform="translate(6 59)"/><path d="m0 0h72v2h-72z" fill="#215a9c" transform="matrix(0 -1 1 0 36 78)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-treeview.svg b/content/images/pattern-treeview.svg
new file mode 100644
index 0000000000..24de583f0d
--- /dev/null
+++ b/content/images/pattern-treeview.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="87" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#d0e0f0" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="72" rx="3" transform="translate(6 6)" width="72"/></g><g fill="#6a6a6a"><path d="m0 0h37v2h-37z" transform="translate(34 22)"/><path d="m0 0h23v2h-23z" transform="translate(48 41)"/><path d="m0 0h23v2h-23z" transform="translate(48 63)"/></g><path d="m14.914 10.44-1.886 3.233a1.667 1.667 0 0 1 -1.44.827h-10.415a.625.625 0 0 1 -.54-.94l1.886-3.233a1.667 1.667 0 0 1 1.439-.827h10.416a.625.625 0 0 1 .54.94zm-10.956-1.773h8.542v-1.25a1.25 1.25 0 0 0 -1.25-1.25h-4.167l-1.666-1.667h-4.167a1.25 1.25 0 0 0 -1.25 1.25v7.241l1.8-3.084a2.508 2.508 0 0 1 2.158-1.24z" fill="#185a69" transform="translate(13 11.5)"/><path d="m5.833 3.542v-3.542h-5.208a.624.624 0 0 0 -.625.625v12.083a.624.624 0 0 0 .625.625h8.75a.624.624 0 0 0 .625-.625v-8.541h-3.542a.627.627 0 0 1 -.625-.625zm4.167-.368v.159h-3.333v-3.333h.159a.625.625 0 0 1 .443.182l2.549 2.552a.623.623 0 0 1 .182.44z" fill="#185a69" transform="translate(29 35)"/><path d="m5.833 3.542v-3.542h-5.208a.624.624 0 0 0 -.625.625v12.083a.624.624 0 0 0 .625.625h8.75a.624.624 0 0 0 .625-.625v-8.541h-3.542a.627.627 0 0 1 -.625-.625zm4.167-.368v.159h-3.333v-3.333h.159a.625.625 0 0 1 .443.182l2.549 2.552a.623.623 0 0 1 .182.44z" fill="#185a69" transform="translate(29 57)"/></g></svg>
\ No newline at end of file
diff --git a/content/images/pattern-windowsplitter.svg b/content/images/pattern-windowsplitter.svg
new file mode 100644
index 0000000000..1527dff856
--- /dev/null
+++ b/content/images/pattern-windowsplitter.svg
@@ -0,0 +1 @@
+<svg height="84" viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" filterUnits="userSpaceOnUse" height="86" width="87" x="-1.5" y="-1.5"><feOffset/><feGaussianBlur result="blur" stdDeviation="2.5"/><feFlood flood-color="#aac7e5"/><feComposite in2="blur" operator="in"/><feComposite in="SourceGraphic"/></filter><clipPath id="b"><path d="m0 0h84v84h-84z"/></clipPath><g clip-path="url(#b)"><path d="m0 0h84v84h-84z" fill="#fff"/><path d="m3 14.333h78a3 3 0 0 1 3 3v78a3 3 0 0 1 -3 3h-78a3 3 0 0 1 -3-3v-78a3 3 0 0 1 3-3z" fill="#e1ecf7" transform="translate(0 -14.333)"/><g filter="url(#a)"><rect fill="#fff" height="71" rx="3" transform="translate(6 6)" width="72"/></g><path d="m3 0h66a3 3 0 0 1 3 3v10a0 0 0 0 1 0 0h-72a0 0 0 0 1 0 0v-10a3 3 0 0 1 3-3z" fill="#215a9c" transform="translate(6 6)"/><g fill="#185a6a"><path d="m0 0h58.426v2h-58.426z" transform="matrix(0 -1 1 0 42.906 77.173)"/><path d="m0 0h58.426v2h-58.426z" transform="matrix(0 -1 1 0 38.094 77.173)"/><path d="m0 0h10v2h-10z" transform="translate(43.906 45.041)"/><path d="m0 0 4.661 4.661 4.662-4.661z" transform="matrix(0 -1 1 0 51.416 50.716)"/><path d="m0 0h10v2h-10z" transform="matrix(-1 0 0 -1 39.094 47.068)"/><path d="m0 0 4.661 4.661 4.662-4.661z" transform="matrix(0 1 -1 0 31.584 41.393)"/></g></g></svg>
\ No newline at end of file
diff --git a/content/images/read-this-first.svg b/content/images/read-this-first.svg
new file mode 100644
index 0000000000..69323df5ed
--- /dev/null
+++ b/content/images/read-this-first.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 590.79 518.17" xmlns="http://www.w3.org/2000/svg"><path d="m117 116.78s6.25 36.28-8 57.67-27.8 29.94-42.77 39.92c-20.27 13.51-28.51 32.42-28.51 57 0 31.37 27.09 45.62 39.92 52.75s45.65 2.88 71.36-12.8 25.67-27.09 27.09-48.47 20.47-55.27 6-93.93-65.09-52.14-65.09-52.14z" fill="#1a335f" transform="translate(-2.59)"/><path d="m236.64 282.09s2.14 37.78 32.08 44.91 52 31 84.83-2.85c24.59-25.38 5-67 5-67s24.92-1.15 24.45-25.08c-.73-37.5-26.6-28.39-31.59-65.46s17.35-36.55 9.26-70.93c-9.51-40.4-56.31-16.76-56.31-16.76z" fill="#1a335f" transform="translate(-2.59)"/><path d="m396.92 518.17c-6.66-17.79-13.35-35.56-19.77-53.43-7.41-20.6-15.41-41.09-20.16-62.48-6.31-28.41-20.48-50.66-46-65.36-10.88-6.25-21.55-12.86-32.78-18.5-1.46-.73-3.05-2.17-4.27.37-1.76.93-2.57 2.65-3.51 4.27a90.55 90.55 0 0 1 -15.82 20.57 29.66 29.66 0 0 1 -24.96 8.39c-13-1.46-25.35-5.14-37.41-10-18.85-7.63-36.71-17.31-54.94-26.23-3.18-1.56-6.26-3.61-10-3.56-5-2.43-9.82-1.12-14.72.46a237.35 237.35 0 0 0 -44 19.12c-11.93 6.65-23.24 14.21-32.28 24.71-12.11 14.05-30 118.2-32.87 144.66-.62 5.67-1.24 11.37-.53 17z" fill="#79a1cf" transform="translate(-2.59)"/><path d="m338 157c-1.44-8.93-2.8-17.95-2.14-27.09-2.38-.2-1.88-2.4-2.24-3.68-3.87-13.7-11.53-24.44-23.91-31.74a55.84 55.84 0 0 1 -12.14-9.72c-4.14-4.36-6.95-9.63-10.34-15.2-2.88 15-31.53 35.3-30.65 29.12.29-.85-.08-1-.82-.78-1.1 1.79-2.11 3.64-3.32 5.34-6 8.41-13.08 15.88-20.05 23.44 0 .43-26.92 13.89-27.9 14.54-9.64 6.43-14 15.74-25.27 18.15-5.08 1.09-4.94 1.06-4 6.44 1.55 8.77 4.17 17.4 3.54 26.47-.12 1.67-.29 3.54-2 4-1.58.39-2.59-1.18-3.3-2.46-2.21-4-4.35-8-6.48-12-3.75-7-8.29-13.42-15-17.89-3.75-2.49-8.22-3.75-11.84-6.53-.38.72-1.06.65-1.72.7-9.26.64-13.27 4.22-15.07 13.46-3.73 19.07 6.18 34.68 25 39.55 4.3 1.11 9.5-.06 12.8 2.08s3.9 7.94 7.19 10.8c5.34 4.63 5.8 9.95 5 16.48-1.77 14.76-4.15 29.32-9.07 43.43-3.28 9.39-8.95 16.12-18.42 19.77-6.32 2.44-12.35 5.64-18.51 8.5 15.55 7.62 31 15.4 46.68 22.81 17.36 8.21 35 15.61 54.36 17.88 10.29 1.21 19.24-1 26.87-8.29a97.22 97.22 0 0 0 18.74-25.77 105.06 105.06 0 0 1 -23-15.56 21.4 21.4 0 0 1 -7.21-14.25c-.35-1.22-12.43-7.78 1.39-.16 2.22.93 4.45 1.82 6.64 2.81 16.38 7.36 31.55 5.89 45.65-5.73 10.14-8.36 18.78-18 24.64-29.72 15.65-31.39 21.46-64.38 15.9-99.2z" fill="#d17b65" transform="translate(-2.59)"/><g fill="#1a335f"><path d="m289.45 12.67c-1.88.33-2.57-.83-3.13-2.33-3.32-9-56.82-18.62-103.16 1.66s-72.7 66.21-66.16 104.78c2.68 15.75 11.68 29.14 23 40.59 1.26 2.87 4 3.86 6.55 4.94 5.83 2.51 10.12 6.68 14 11.56 4.43 5.5 6.63 12.19 10.42 18 1.46 2.24 2.42 5.86 6 4.81s2.58-4.54 2.69-7.27c.31-8-2.07-15.59-3.41-23.34-.84-4.81-.77-4.89 3.84-5.9 5.22-1.14 10.45-2.33 15.32-4.57 41.53-19.1 60.32-56.39 60.15-55.94 2.77 7.43-9.3 30.7-6.47 30.65 26-17.11 35.94-44.33 38.7-59 .75 3.2 2.5 5.63 4.15 8.1 4.7 7 11.14 12.18 18.19 16.66 6.73 4.28 12.62 9.44 16.64 16.47 2.6 4.56 6.73 9 8.87 24.64 2.36-4.12 18.18-51.35 5.08-85s-51.27-39.51-51.27-39.51z" transform="translate(-2.59)"/><path d="m134.09 178c4.07-3.91 8.63-4.07 13.16-1.74 6.65 3.42 9.21 9.36 9.71 16.67-2.81-.62-2.47-5.5-6.29-4-3.64 1.41-3.55 4.89-4.33 8-1.63-5.63-1.11-7.66 3.53-10.38 1.89-1.12 1.27-1.88.49-3-2.34-3.35-5.41-5.45-9.62-5.5-2.22-.05-4.44-.05-6.65-.05z" transform="translate(-2.59)"/><path d="m283.12 215.44a2.48 2.48 0 0 1 -2.12-1.24 2.51 2.51 0 0 1 .91-3.42l17.72-10.26c-2.72-10-8.7-31.43-10.58-35.5-1.24-2.7-.7-6.1 1.53-9.58 3-4.75 9.6-9.87 16.82-9.87 14.92 0 19.86 9.53 20.06 9.94a2.5 2.5 0 0 1 -4.46 2.25c-.18-.33-3.94-7.19-15.6-7.19-5.1 0-10.2 3.81-12.61 7.57-1.22 1.9-1.68 3.74-1.19 4.78 2.59 5.62 11 36.83 11.36 38.15l.5 1.85-21 12.19a2.5 2.5 0 0 1 -1.34.33z" transform="translate(-2.59)"/><path d="m233.37 159.46a2.46 2.46 0 0 1 -1.32-.38 2.5 2.5 0 0 1 -.8-3.44c3-4.85 9.6-10.07 16.94-10.07 14.92 0 19.86 9.53 20.06 9.94a2.5 2.5 0 0 1 -4.46 2.25c-.18-.33-3.94-7.19-15.6-7.19-5.13 0-10.37 4-12.7 7.71a2.5 2.5 0 0 1 -2.12 1.18z" transform="translate(-2.59)"/><path d="m274.21 243c-7.76 0-15.21-3.17-22.23-9.48a2.5 2.5 0 1 1 3.34-3.72c7.81 7 15.79 9.5 24.36 7.58a2.5 2.5 0 1 1 1.09 4.88 30.13 30.13 0 0 1 -6.56.74z" transform="translate(-2.59)"/><circle cx="305.34" cy="167.61" r="7.14"/><circle cx="246.87" cy="167.61" r="7.14"/><path d="m192.13 410-1.38-.31c-15.14-3.41-31.91-13.39-47.23-28.1-17-16.34-31.27-37.51-41.23-61.24a2.51 2.51 0 0 1 4.62-1.94c14.82 35.34 47.17 77 83.57 86.08l26.16-27.38a2.5 2.5 0 0 1 3.62 3.45z" transform="translate(-2.59)"/><path d="m261.24 405.85-22.18-24.29a2.5 2.5 0 0 1 3.69-3.37l19.12 20.94c6.49-5.46 29.27-27.45 31.21-68.18a2.5 2.5 0 1 1 5 .24c-2.37 49.85-33.7 72.45-35 73.39z" transform="translate(-2.59)"/><path d="m262.66 302.77a2.61 2.61 0 0 1 -.94-.18c-27.43-11-54.13-31.13-54.39-31.34a2.5 2.5 0 1 1 3-4c.27.2 26.45 19.89 53.25 30.68a2.5 2.5 0 0 1 -.93 4.82z" transform="translate(-2.59)"/><path d="m87.1 451.11c-14.1-54.24-36.42-68.51-37.36-69.11a2.5 2.5 0 0 0 -2.63 4.25s5.42 3.48 12.4 13.28c6.46 9.08 15.66 25.62 22.75 52.82 6.08 23.31 9.26 46.78 10.91 65.8h5c-1.65-19.32-4.87-43.26-11.07-67.04z" transform="translate(-2.59)"/><path d="m234.81 518.17v-147.27a2.5 2.5 0 0 0 -5 0v147.27z" transform="translate(-2.59)"/><path d="m325.39 462.25c-5.56-70.92 6.77-98.27 6.9-98.54a2.5 2.5 0 0 0 -4.53-2.13c-.53 1.13-13.05 28.52-7.36 101.06 2 25.18 3.44 43 4.5 55.53h5c-1.05-12.58-2.52-30.51-4.51-55.92z" transform="translate(-2.59)"/></g><path d="m590.68 331.36c-1.52-4.35-10.57-6-10.57-6s-2.19-8.43-6.6-9.45-9.4-1.72-28 .29c-19 2-45.06 2.92-45.06 2.92s33.81-3.18 37.07-9.74 1.18-4.66-1-8.08c-3.21-5.17-25.66-2.85-50.37 4.28-13.64-1.34-13.92-.85-26.38.95-9.77 1.41-15.13 9.3-22.34 15.21-10.05 8.23-31.67 49.91-40.39 73.73-6.17 9.38-37.17 80.84-57.36 122.54h77.32s31-134.21 37.82-139.01c15.92-25.3 21.27-16.09 63.44-19.24 8.88-2.07 52-4.79 59.89-10.7 10-7.48 4.94-9.17 4.94-9.17s9.7-2.48 7.59-8.53z" fill="#d17b65" transform="translate(-2.59)"/><path d="m399.21 392.87a2.37 2.37 0 0 1 -1-.23 2.5 2.5 0 0 1 -1.24-3.31c12.79-28 23.27-47.8 33-62.37 13.28-19.92 26.52-26.55 50.59-25.35 11.32-.23 22.81-2 32.05-3.34 10.82-1.62 18.63-2.8 22.54-1.23a10.34 10.34 0 0 1 5.65 5.81 8.24 8.24 0 0 1 0 6.61c-4.15 8.76-25.64 11.39-25.85 11.4a2.5 2.5 0 0 1 -.34-5c3.6-.24 19.32-3.58 21.67-8.55a3.41 3.41 0 0 0 -.09-2.65 5.37 5.37 0 0 0 -2.85-3c-2.65-1.06-11 .2-20 1.53-9.4 1.41-21.11 3.17-32.78 3.4h-.17c-22.32-1.13-34 4.7-46.27 23.13-9.57 14.34-19.92 33.94-32.6 61.67a2.5 2.5 0 0 1 -2.31 1.48z" fill="#1a335f" transform="translate(-2.59)"/><path d="m580.28 343a2.5 2.5 0 0 1 -.17-5c3.85-.28 6.78-1.47 7.84-3.2a3.51 3.51 0 0 0 0-3.33c-.62-1.46-5.46-3-9.38-3.47l-4.82-.53 3.23-3.62a2.37 2.37 0 0 0 .48-1.66c-.16-1.06-1.32-2-2.26-2.62-4-2.57-11.51-1.81-28.08-.16-5 .5-10.74 1.07-17.51 1.67h-.1a150.6 150.6 0 0 1 -22.07-.53c-2.13-.18-4-.34-5.65-.39a2.5 2.5 0 1 1 .14-5c1.83 0 3.73.21 5.94.4a143.2 143.2 0 0 0 21.35.51c6.72-.59 12.39-1.15 17.4-1.65 18.31-1.83 25.89-2.58 31.31.94 2.66 1.73 4.18 3.81 4.49 6.18a6.71 6.71 0 0 1 0 2c3.56.76 8.69 2.44 10.17 6a8.31 8.31 0 0 1 -.36 7.88c-2 3.18-6.13 5.16-11.75 5.56z" fill="#1a335f" transform="translate(-2.59)"/><path d="m527.58 331c-2.19 0-4.29-.05-6.25-.16a2.5 2.5 0 0 1 .29-5c10.34.59 24.76-.63 37.49-1.7 7.3-.62 14.19-1.21 19.15-1.33a2.5 2.5 0 0 1 .13 5c-4.82.12-11.64.7-18.86 1.31-10.53.88-22.2 1.88-31.95 1.88z" fill="#1a335f" transform="translate(-2.59)"/><path d="m451.25 386.45a2.49 2.49 0 0 1 -2.16-3.75c9.9-17.15 19-23.82 34.7-25.47 3.87-.41 24.7-.91 29.4-.37 5.42.63 20.22-2 28.84-3.86 8.21-1.81 15.37-2.81 21.13-3.61 8-1.13 15-2.1 15.36-4.31a3.87 3.87 0 0 0 -.87-3.49c-2-2.18-6.91-3.1-13.47-2.52-6.73.59-30.11 1.75-49.15 1.76-2.78.67-5.29-.42-8.43-1.77-4.82-2.09-12.11-5.24-25.88-3.94a2.52 2.52 0 0 1 -2.73-2.26 2.49 2.49 0 0 1 2.26-2.72c15.05-1.42 23 2 28.34 4.33 2.77 1.19 4.27 1.8 5.4 1.46l.35-.1h.36c19.33 0 43.14-1.22 49-1.74 8.35-.74 14.43.68 17.59 4.12a8.78 8.78 0 0 1 2.12 7.73c-1 5.8-8 6.78-19.59 8.4-5.68.79-12.74 1.78-20.76 3.54-.9.2-22.35 4.89-30.48 3.95-4-.46-24.42 0-28.31.37-12.16 1.28-20.69 5.33-30.89 23a2.5 2.5 0 0 1 -2.13 1.25z" fill="#1a335f" transform="translate(-2.59)"/><path d="m420.13 506.46a2.18 2.18 0 0 1 -.61-.08 2.49 2.49 0 0 1 -1.81-3l21.85-87.21a2.5 2.5 0 1 1 4.85 1.21l-21.86 87.22a2.5 2.5 0 0 1 -2.42 1.86z" fill="#1a335f" transform="translate(-2.59)"/></svg>
\ No newline at end of file
diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
index efcadf98df..a141142e11 100644
--- a/content/patterns/accordion/accordion-pattern.html
+++ b/content/patterns/accordion/accordion-pattern.html
@@ -37,6 +37,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-accordion.svg">
         <h2>Example</h2>
         <p><a href="examples/accordion.html">Accordion Example</a>: demonstrates a form divided into three sections using an accordion to show one section at a time.</p>
       </section>
diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html
index f3b395eca0..1596083509 100644
--- a/content/patterns/accordion/examples/accordion.html
+++ b/content/patterns/accordion/examples/accordion.html
@@ -28,6 +28,7 @@ <h1>Accordion Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-accordion.svg">
         <p>The below example section contains a simple personal information input form divided into 3 sections that demonstrates the <a href="../accordion-pattern.html">Accordion Pattern</a>.</p>
       </section>
 
diff --git a/content/patterns/alert/alert-pattern.html b/content/patterns/alert/alert-pattern.html
index 5d319b4a93..81318f72c1 100644
--- a/content/patterns/alert/alert-pattern.html
+++ b/content/patterns/alert/alert-pattern.html
@@ -38,6 +38,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-alert.svg">
         <h2>Example</h2>
         <p><a href="examples/alert.html">Alert Example</a></p>
       </section>
diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
index 571623173b..2f4d78b9cb 100644
--- a/content/patterns/alert/examples/alert.html
+++ b/content/patterns/alert/examples/alert.html
@@ -29,6 +29,7 @@ <h1>Alert Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alert.svg">
         <p>
           The below example demonstrates the <a href="../alert-pattern.html">Alert Pattern</a>.
           Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
diff --git a/content/patterns/alertdialog/alertdialog-pattern.html b/content/patterns/alertdialog/alertdialog-pattern.html
index 88de2c6d36..0db8f9fb31 100644
--- a/content/patterns/alertdialog/alertdialog-pattern.html
+++ b/content/patterns/alertdialog/alertdialog-pattern.html
@@ -26,6 +26,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-alertdialog.svg">
         <h2>Example</h2>
         <p><a href="../alertdialog/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</p>
       </section>
diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html
index 4a8921deac..ea35560665 100644
--- a/content/patterns/alertdialog/examples/alertdialog.html
+++ b/content/patterns/alertdialog/examples/alertdialog.html
@@ -30,6 +30,7 @@ <h1>Alert Dialog Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alertdialog.svg">
         <p>
           The below example of a confirmation prompt demonstrates the <a href="../alertdialog-pattern.html">Alert Dialog Pattern</a>.
           It also includes an example of the <a href="../../alert/alert-pattern.html">Alert Pattern</a> to make comparing the experiences provided by the two patterns easy.
diff --git a/content/patterns/breadcrumb/breadcrumb-pattern.html b/content/patterns/breadcrumb/breadcrumb-pattern.html
index 1af0accdfb..61967ffd9a 100644
--- a/content/patterns/breadcrumb/breadcrumb-pattern.html
+++ b/content/patterns/breadcrumb/breadcrumb-pattern.html
@@ -26,6 +26,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-breadcrumb.svg">
         <h2>Example</h2>
         <p><a href="examples/breadcrumb.html">Breadcrumb design pattern example</a></p>
       </section>
diff --git a/content/patterns/breadcrumb/examples/breadcrumb.html b/content/patterns/breadcrumb/examples/breadcrumb.html
index 25db1e906f..df73832aee 100644
--- a/content/patterns/breadcrumb/examples/breadcrumb.html
+++ b/content/patterns/breadcrumb/examples/breadcrumb.html
@@ -28,6 +28,7 @@ <h1>Breadcrumb Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-breadcrumb.svg">
         <p>The following example demonstrates the <a href="../breadcrumb-pattern.html">Breadcrumb Pattern</a>.</p>
       </section>
 
diff --git a/content/patterns/button/button-pattern.html b/content/patterns/button/button-pattern.html
index a4716b3dfd..fdc991caca 100644
--- a/content/patterns/button/button-pattern.html
+++ b/content/patterns/button/button-pattern.html
@@ -47,6 +47,7 @@ <h3>Note</h3>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-button.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/button.html">Button Examples</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.</li>
diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
index 7f19d34d3e..d3029aa99d 100644
--- a/content/patterns/button/examples/button.html
+++ b/content/patterns/button/examples/button.html
@@ -30,6 +30,7 @@ <h1>Button Examples</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-button.svg">
         <p>The following command and toggle button examples demonstrate the <a href="../button-pattern.html">Button Pattern</a>.</p>
         <p>Similar examples include:</p>
         <ul>
diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
index 6eb3a15688..f30e8ca801 100644
--- a/content/patterns/button/examples/button_idl.html
+++ b/content/patterns/button/examples/button_idl.html
@@ -30,6 +30,7 @@ <h1>Button Examples (IDL Version)</h1>
 
       <section>
         <h2>About This example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-button.svg">
         <p>The following examples of the <a href="../button-pattern.html">Button Pattern</a> demonstrate a new JavaScript syntax for coding ARIA attributes.</p>
         <p>
           The JavaScript for the example buttons on this page uses the <a class="specref" href="#idl-interface">IDL Interface defined in ARIA 1.2</a>.
diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index 6dd1c48a93..996c8e7257 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -54,6 +54,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-carousel.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.</li>
diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index 6c067886ca..8cfd8c53b8 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -29,6 +29,7 @@ <h1>Auto-Rotating Image Carousel Example with Buttons for Slide Control</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-carousel.svg">
         <p>
           The following example implementation of the <a href="../carousel-pattern.html">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
           For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons.
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index 8ce007379b..d3a734e9eb 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -29,6 +29,7 @@ <h1>Auto-Rotating Image Carousel with Tabs for Slide Control Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-carousel.svg">
         <p>
           The following example implementation of the <a href="../carousel-pattern.html">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
           This example also illustrates how to use the <a href="../../tabs/tabs-pattern.html">tabs pattern</a> to provide users with a way to skip slides in the sequence by directly choosing which one to view.
diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
index 53d9f8e0bd..e651646c46 100644
--- a/content/patterns/checkbox/checkbox-pattern.html
+++ b/content/patterns/checkbox/checkbox-pattern.html
@@ -40,6 +40,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-checkbox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/checkbox.html">Checkbox (Two-State) Example</a>: Demonstrates a simple 2-state checkbox.</li>
diff --git a/content/patterns/checkbox/examples/checkbox-mixed.html b/content/patterns/checkbox/examples/checkbox-mixed.html
index 823c6a27e7..bab132c42d 100644
--- a/content/patterns/checkbox/examples/checkbox-mixed.html
+++ b/content/patterns/checkbox/examples/checkbox-mixed.html
@@ -29,6 +29,7 @@ <h1>Checkbox Example (Mixed-State)</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-checkbox.svg">
         <p>
           This example demonstrates using the <a href="../checkbox-pattern.html">Checkbox Pattern</a> to create a tri-state, or mixed-state, checkbox.
           In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes.
diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
index edab7e2492..b473db021e 100644
--- a/content/patterns/checkbox/examples/checkbox.html
+++ b/content/patterns/checkbox/examples/checkbox.html
@@ -29,6 +29,7 @@ <h1>Checkbox Example (Two State)</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-checkbox.svg">
         <p>This example implements the <a href="../checkbox-pattern.html">Checkbox Pattern</a> for a two state checkbox using <code>div</code> elements.</p>
 
         <p>Similar examples include:</p>
diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html
index 640e29356c..643e3320dc 100644
--- a/content/patterns/combobox/combobox-pattern.html
+++ b/content/patterns/combobox/combobox-pattern.html
@@ -100,6 +100,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-combobox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html
index 5ebbfd5031..c4c1e8ce7f 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-both.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html
@@ -29,6 +29,7 @@ <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below combobox for choosing the name of a US state or territory demonstrates the <a href="../combobox-pattern.html">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html
index 7b3e0eaa48..c6ed9033b5 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-list.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html
@@ -29,6 +29,7 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below combobox for choosing the name of a US state or territory demonstrates the <a href="../combobox-pattern.html">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html
index ee4886e4eb..a4a2df7350 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-none.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html
@@ -29,6 +29,7 @@ <h1>Editable Combobox without Autocomplete Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the <a href="../combobox-pattern.html">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
index 9869c83fc0..f36df85ea9 100644
--- a/content/patterns/combobox/examples/combobox-datepicker.html
+++ b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -30,6 +30,7 @@ <h1>Date Picker Combobox Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below date picker demonstrates an implementation of the <a href="../combobox-pattern.html">Combobox Pattern</a> that opens a dialog.
           The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt + Down Arrow</kbd>.
diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
index 4fce2109bc..4768c75a9e 100644
--- a/content/patterns/combobox/examples/combobox-select-only.html
+++ b/content/patterns/combobox/examples/combobox-select-only.html
@@ -29,6 +29,7 @@ <h1>Select-Only Combobox Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The following example implementation of the <a href="../combobox-pattern.html">Combobox Pattern</a> demonstrates a single-select combobox widget that is functionally similar to an HTML <code>select</code> element.
           Unlike the editable combobox examples, this select-only combobox is not made with an <code>&lt;input&gt;</code> element, and it does not accept freeform user input.
diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html
index e424915932..87a2b587f3 100644
--- a/content/patterns/combobox/examples/grid-combo.html
+++ b/content/patterns/combobox/examples/grid-combo.html
@@ -31,6 +31,7 @@ <h1>Editable Combobox with Grid Popup Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The following example combobox implements the <a href="../combobox-pattern.html">combobox pattern</a> using a grid for the suggested values popup.
         </p>
diff --git a/content/patterns/dialog-modal/dialog-modal-pattern.html b/content/patterns/dialog-modal/dialog-modal-pattern.html
index 71fdeefd61..68d8829ed6 100644
--- a/content/patterns/dialog-modal/dialog-modal-pattern.html
+++ b/content/patterns/dialog-modal/dialog-modal-pattern.html
@@ -36,6 +36,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-dialog-modal.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/dialog.html">Modal Dialog Example</a>: Demonstrates multiple layers of modal dialogs with both small and large amounts of content.</li>
diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html
index 808e759fee..486139bdad 100644
--- a/content/patterns/dialog-modal/examples/datepicker-dialog.html
+++ b/content/patterns/dialog-modal/examples/datepicker-dialog.html
@@ -30,6 +30,7 @@ <h1>Date Picker Dialog Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg">
         <p>
           The example below includes a date input field and a button that opens a date picker that implements the <a href="../dialog-modal-pattern.html">Dialog (Modal) Pattern</a>.
           The dialog contains a calendar that uses the <a href="../../grid/grid-pattern.html">grid pattern</a> to present buttons that enable the user to choose a day from the calendar.
diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
index 56a5a0d549..7f9c38ba6d 100644
--- a/content/patterns/dialog-modal/examples/dialog.html
+++ b/content/patterns/dialog-modal/examples/dialog.html
@@ -30,6 +30,7 @@ <h1>Modal Dialog Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg">
         <p>
           Following is an example implementation of the <a href="../dialog-modal-pattern.html">Dialog (Modal) Pattern</a>.
           The below <q>Add Delivery Address</q> button opens a modal dialog that contains two buttons that open other dialogs.
diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index 800fde84c1..5b20b6182d 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -27,6 +27,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-disclosure.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/disclosure-image-description.html">Disclosure (Show/Hide) of Image Description</a></li>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index 52b7ba6779..138491d7c8 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -29,6 +29,7 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to create a set of frequently asked questions where the answers may be independently shown or hidden.
         </p>
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index be11dd3788..76f7c835a5 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -29,6 +29,7 @@ <h1>Example Disclosure (Show/Hide) for Image Description</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to provide a way of revealing a table of data that complements an image.
         </p>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 22f14b98ac..31390dbc87 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -38,7 +38,7 @@ <h3>Important</h3>
             <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
           </p>
         </div>
-
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Unlike the other <a href="disclosure-navigation.html">disclosure navigation menu example</a>, this example includes top-level links alongside the disclosure buttons.
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 31f4a59416..75d6c4405e 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -38,6 +38,7 @@ <h3>Important</h3>
             <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.
diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html
index 05c8b32b65..17e7cde1df 100644
--- a/content/patterns/feed/examples/feed.html
+++ b/content/patterns/feed/examples/feed.html
@@ -25,6 +25,7 @@ <h1>Feed Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-feed.svg">
         <p>
           <strong>NOTE:</strong> The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
           This page provides a proposed implementation of a feed component.
diff --git a/content/patterns/feed/feed-pattern.html b/content/patterns/feed/feed-pattern.html
index 9b57aa0ece..eb2aec2ebc 100644
--- a/content/patterns/feed/feed-pattern.html
+++ b/content/patterns/feed/feed-pattern.html
@@ -62,6 +62,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-feed.svg">
         <h2>Example</h2>
         <p>
           <a href="examples/feed.html">Example Implementation of Feed Pattern</a>
diff --git a/content/patterns/grid/examples/advanced-data-grid.html b/content/patterns/grid/examples/advanced-data-grid.html
index eada5f040a..c5d5e9cbbf 100644
--- a/content/patterns/grid/examples/advanced-data-grid.html
+++ b/content/patterns/grid/examples/advanced-data-grid.html
@@ -34,6 +34,7 @@ <h1>Advanced Data Grid</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg">
         <p>
           This example has not yet been developed.
           Development is described in <a href="https://github.com/w3c/aria-practices/issues/155">issue 155.</a>
diff --git a/content/patterns/grid/examples/data-grids.html b/content/patterns/grid/examples/data-grids.html
index bf554231ac..e7605b3b70 100644
--- a/content/patterns/grid/examples/data-grids.html
+++ b/content/patterns/grid/examples/data-grids.html
@@ -33,6 +33,7 @@ <h1>Data Grid Examples</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg">
         <p>
           Following are three example implementations of the <a href="../grid-pattern.html">Grid Pattern</a> that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information.
           Each of the following three grids presents a set of financial transactions.
diff --git a/content/patterns/grid/examples/layout-grids.html b/content/patterns/grid/examples/layout-grids.html
index 7034aaf57a..2f8d4c8007 100644
--- a/content/patterns/grid/examples/layout-grids.html
+++ b/content/patterns/grid/examples/layout-grids.html
@@ -31,6 +31,7 @@ <h1>Layout Grid Examples</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg">
         <p>
           The following examples demonstrate how the <a href="../grid-pattern.html">Grid Pattern</a> can be used to group a collection of interactive widgets into a single tab stop.
           In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate between them with the arrow keys.
diff --git a/content/patterns/grid/grid-pattern.html b/content/patterns/grid/grid-pattern.html
index 5a61895fe1..e03f6b969e 100644
--- a/content/patterns/grid/grid-pattern.html
+++ b/content/patterns/grid/grid-pattern.html
@@ -52,6 +52,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-grid.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/layout-grids.html">Layout Grid Examples</a>: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.</li>
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
index df1e505683..a8d16e7891 100644
--- a/content/patterns/landmarks/landmarks-pattern.html
+++ b/content/patterns/landmarks/landmarks-pattern.html
@@ -37,6 +37,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-landmarks.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/main.html">Main Landmark Example</a></li>
diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html
index 05c20153dc..b482ab957d 100644
--- a/content/patterns/link/examples/link.html
+++ b/content/patterns/link/examples/link.html
@@ -29,6 +29,7 @@ <h1>Link Examples</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-link.svg">
         <p>
           The examples below demonstrate three variations of the <a href="../link-pattern.html">Link Pattern</a>.
           The link pattern is used when it is necessary for elements other than the HTML <code>a</code> element to have link behaviors.
diff --git a/content/patterns/link/link-pattern.html b/content/patterns/link/link-pattern.html
index 8f80e94e99..0291fdb235 100644
--- a/content/patterns/link/link-pattern.html
+++ b/content/patterns/link/link-pattern.html
@@ -31,6 +31,7 @@ <h3>note</h3>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-link.svg">
         <h2>Examples</h2>
         <p><a href="examples/link.html">Link Examples</a>: Link widgets constructed from HTML <code>span</code> and <code>img</code> elements.</p>
       </section>
diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
index bc27a2729c..8e0c52866a 100644
--- a/content/patterns/listbox/examples/listbox-collapsible.html
+++ b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -37,6 +37,7 @@ <h3>Deprecation Warning</h3>
             The <a href="../../combobox/examples/combobox-select-only.html">select-only combobox</a> should be used as an alternative to this pattern.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML <code>select</code> input with the attribute <code>size="1"</code>.
           The widget consists of a button that triggers the display of a listbox.
diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html
index 8718204fed..7c5f7a382b 100644
--- a/content/patterns/listbox/examples/listbox-grouped.html
+++ b/content/patterns/listbox/examples/listbox-grouped.html
@@ -30,6 +30,7 @@ <h1>Listbox Example with Grouped Options</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a single-select listbox widget with grouped options.
           This widget is functionally similar to an HTML <code>select</code> element with <code>size</code> greater than 1 and options grouped into categories with labeled <code>optgroup</code> elements.
diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html
index 88d29d9a3d..5e42f94967 100644
--- a/content/patterns/listbox/examples/listbox-rearrangeable.html
+++ b/content/patterns/listbox/examples/listbox-rearrangeable.html
@@ -31,6 +31,7 @@ <h1>Example Listboxes with Rearrangeable Options</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following two example implementations of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrate differences between single-select and multi-select functionality.
           In both examples, users can use action buttons to move options from one list to another.
diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 3dbb24ce3a..4993432da1 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -30,6 +30,7 @@ <h1>Scrollable Listbox Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a scrollable single-select listbox widget.
           This widget is functionally similar to an HTML <code>select</code> input where the <code>size</code> attribute has a value greater than one.
diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html
index a85f5d6b59..477e3bac18 100644
--- a/content/patterns/listbox/listbox-pattern.html
+++ b/content/patterns/listbox/listbox-pattern.html
@@ -47,6 +47,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-listbox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
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 0e0a2df07c..3a3076574b 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
@@ -29,6 +29,7 @@ <h1>Actions Menu Button Example Using aria-activedescendant</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg">
         <p>
           This example demonstrates how the <a href="../menu-button-pattern.html">Menu Button Pattern</a> can be used to create a button that opens an actions menu.
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html
index 300c429428..fd60e040bd 100644
--- a/content/patterns/menu-button/examples/menu-button-actions.html
+++ b/content/patterns/menu-button/examples/menu-button-actions.html
@@ -29,6 +29,7 @@ <h1>Actions Menu Button Example Using <code>element.focus()</code></h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg">
         <p>
           This example demonstrates how the <a href="../menu-button-pattern.html">Menu Button Pattern</a> can be used to create a button that opens an actions menu.
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html
index e1b32731bd..fe63617d81 100644
--- a/content/patterns/menu-button/examples/menu-button-links.html
+++ b/content/patterns/menu-button/examples/menu-button-links.html
@@ -29,6 +29,7 @@ <h1>Navigation Menu Button Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg">
         <p>
           This example demonstrates the <a href="../menu-button-pattern.html">Menu Button Pattern</a> for a button that displays a menu of link targets.
           The menu items are made from HTML links, so they maintain their HTML link behaviors.
diff --git a/content/patterns/menu-button/menu-button-pattern.html b/content/patterns/menu-button/menu-button-pattern.html
index 950768b9bd..96fb75e84e 100644
--- a/content/patterns/menu-button/menu-button-pattern.html
+++ b/content/patterns/menu-button/menu-button-pattern.html
@@ -25,6 +25,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-menu-button.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/menu-button-actions-active-descendant.html">Action Menu Button Example Using aria-activedescendant</a>: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.</li>
diff --git a/content/patterns/menubar/examples/menubar-editor.html b/content/patterns/menubar/examples/menubar-editor.html
index 747b3e3c21..9366156c1f 100644
--- a/content/patterns/menubar/examples/menubar-editor.html
+++ b/content/patterns/menubar/examples/menubar-editor.html
@@ -30,6 +30,7 @@ <h1>Editor Menubar Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menubar.svg">
         <p>
           The following example demonstrates using the <a href="../menu-and-menubar-pattern.html">Menubar Pattern</a> to provide access to editing actions for a text area.
           Each item in the menubar identifies a category of text formatting actions that can be executed from its submenu.
diff --git a/content/patterns/menubar/examples/menubar-navigation.html b/content/patterns/menubar/examples/menubar-navigation.html
index f0c2114e22..07a741a9d7 100644
--- a/content/patterns/menubar/examples/menubar-navigation.html
+++ b/content/patterns/menubar/examples/menubar-navigation.html
@@ -40,6 +40,7 @@ <h3>Caution!</h3>
             </li>
           </ul>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menubar.svg">
         <p>
           The following implementation of the <a href="../menu-and-menubar-pattern.html">Menubar Pattern</a> demonstrates how a menubar can provide navigation menus.
           The parent menu items in the menubar represent a section of a mythical university web site and open a submenu containing menu items that link to pages within that section.
diff --git a/content/patterns/menubar/menu-and-menubar-pattern.html b/content/patterns/menubar/menu-and-menubar-pattern.html
index d3cf541029..e55e358899 100644
--- a/content/patterns/menubar/menu-and-menubar-pattern.html
+++ b/content/patterns/menubar/menu-and-menubar-pattern.html
@@ -34,6 +34,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-menubar.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/menubar-editor.html">Editor Menubar Example</a>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.</li>
diff --git a/content/patterns/meter/examples/meter.html b/content/patterns/meter/examples/meter.html
index 3597d6453a..042e8c8334 100644
--- a/content/patterns/meter/examples/meter.html
+++ b/content/patterns/meter/examples/meter.html
@@ -30,6 +30,7 @@ <h1>Meter Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-meter.svg">
         <p>The following example of a CPU meter demonstrates the <a href="../meter-pattern.html">Meter Pattern</a>.</p>
       </section>
 
diff --git a/content/patterns/meter/meter-pattern.html b/content/patterns/meter/meter-pattern.html
index fb7cc6f5ec..5c0b424e44 100644
--- a/content/patterns/meter/meter-pattern.html
+++ b/content/patterns/meter/meter-pattern.html
@@ -35,6 +35,7 @@ <h3>Note</h3>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-meter.svg">
         <h2>Example</h2>
         <p><a href="examples/meter.html">Meter Example</a></p>
       </section>
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index 97a3732e8a..23bc38bfb1 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -1,12 +1,380 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Patterns</title>
-</head>
-<body>
-  In a future iteration this file will contain a list of all patterns.
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Patterns</title>
+
+    <!-- Core JS and CSS for the patterns page -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../shared/css/core.css">
+    <script src="../shared/js/highlight.pack.js"></script>
+    <script src="../shared/js/app.js"></script>
+    <script src="../shared/js/skipto.js"></script>
+  </head>
+  <body>
+    <h1>Patterns</h1>
+    <ul class="tiles">
+      <li class="tile">
+        <a href="accordion/accordion-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-accordion.svg">
+            <span>Accordion (Sections With Show/Hide Functionality)</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="alert/alert-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-alert.svg">
+            <span>Alert</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="alertdialog/alertdialog-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-alertdialog.svg">
+            <span>Alert and Message Dialogs</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="breadcrumb/breadcrumb-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-breadcrumb.svg">
+            <span>Breadcrumb</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="button/button-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-button.svg">
+            <span>Button</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="carousel/carousel-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-carousel.svg">
+            <span>Carousel (Slide Show or Image Rotator)</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="checkbox/checkbox-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-checkbox.svg">
+            <span>Checkbox</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="combobox/combobox-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-combobox.svg">
+            <span>Combobox</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A combobox is an input widget that has an associated popup.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="dialog-modal/dialog-modal-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-dialog-modal.svg">
+            <span>Dialog (Modal)</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A dialog is a window overlaid on either the primary window or another dialog window.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="disclosure/disclosure-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-disclosure.svg">
+            <span>Disclosure (Show/Hide)</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="feed/feed-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-feed.svg">
+            <span>Feed</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A feed is a section of a page that automatically loads new sections of content as the user scrolls.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="grid/grid-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-grid.svg">
+            <span>Grid (Interactive Tabular Data and Layout Containers)</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="landmarks/landmarks-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-landmarks.svg">
+            <span>Landmarks</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          Landmarks are a set of eight roles that identify the major sections of a page.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="link/link-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-link.svg">
+            <span>Link</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A link widget provides an interactive reference to a resource.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="listbox/listbox-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-listbox.svg">
+            <span>Listbox</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A listbox widget presents a list of options and allows a user to select one or more of them.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="menubar/menu-and-menubar-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-menubar.svg">
+            <span>Menu and Menubar</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="menu-button/menu-button-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-menu-button.svg">
+            <span>Menu Button</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="meter/meter-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-meter.svg">
+            <span>Meter</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A meter is a graphical display of a numeric value that varies within a defined range.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="radio/radio-group-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-radio.svg">
+            <span>Radio Group</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="slider/slider-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-slider.svg">
+            <span>Slider</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A slider is an input where the user selects a value from within a given range.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="slider-multithumb/slider-multithumb-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-slider-multithumb.svg">
+            <span>Slider (Multi-Thumb)</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="spinbutton/spinbutton-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-spinbutton.svg">
+            <span>Spinbutton</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A spinbutton is an input widget that restricts its value to a set or range of discrete values.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="switch/switch-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-switch.svg">
+            <span>Switch</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A switch is an input widget that allows users to choose one of two values: on or off.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="table/table-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-table.svg">
+            <span>Table</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="tabs/tabs-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-tabs.svg">
+            <span>Tabs</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="toolbar/toolbar-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-toolbar.svg">
+            <span>Toolbar</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="tooltip/tooltip-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-tooltip.svg">
+            <span>Tooltip</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="treeview/treeview-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-treeview.svg">
+            <span>Tree View</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A tree view widget presents a hierarchical list.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="treegrid/treegrid-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-treegrid.svg">
+            <span>Treegrid</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="windowsplitter/windowsplitter-pattern.html">
+          <h2 class="tile-name">
+            <img alt="" src="../images/pattern-windowsplitter.svg">
+            <span>Window Splitter</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
+        </div>
+      </li>
+    </ul>
+  </body>
 </html>
diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html
index 6e3276971d..24d432496a 100644
--- a/content/patterns/radio/examples/radio-activedescendant.html
+++ b/content/patterns/radio/examples/radio-activedescendant.html
@@ -29,6 +29,7 @@ <h1>Radio Group Example Using aria-activedescendant</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
         <p>
           This example implements the features of the <a href="../radio-group-pattern.html">Radio Group Pattern</a> for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method.
           This implementation uses <code>aria-activedescendant</code> for informing assistive technologies which radio button has visual focus.
diff --git a/content/patterns/radio/examples/radio-rating.html b/content/patterns/radio/examples/radio-rating.html
index 8e47821079..6be2fc6161 100644
--- a/content/patterns/radio/examples/radio-rating.html
+++ b/content/patterns/radio/examples/radio-rating.html
@@ -29,6 +29,7 @@ <h1>Rating Radio Group Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
         <p>
           Following is an example of a rating input that demonstrates the <a href="../radio-group-pattern.html">Radio Group Pattern.</a>
           The rating is indicated by the number of stars selected by the user.
diff --git a/content/patterns/radio/examples/radio.html b/content/patterns/radio/examples/radio.html
index d0edb2196f..1026baf80c 100644
--- a/content/patterns/radio/examples/radio.html
+++ b/content/patterns/radio/examples/radio.html
@@ -29,6 +29,7 @@ <h1>Radio Group Example Using Roving tabindex</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
         <p>
           This example implements the features of the <a href="../radio-group-pattern.html">Radio Group Pattern</a> for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method.
           This implementation uses a roving tabindex for managing focus within the radio group.
diff --git a/content/patterns/radio/radio-group-pattern.html b/content/patterns/radio/radio-group-pattern.html
index 04f0f89be2..e29917ec9d 100644
--- a/content/patterns/radio/radio-group-pattern.html
+++ b/content/patterns/radio/radio-group-pattern.html
@@ -25,6 +25,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-radio.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/radio.html">Radio Group Example Using Roving tabindex</a></li>
diff --git a/content/patterns/slider-multithumb/examples/slider-multithumb.html b/content/patterns/slider-multithumb/examples/slider-multithumb.html
index 0ed5d74fce..2a24a2bd2a 100644
--- a/content/patterns/slider-multithumb/examples/slider-multithumb.html
+++ b/content/patterns/slider-multithumb/examples/slider-multithumb.html
@@ -38,6 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider-multithumb.svg">
         <p>
           The following example of the <a href="../slider-multithumb-pattern.html">Multi-Thumb Slider Pattern</a> demonstrates an input for setting a pair of values that represent a range.
           This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.
diff --git a/content/patterns/slider-multithumb/slider-multithumb-pattern.html b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
index 7e579c8c78..c9cd78d5ff 100644
--- a/content/patterns/slider-multithumb/slider-multithumb-pattern.html
+++ b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
@@ -39,6 +39,7 @@ <h3>Warning</h3>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-slider-multithumb.svg">
         <h2>Example</h2>
         <p><a href="examples/slider-multithumb.html">Horizontal Multi-Thumb Slider Example</a>: Demonstrates a two-thumb slider for picking a price range for a hotel reservation.</p>
       </section>
diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html
index e2b6c4cb5b..867dd0c16d 100644
--- a/content/patterns/slider/examples/slider-color-viewer.html
+++ b/content/patterns/slider/examples/slider-color-viewer.html
@@ -38,6 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           Following is an example of a color viewer that demonstrates the <a href="../slider-pattern.html">Slider Pattern</a>.
           Change the background of the color view box by adjusting the sliders for red, green, and blue values.
diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html
index a23f5dfa74..e6eeb74a66 100644
--- a/content/patterns/slider/examples/slider-rating.html
+++ b/content/patterns/slider/examples/slider-rating.html
@@ -38,6 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           Following is an example of a rating input that demonstrates the <a href="../slider-pattern.html">Slider Pattern</a>.
           This rating widget employs a slider because the slider pattern supports step values of any size.
diff --git a/content/patterns/slider/examples/slider-seek.html b/content/patterns/slider/examples/slider-seek.html
index bb565b6558..91f61c5082 100644
--- a/content/patterns/slider/examples/slider-seek.html
+++ b/content/patterns/slider/examples/slider-seek.html
@@ -38,6 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           The following example of the <a href="../slider-pattern.html">Slider Pattern</a> illustrates a seek control that could be used to move the current play position in an audio or video media player.
           The example demonstrates how to use <code>aria-valuetext</code> to provide assistive technology users with meaningful names for numeric values.
diff --git a/content/patterns/slider/examples/slider-temperature.html b/content/patterns/slider/examples/slider-temperature.html
index 48df5f802c..2d8c79ad15 100644
--- a/content/patterns/slider/examples/slider-temperature.html
+++ b/content/patterns/slider/examples/slider-temperature.html
@@ -38,6 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           The following example is a vertically oriented temperature control that implements the <a href="../slider-pattern.html">Slider Pattern</a>.
           The slider illustrates use of <code>aria-orientation</code> to specify vertical orientation and use of <code>aria-valuetext</code> to convey unit of measure for numeric values to assistive technology users by appending <q>degrees Celsius</q> to the current value.
diff --git a/content/patterns/slider/slider-pattern.html b/content/patterns/slider/slider-pattern.html
index 6045f7b5ad..c8cc0d5ddd 100644
--- a/content/patterns/slider/slider-pattern.html
+++ b/content/patterns/slider/slider-pattern.html
@@ -34,6 +34,7 @@ <h3>Warning</h3>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-slider.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/slider-color-viewer.html">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
diff --git a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
index 473e6308cf..85b7a30218 100644
--- a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
+++ b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
@@ -31,6 +31,7 @@ <h1>Date Picker Spin Button Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-spinbutton.svg">
         <p>
           The following example uses the <a href="../spinbutton-pattern.html">Spin Button Pattern</a> to implement a date picker.
           It includes three spin buttons: one for setting the day, a second for month, and a third for year.
diff --git a/content/patterns/spinbutton/spinbutton-pattern.html b/content/patterns/spinbutton/spinbutton-pattern.html
index 51a8693abf..4cdc382a15 100644
--- a/content/patterns/spinbutton/spinbutton-pattern.html
+++ b/content/patterns/spinbutton/spinbutton-pattern.html
@@ -34,6 +34,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-spinbutton.svg">
         <h2>Example</h2>
         <p><a href="examples/datepicker-spinbuttons.html">Date Picker Spin Button Example:</a> Illustrates a date picker made from three spin buttons for day, month, and year.</p>
       </section>
diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html
index b8d05712ee..9c21b13302 100644
--- a/content/patterns/switch/examples/switch-button.html
+++ b/content/patterns/switch/examples/switch-button.html
@@ -29,6 +29,7 @@ <h1>Switch Example Using HTML Button</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg">
         <p>
           This example illustrates implementing the <a href="../switch-pattern.html">Switch Pattern</a> with an HTML <code>button</code> as a switch element and using an <code>SVG</code> element to provide graphical rendering of switch states.
           It also demonstrates using the <code>group</code> role to present multiple switches in a labeled group.
diff --git a/content/patterns/switch/examples/switch-checkbox.html b/content/patterns/switch/examples/switch-checkbox.html
index 49b364e323..fded8231c6 100644
--- a/content/patterns/switch/examples/switch-checkbox.html
+++ b/content/patterns/switch/examples/switch-checkbox.html
@@ -29,6 +29,7 @@ <h1>Switch Example Using HTML Checkbox Input</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg">
         <p>
           This example illustrates implementing the <a href="../switch-pattern.html">Switch Pattern</a> with an HTML <code>input[type="checkbox"]</code> as the switch element and using CSS borders to provide graphical rendering of switch states.
           It also demonstrates using the HTML <code>fieldset</code> and <code>legend</code> elements to present multiple switches in a labeled group.
diff --git a/content/patterns/switch/examples/switch.html b/content/patterns/switch/examples/switch.html
index 26165f1ed6..bf8aa0301e 100644
--- a/content/patterns/switch/examples/switch.html
+++ b/content/patterns/switch/examples/switch.html
@@ -29,6 +29,7 @@ <h1>Switch Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg">
         <p>
           This example illustrates implementation of the <a href="../switch-pattern.html">Switch Pattern</a> for a notification preferences control.
           It uses a <code>div</code> element for the switch and CSS borders to provide graphical rendering of switch states.
diff --git a/content/patterns/switch/switch-pattern.html b/content/patterns/switch/switch-pattern.html
index 4571fea601..af02a1ce91 100644
--- a/content/patterns/switch/switch-pattern.html
+++ b/content/patterns/switch/switch-pattern.html
@@ -37,6 +37,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-switch.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/switch.html">Switch Example</a>: A switch based on a <code>div</code> element that turns a notification preference on and off.</li>
diff --git a/content/patterns/table/examples/sortable-table.html b/content/patterns/table/examples/sortable-table.html
index 15d5accd92..53a88fde61 100644
--- a/content/patterns/table/examples/sortable-table.html
+++ b/content/patterns/table/examples/sortable-table.html
@@ -29,6 +29,7 @@ <h1>Sortable Table Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-table.svg">
         <p>
           The example below illustrates an implementation of the <a href="../table-pattern.html">Table Pattern</a> for a table with sortable rows.
           The example uses HTML table markup for all elements of the table structure, e.g., cells, rows, column headers, and caption.
diff --git a/content/patterns/table/examples/table.html b/content/patterns/table/examples/table.html
index ed8357c607..f717330760 100644
--- a/content/patterns/table/examples/table.html
+++ b/content/patterns/table/examples/table.html
@@ -28,6 +28,7 @@ <h1>Table Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-table.svg">
         <p>
           The below example illustrates an implementation of the WAI-ARIA <a href="../table-pattern.html">Table Pattern.</a>
           Note that when possible, using a native HTML <code>table</code> element is recommended.
diff --git a/content/patterns/table/table-pattern.html b/content/patterns/table/table-pattern.html
index b2a99ed0b9..1dbed1c9a0 100644
--- a/content/patterns/table/table-pattern.html
+++ b/content/patterns/table/table-pattern.html
@@ -37,6 +37,7 @@ <h3>Note</h3>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-table.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/table.html">Table Example</a>: ARIA table made using HTML <code>div</code> and <code>span</code> elements.</li>
diff --git a/content/patterns/tabs/examples/tabs-automatic.html b/content/patterns/tabs/examples/tabs-automatic.html
index d46aa0f0b9..96caf79edc 100644
--- a/content/patterns/tabs/examples/tabs-automatic.html
+++ b/content/patterns/tabs/examples/tabs-automatic.html
@@ -29,6 +29,7 @@ <h1>Example of Tabs with Automatic Activation</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg">
         <p>
           This example section demonstrates a tabs widget that implements the <a href="../tabs-pattern.html">Tabs Pattern</a>.
           In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus.
diff --git a/content/patterns/tabs/examples/tabs-manual.html b/content/patterns/tabs/examples/tabs-manual.html
index a558f049dc..e87d56654e 100644
--- a/content/patterns/tabs/examples/tabs-manual.html
+++ b/content/patterns/tabs/examples/tabs-manual.html
@@ -29,6 +29,7 @@ <h1>Example of Tabs with Manual Activation</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg">
         <p>
           The below example section demonstrates a tabs widget that implements the <a href="../tabs-pattern.html">Tabs Pattern</a>.
           In this example, a panel is displayed when users activate its tab with either <kbd>Space</kbd>, <kbd>Enter</kbd>, or a mouse click.
diff --git a/content/patterns/tabs/tabs-pattern.html b/content/patterns/tabs/tabs-pattern.html
index d77bd8168d..150a87419e 100644
--- a/content/patterns/tabs/tabs-pattern.html
+++ b/content/patterns/tabs/tabs-pattern.html
@@ -41,6 +41,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-tabs.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/tabs-automatic.html">Tabs With Automatic Activation</a>: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.</li>
diff --git a/content/patterns/toolbar/examples/toolbar.html b/content/patterns/toolbar/examples/toolbar.html
index 0a7967ee11..611c2091a3 100644
--- a/content/patterns/toolbar/examples/toolbar.html
+++ b/content/patterns/toolbar/examples/toolbar.html
@@ -36,6 +36,7 @@ <h1>Toolbar Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-toolbar.svg">
         <p>
           The following example of an editor toolbar implements the <a href="../toolbar-pattern.html">Toolbar Pattern</a> and demonstrates how a toolbar can group a set of interactive widgets into a single tab stop.
           For illustrative and interoperability assessment purposes, this implementation includes a diverse set of widgets, some of which may not be ordinarily grouped in the same toolbar.
diff --git a/content/patterns/toolbar/toolbar-pattern.html b/content/patterns/toolbar/toolbar-pattern.html
index 53e1d1a61f..fe90633b3f 100644
--- a/content/patterns/toolbar/toolbar-pattern.html
+++ b/content/patterns/toolbar/toolbar-pattern.html
@@ -49,6 +49,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-toolbar.svg">
         <h2>Example</h2>
         <p><a href="examples/toolbar.html">Toolbar Example</a>: A toolbar that uses roving tabindex to manage focus and contains several types of controls, including toggle buttons, radio buttons, a menu button, a spin button, a checkbox, and a link.</p>
       </section>
diff --git a/content/patterns/tooltip/tooltip-pattern.html b/content/patterns/tooltip/tooltip-pattern.html
index 4628c4383a..8765296b9e 100644
--- a/content/patterns/tooltip/tooltip-pattern.html
+++ b/content/patterns/tooltip/tooltip-pattern.html
@@ -33,6 +33,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-tooltip.svg">
         <h2>Example</h2>
         <p>Work to develop a tooltip example is tracked by <a href="https://github.com/w3c/aria-practices/issues/127">issue 127.</a></p>
       </section>
diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html
index 9f126f1998..8a4646e701 100644
--- a/content/patterns/treegrid/examples/treegrid-1.html
+++ b/content/patterns/treegrid/examples/treegrid-1.html
@@ -50,6 +50,7 @@ <h1>Treegrid Email Inbox Example</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treegrid.svg">
         <p>The following example demonstrates how the <a href="../treegrid-pattern.html">Treegrid Pattern</a> can be used to make an interactive tree that enables users to both navigate the hierarchical structure of email conversations and also navigate elements that describe each email, such as subject and sender.</p>
         <p>Similar examples include:</p>
         <ul>
diff --git a/content/patterns/treegrid/treegrid-pattern.html b/content/patterns/treegrid/treegrid-pattern.html
index a53ad1a8c1..1bf4f0c416 100644
--- a/content/patterns/treegrid/treegrid-pattern.html
+++ b/content/patterns/treegrid/treegrid-pattern.html
@@ -42,6 +42,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-treegrid.svg">
         <h2>Example</h2>
         <p><a href="examples/treegrid-1.html">E-mail Inbox <code>treegrid</code> Example</a>: A treegrid for navigating an e-mail inbox that demonstrates three keyboard navigation models -- rows first, cells first, and cells only.</p>
       </section>
diff --git a/content/patterns/treeview/examples/treeview-1a.html b/content/patterns/treeview/examples/treeview-1a.html
index b9c13d661f..0372b614e8 100644
--- a/content/patterns/treeview/examples/treeview-1a.html
+++ b/content/patterns/treeview/examples/treeview-1a.html
@@ -32,6 +32,7 @@
       <h1>File Directory Treeview Example Using Computed Properties</h1>
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg">
         <p>
           The following example implementation of the <a href="../treeview-pattern.html">Tree View Pattern</a> simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer.
           In the <q>My Documents</q> tree, each parent node represents a folder and each end node represents a file.
diff --git a/content/patterns/treeview/examples/treeview-1b.html b/content/patterns/treeview/examples/treeview-1b.html
index 696f1b9571..907d358309 100644
--- a/content/patterns/treeview/examples/treeview-1b.html
+++ b/content/patterns/treeview/examples/treeview-1b.html
@@ -32,6 +32,7 @@
       <h1>File Directory Treeview Example Using Declared Properties</h1>
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg">
         <p>
           The following example implementation of the <a href="../treeview-pattern.html">Tree View Pattern</a> simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer.
           In the <q>My Documents</q> tree, each parent node represents a folder and each end node represents a file.
diff --git a/content/patterns/treeview/examples/treeview-navigation.html b/content/patterns/treeview/examples/treeview-navigation.html
index 43f08c5ce8..fe61eff568 100644
--- a/content/patterns/treeview/examples/treeview-navigation.html
+++ b/content/patterns/treeview/examples/treeview-navigation.html
@@ -37,6 +37,7 @@ <h3>Caution!</h3>
             <li>A pattern more suited for typical site navigation with expandable groups of links is the <a href="../../disclosure/disclosure-pattern.html">disclosure pattern.</a></li>
           </ul>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg">
         <p>
           The below example demonstrates how the <a href="../treeview-pattern.html">Tree View Pattern</a> can be used to build a navigation tree for a set of hierarchically organized web pages.
           It illustrates navigation of a mythical university web site that is comparable to the navigation illustrated in the
diff --git a/content/patterns/treeview/treeview-pattern.html b/content/patterns/treeview/treeview-pattern.html
index f7c0af88bc..328de9e603 100644
--- a/content/patterns/treeview/treeview-pattern.html
+++ b/content/patterns/treeview/treeview-pattern.html
@@ -36,6 +36,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-treeview.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/treeview-1a.html">File Directory Treeview Example Using Computed Properties</a>: A file selector tree that demonstrates browser support for automatically computing <code>aria-level</code>, <code>aria-posinset</code> and <code>aria-setsize</code> based on DOM structure.</li>
diff --git a/content/patterns/windowsplitter/windowsplitter-pattern.html b/content/patterns/windowsplitter/windowsplitter-pattern.html
index afd6590343..00e6239df3 100644
--- a/content/patterns/windowsplitter/windowsplitter-pattern.html
+++ b/content/patterns/windowsplitter/windowsplitter-pattern.html
@@ -42,6 +42,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="example">
+        <img alt="" src="../../images/pattern-windowsplitter.svg">
         <h2>Example</h2>
         <p>Work to develop an example window splitter widget is tracked by <a href="https://github.com/w3c/aria-practices/issues/130">issue 130.</a></p>
       </section>
diff --git a/content/practices/practices.html b/content/practices/practices.html
index 7c4fac74bd..c045acebc1 100644
--- a/content/practices/practices.html
+++ b/content/practices/practices.html
@@ -1,12 +1,101 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Practices</title>
-</head>
-<body>
-  In a future iteration this file will contain a list of all practices.
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Practices</title>
+
+    <!-- Core JS and CSS for the practices page -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../shared/css/core.css">
+    <script src="../shared/js/highlight.pack.js"></script>
+    <script src="../shared/js/app.js"></script>
+    <script src="../shared/js/skipto.js"></script>
+  </head>
+  <body>
+    <h1>Practices</h1>
+    <ul class="tiles">
+      <li class="tile">
+        <a href="landmark-regions/landmark-regions-practice.html">
+          <h2 class="tile-name">
+            <span>Landmark Regions</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          ARIA landmark roles provide a powerful way to identify the organization and structure of a web page.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="names-and-descriptions/names-and-descriptions-practice.html">
+          <h2 class="tile-name">
+            <span>Providing Accessible Names and Descriptions</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          Providing elements with accessible names, and where appropriate, accessible descriptions, is one of the most important responsibilities authors have when developing accessible web experiences.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="keyboard-interface/keyboard-interface-practice.html">
+          <h2 class="tile-name">
+            <span>Developing a Keyboard Interface</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          Unlike native HTML form elements, browsers do not provide keyboard support for graphical user interface (GUI) components that are made accessible with ARIA; authors have to provide the keyboard support in their code.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a
+          href="grid-and-table-properties/grid-and-table-properties-practice.html"
+        >
+          <h2 class="tile-name">
+            <span>Grid and Table Properties</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          To fully present and describe a grid or table, in addition to parsing the headers, rows, and cells using the roles described in the grid pattern or table pattern, assistive technologies need to be able to determine other structural and presentation characteristics, such as the number and visibility of rows and columns.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a
+          href="range-related-properties/range-related-properties-practice.html"
+        >
+          <h2 class="tile-name">
+            <span>Communicating Value and Limits for Range Widgets</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          ARIA defines the following roles as range widgets, which means they communicate a value that is typically numeric and constrained to defined limits.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="structural-roles/structural-roles-practice.html">
+          <h2 class="tile-name">
+            <span>Structural Roles</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          ARIA provides a set of roles that convey the accessibility semantics of structures on a page.
+        </div>
+      </li>
+
+      <li class="tile">
+        <a href="hiding-semantics/hiding-semantics-practice.html">
+          <h2 class="tile-name">
+            <span>Hiding Semantics with the&nbsp;<code>presentation</code>&nbsp;Role</span>
+          </h2>
+        </a>
+        <div class="tile-introduction">
+          While ARIA is primarily used to express semantics, there are some situations where hiding an element’s semantics from assistive technologies is helpful.
+        </div>
+      </li>
+    </ul>
+  </body>
 </html>
diff --git a/content/shared/templates/example-usage-warning.html b/content/shared/templates/example-usage-warning.html
index 3d5b202abd..81467adf70 100644
--- a/content/shared/templates/example-usage-warning.html
+++ b/content/shared/templates/example-usage-warning.html
@@ -12,15 +12,15 @@
       <ul>
         <li>
           There may be support gaps in some
-          <a href="../../../practices/read-me-first/read-me-first-practice.html#browser_and_AT_support">browser and assistive technology combinations</a>,
+          <a href="../../practices/read-me-first/read-me-first-practice.html#browser_and_AT_support">browser and assistive technology combinations</a>,
           especially for
-          <a href="../../../practices/read-me-first/read-me-first-practice.html#mobile_and_touch_support">mobile/touch devices</a>.
+          <a href="../../practices/read-me-first/read-me-first-practice.html#mobile_and_touch_support">mobile/touch devices</a>.
           Testing code based on this example with assistive technologies is essential before considering use in production systems.
         </li>
         <li>The <a href="https://aria-at.w3.org">ARIA and Assistive Technologies Project</a> is developing measurements of assistive technology support for APG examples.</li>
         <li>
           Robust accessibility can be further optimized by choosing implementation patterns that <a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a> and heeding the warning that
-          <a href="../../../practices/read-me-first/read-me-first-practice.html#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
+          <a href="../../practices/read-me-first/read-me-first-practice.html#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
         </li>
       </ul>
     </details>
diff --git a/content/shared/templates/read-this-first.html b/content/shared/templates/read-this-first.html
new file mode 100644
index 0000000000..348700ae25
--- /dev/null
+++ b/content/shared/templates/read-this-first.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <meta charset="utf-8">
+  <title>Read This First (Template)</title>
+  <body>
+    <div class="read-this-first">
+      <div class="text">
+        <img
+          src="../../images/read-this-first.svg"
+          width="178"
+          alt="Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand"
+        >
+        <h2>Read This First</h2>
+        <p>
+          No ARIA is better than Bad ARIA. Before using any ARIA, <a href="../../practices/read-me-first/read-me-first-practice.html" aria-label="Read this to understand why no ARIA is better than bad ARIA">read this to understand why</a>.
+        </p>
+      </div>
+    </div>
+  </body>
+</html>