diff --git a/packages/design-system/src/components/Links/Links.stories.jsx b/packages/design-system/src/components/Links/Links.stories.jsx
new file mode 100644
index 0000000000..3a6008e6b4
--- /dev/null
+++ b/packages/design-system/src/components/Links/Links.stories.jsx
@@ -0,0 +1,27 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
+
+export default {
+  title: 'Typography/Links',
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+    },
+  },
+};
+
+export const Links = () => (
+  <>
+    <a href="#" className="ds-c-link ds-u-font-size--lg">
+      Link Text
+    </a>
+    <div className="ds-u-padding--1 ds-base--inverse">
+      <a href="#" className="ds-u-font-size--lg ds-c-link ds-c-link--inverse">
+        Link Text
+      </a>
+    </div>
+  </>
+);
diff --git a/packages/design-system/src/styles/base/_link.scss b/packages/design-system/src/styles/base/_link.scss
index 2bd719476f..a7f4409ffc 100644
--- a/packages/design-system/src/styles/base/_link.scss
+++ b/packages/design-system/src/styles/base/_link.scss
@@ -77,6 +77,7 @@ $link-underline-offset: auto !default;
   /* stylelint-enable selector-max-specificity */
 
   &:active {
+    background-color: transparent;
     color: $link-inverse-active-color;
     outline: 0 none;
   }