diff --git a/src/components/01-type/links.njk b/src/components/01-type/links.njk
index 250bfd3cc7..272af34dae 100755
--- a/src/components/01-type/links.njk
+++ b/src/components/01-type/links.njk
@@ -2,7 +2,7 @@
 
 <p><a class="usa-link usa-color-text-visited" href="javascript:void(0);">This</a> is a visited link.</p>
 
-<p>This is a link that goes to an <a class="usa-link usa-external_link" href="https://media.giphy.com/media/8sgNa77Dvj7tC/giphy.gif">external website</a>.</p>
+<p>This is a link that goes to an <a class="usa-link usa-link--external" href="https://media.giphy.com/media/8sgNa77Dvj7tC/giphy.gif">external website</a>.</p>
 
 <div class="usa-background-dark">
   <p><a class="usa-link" href="javascript:void(0);">This</a> is a text link on a dark background.</p>
diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
index 65a5359219..d5220ab1c5 100644
--- a/src/stylesheets/elements/_typography.scss
+++ b/src/stylesheets/elements/_typography.scss
@@ -41,12 +41,12 @@ html {
 // [href^="http:"]:not([href*="my-domain.com"])
 // [href^="https:"]:not([href*="my-domain.com"])
 
-.usa-external-link {
+.usa-link--external {
   @include external-link(external-link, external-link-hover);
-}
 
-.usa-external-link-alt {
-  @include external-link(external-link-alt, external-link-alt-hover);
+  &.usa-link--alt {
+    @include external-link(external-link-alt, external-link-alt-hover);
+  }
 }
 
 // Remove user agent styles