diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index eada5a2df..9c567aead 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -606,12 +606,18 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
       </div>
     </div>
     <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <a href="#">Text Link</a>
+      <div class="col my-3">
+        <a href="#">Text Link</a> <span>(default text link behavior)</span>
+        <br><br>
+        <a class="small" href="#">Text Link Small</a> <span>(.small)</span>
+        <br><br>
+        <a class="footer-link" href="#">Footer Link</a> <span>(.footer-link)</span>
+        <br><br>
+        <a class="navigation-link" href="#">Navigation Link</a> <span>(.navigation-link)</span>
       </div>
     </div>
     <div class="row my-4">
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 5e1993716..78e82afcb 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -14,8 +14,33 @@ body {
     color: $blue;
     text-decoration: none;
     border-bottom: 1px solid $blue;
+    line-height: 26px;
+    padding: 0 0 4px 0;
+    font-weight: 500;
     &:hover {
-      color: $blue-400;
+      color: $blue;
+      font-weight: 700;
+    }
+    &.small {
+      line-height: 24px;
+    }
+    &.navigation-link {
+      color: $black;
+      border-bottom: 1px solid $black;
+      line-height: 26px;
+    }
+    &.footer-link {
+      color: $gray-500;
+      text-decoration: none;
+      border-bottom: 1px solid transparent;
+      line-height: 20px;
+      padding: 0 0 2px 0;
+      font-weight: 400;
+      font-size: .75rem;
+      &:hover {
+        border-bottom: 1px solid $gray-500;
+        padding: 0 0 2px 0;
+      }
     }
   }
   .pointer {