diff --git a/scss/_link-proxy-demo.scss b/scss/_link-proxy-demo.scss
new file mode 100644
index 0000000..fc19b1c
--- /dev/null
+++ b/scss/_link-proxy-demo.scss
@@ -0,0 +1,151 @@
+// card
+
+.card-list {
+    &__items,
+    &__item {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    &__items {
+        display: flex;
+        flex-direction: row;
+    }
+
+    &__item {
+        margin-right: 1em;
+    }
+}
+
+.card {
+    $block: &;
+
+    display: flex; // to give us control over visual ordering
+    position: relative; /* for a.card__link positioning */
+    width: 17em;
+    flex-direction: column; // stack child elements vertically
+    background-color: $color-white;
+    color: $color-dark;
+    font-family: serif;
+    text-decoration: none;
+    padding: 1em;
+    border: 1px dotted $color-darkgrey;
+    box-shadow: 3px 3px rgba(0, 0, 0, .05);
+
+    // &:focus, // old Edge
+    &:focus-within {
+        outline: .25em solid $color-linkblue;
+        outline-offset: .1em;
+
+        .card__link {
+            outline: none; // only show one outline - on the parent card
+        }
+    }
+
+    > * {
+        order: 2; /* display everything else after the elements with order 0 or 1 */
+    }
+
+    // date
+
+    &__date {
+        order: 1; /* second, above heading */
+        color: $color-midgrey;
+        font-family: sans-serif;
+        font-size: .8em;
+        text-transform: uppercase;
+        margin: 0 0 .25em;
+    }
+
+    // description
+
+    &__description {
+        color: $color-dark-grey;
+        font-size: 1.1em;
+    }
+
+    // image
+
+    &__img {
+        display: block;
+        width: calc(100% + 1em);
+        height: auto;
+        order: 0; /* first, above date */
+        margin: -.5em -.5em 1em;
+    }
+
+    // link
+
+    &__link {
+        color: $color-linkblue;
+        text-decoration: none;
+
+        &:hover,
+        &.link-proxy--hovered {
+            #{$block}__link-inner {
+                text-decoration: none;
+            }
+        }
+    }
+
+    &__link-inner {
+        text-decoration: underline;
+    }
+
+    // tags, non-clickable
+
+    &__tags,
+    &__tag {
+        display: inline-block;
+        font-size: 1em;
+        padding: 0;
+        margin: 0;
+    }
+
+    &__tag {
+        font-family: sans-serif;
+        font-size: .75em;
+        text-transform: uppercase;
+        padding: .25em .4em .15em;
+        border: 1px solid $color-grey;
+        margin-right: .5em;
+
+        &:nth-child(1) {
+            background-color: $color-yellow;
+        }
+
+        &:nth-child(2) {
+            background-color: $color-pink;
+        }
+
+        &:nth-child(3) {
+            background-color: $color-blue;
+        }
+    }
+
+    // title, contains link in non-verbose variant
+
+    &__title {
+        font-size: 2em;
+        font-weight: normal;
+        margin: 0;
+    }
+}
+
+// misc
+
+.visually-hidden {
+    /* stylelint-disable declaration-no-important */
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    overflow: hidden;
+    /* stylelint-enable  declaration-no-important */
+}
+
+abbr {
+    text-decoration: none;
+    cursor: help;
+}
diff --git a/scss/_link-proxy.scss b/scss/_link-proxy.scss
index 363e207..5aeafce 100644
--- a/scss/_link-proxy.scss
+++ b/scss/_link-proxy.scss
@@ -1,5 +1,3 @@
-// link proxy
-
 .link-proxy {
     &--active:not(.link-proxy--selectable) {
         &:hover {
@@ -8,162 +6,10 @@
     }
 
     &--hovered {
-        // see .card__link
+        // style with target link
     }
 
     &--selectable {
         cursor: text;
     }
 }
-
-// card
-
-.card-list {
-    &__items,
-    &__item {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    &__items {
-        display: flex;
-        flex-direction: row;
-    }
-
-    &__item {
-        margin-right: 1em;
-    }
-}
-
-.card {
-    $block: &;
-
-    display: flex; // to give us control over visual ordering
-    position: relative; /* for a.card__link positioning */
-    width: 17em;
-    flex-direction: column; // stack child elements vertically
-    background-color: $color-white;
-    color: $color-dark;
-    font-family: serif;
-    text-decoration: none;
-    padding: 1em;
-    border: 1px dotted $color-darkgrey;
-    box-shadow: 3px 3px rgba(0, 0, 0, .05);
-
-    // &:focus, // old Edge
-    &:focus-within {
-        outline: .25em solid $color-linkblue;
-        outline-offset: .1em;
-
-        .card__link {
-            outline: none; // only show one outline - on the parent card
-        }
-    }
-
-    > * {
-        order: 2; /* display everything else after the elements with order 0 or 1 */
-    }
-
-    // date
-
-    &__date {
-        order: 1; /* second, above heading */
-        color: $color-midgrey;
-        font-family: sans-serif;
-        font-size: .8em;
-        text-transform: uppercase;
-        margin: 0 0 .25em;
-    }
-
-    // description
-
-    &__description {
-        color: $color-dark-grey;
-        font-size: 1.1em;
-    }
-
-    // image
-
-    &__img {
-        display: block;
-        width: calc(100% + 1em);
-        height: auto;
-        order: 0; /* first, above date */
-        margin: -.5em -.5em 1em;
-    }
-
-    // link
-
-    &__link {
-        color: $color-linkblue;
-        text-decoration: none;
-
-        &:hover,
-        &.link-proxy--hovered {
-            #{$block}__link-inner {
-                text-decoration: none;
-            }
-        }
-    }
-
-    &__link-inner {
-        text-decoration: underline;
-    }
-
-    // tags, non-clickable
-
-    &__tags,
-    &__tag {
-        display: inline-block;
-        font-size: 1em;
-        padding: 0;
-        margin: 0;
-    }
-
-    &__tag {
-        font-family: sans-serif;
-        font-size: .75em;
-        text-transform: uppercase;
-        padding: .25em .4em .15em;
-        border: 1px solid $color-grey;
-        margin-right: .5em;
-
-        &:nth-child(1) {
-            background-color: $color-yellow;
-        }
-
-        &:nth-child(2) {
-            background-color: $color-pink;
-        }
-
-        &:nth-child(3) {
-            background-color: $color-blue;
-        }
-    }
-
-    // title, contains link in non-verbose variant
-
-    &__title {
-        font-size: 2em;
-        font-weight: normal;
-        margin: 0;
-    }
-}
-
-// misc
-
-.visually-hidden {
-    /* stylelint-disable declaration-no-important */
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-    /* stylelint-enable  declaration-no-important */
-}
-
-abbr {
-    text-decoration: none;
-    cursor: help;
-}
diff --git a/scss/frontend.scss b/scss/frontend.scss
index bd07d9b..961d3d3 100644
--- a/scss/frontend.scss
+++ b/scss/frontend.scss
@@ -1,5 +1,6 @@
 @import 'accessible-components-variables';
 @import 'shared';
 @import 'link-proxy';
+@import 'link-proxy-demo';
 @import 'listbox';
 @import 'tabbed-carousel';