diff --git a/docs/pages/links.md b/docs/pages/links.md
index 10f1726c8e..9b02f7cdbe 100644
--- a/docs/pages/links.md
+++ b/docs/pages/links.md
@@ -116,11 +116,11 @@ variation_groups:
- variation_group_name: Links with icons
variation_group_description: >-
- * An icon should appear after the text it represents.
+ * An icon should appear after the text it represents.
* Each icon should be used exclusively and consistently for one action.
- * The color and font-size of an icon should be the same as the text it represents, including state changes.
+ * The color and font-size of an icon should be the same as the text it represents, including state changes.
* Icons should never be underlined.
variations:
@@ -200,18 +200,6 @@ variation_groups:
{% include icons/left.svg %}
Jump link with icon on left
- - variation_name: Jump link with background modifier
- variation_code_snippet: |-
-
- Jump link with grey background and
- solid borders on small screens
- {% include icons/right.svg %}
-
- variation_description: A grey background is added on small screens.
variation_group_description: Jump links are standalone links that respond to
small screens by converting to full block links that have a
finger-friendly touch area. Reduce screen size to see these in action.
diff --git a/packages/cfpb-typography/cfpb-typography.css b/packages/cfpb-typography/cfpb-typography.css
index 24c06e9319..a25e6ad841 100644
--- a/packages/cfpb-typography/cfpb-typography.css
+++ b/packages/cfpb-typography/cfpb-typography.css
@@ -1 +1 @@
-.a-date{color:#5a5d61;font-size:.875em;font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.07142857em;text-transform:uppercase;white-space:nowrap}.a-heading__icon{color:#101820;font-size:1.125em;font-weight:500;letter-spacing:inherit;line-height:1.25;margin-bottom:.83333333em;text-transform:inherit}a.a-heading__icon{border-color:#101820;border-width:0;color:#101820}a.a-heading__icon.visited,a.a-heading__icon:visited{border-color:#101820;color:#101820}a.a-heading__icon.focus,a.a-heading__icon.hover,a.a-heading__icon:focus,a.a-heading__icon:hover{border-color:#0050b4;color:#0050b4}a.a-heading__icon.active,a.a-heading__icon:active{border-color:#101820;color:#101820}.a-heading__icon .cf-icon{margin-right:.11111111em}.a-link__icon,.a-link__jump{border-bottom-width:0}.a-link__icon .a-link_text,.a-link__jump .a-link_text{border-bottom-style:inherit;border-bottom-width:1px}.a-link__icon.a-link__no-wrap,.a-link__jump.a-link__no-wrap{white-space:nowrap}.a-link__jump{font-weight:500}.a-link__jump.a-link__large{font-size:1.125em}@media only all and (max-width:37.5em){.a-link__jump{border-bottom-width:1px;border-top-width:1px;box-sizing:border-box;display:block;padding-bottom:.625em;padding-top:.625em;position:relative;width:100%}.a-link__jump .a-link_text{border-bottom-width:0}.a-link__jump .cf-icon-svg{bottom:50%;margin-bottom:-.6em;position:absolute}.a-link__jump.a-link__icon-after-text{padding-right:1.25em}.a-link__jump.a-link__icon-after-text .cf-icon-svg{right:0}.a-link__jump.a-link__icon-before-text{padding-left:1.25em}.a-link__jump.a-link__icon-before-text .cf-icon-svg{left:0}.a-link__jump.a-link__bg{background:#f7f8f9;border:solid #b4b5b6;border-width:1px 0}.a-link__jump.a-link__bg.a-link__icon-after-text .cf-icon-svg{right:1em}.a-link__jump.a-link__bg.a-link__icon-before-text .cf-icon-svg{left:1em}.a-link__jump.a-link__bg.a-link__icon-after-text{padding-left:1em;padding-right:2.25em}.a-link__jump.a-link__bg.a-link__icon-before-text{padding-left:2.25em;padding-right:1em}}.u-block-link{border-bottom-width:1px;border-top-width:1px;box-sizing:border-box;display:block;padding-bottom:.625em;padding-top:.625em;width:100%}.u-block-link .a-link_text{border-bottom-width:0}.a-micro-copy{color:#101820;font-size:.875em}.a-tagline{grid-column-gap:10px;display:grid;font-size:.75rem;grid-template-columns:22px 1fr}.a-tagline_text{display:inline-block}.a-tagline .u-usa-flag{margin-top:1px}.a-tagline__large{font-size:1rem}.a-tagline__large .u-usa-flag{margin-top:4px}.a-tagline__xlarge{grid-column-gap:30px;font-size:1.625rem;grid-template-columns:40px 1fr}.a-tagline__xlarge .u-usa-flag{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAqCAMAAAATdiw4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADlQTFRF////sxlC2YyhCjFhKUt1R2WJGT5rhZiwOFh/Zn6co7LEdYum0djhV3GS8PL1wszYsr/O4OXrlKW6gKQKnwAAAUhJREFUeNrslM2OwzAIhN2OHf/HSd//YXfYqGroZWWUS9XlgPgOGRmY4IAFjOXIr/Qsb5PhkEbglzHy4zAS3tkg6CIFWqNAdCKoeV7Qp4SIEJhS8iFohpsNGVVxGciuAH7f/ZlhEUzo0TNiZ1mrZoNgXuVlrcnLVnmZ5vtkcIYj0x6lMOXhl0WzYSmM2DrQG7frS/Fnhk2wrlTxa2U5hmZDy6kE9lkruw0lea/ZsJTkHjTyvtPIj8PYiucF6WVk9M7062rNNmNvjuOqbpPByfhebFpKQj6MnFnGqNkgWNftaeRNFvvGhuMwKj28bUz1MPaZbTOMTX65s7GfDKOgEyPLHURrmi2CD7DR3tmslF6z4U8JcvcOIxfH6//GhqV0qiBzaghdWtU8LRj+iOmWvzBuF8cHCH5h3C+OD9jy5S3/H4cvOA4/AgwAabgYexE/bU4AAAAASUVORK5CYII=");height:21px;margin-top:6px;width:40px}@media only all and (max-width:37.5em){.a-tagline__xlarge{grid-row-gap:30px;font-size:1.375rem;grid-template-columns:none;grid-template-rows:22px 1fr}}.u-usa-flag{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAZCAMAAABAf11LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5QTFRF////sxlC7MbQ2YyhxlNxCjFhR2WJV3GSKUt1dYumOFh/GT5rhZiwwszYsr/OlKW6Zn6c0djh8PL1iR9Ko7LE4OXrl0pttKC0pXWRtYKbSuJhRQAAANFJREFUeNrkkctuwyAUREnSuW/ApHYf//+jBVdZVcJi3aORgAXcMyLBAAJEzsVG3m8TkifyI3zfPQ6nJJLo421CArSBmkgjNEWtQE4zXJmClXuCWIlU5hdQxCqbqnE1KdIz79CVDvBwZxyKfQfmHTyzl01UZSvOWSTbhZLSWeDMufWLC/1ls3amT4qQq394EjIjApxBT+/nr8eEBNuKcB9SWMpmEXalNOylmlUZNTr4vE/4VdKhpC+leQf6y/e0wzL3RdJtkfUJyzwW+ZcdfgQYAJmJD3zerW6OAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:contain;display:inline-block;height:13px;width:24px}.m-list__horizontal,.m-list__links,.m-list__unstyled{list-style-type:none;padding-left:0}.m-list__horizontal .m-list_item,.m-list__links .m-list_item,.m-list__unstyled .m-list_item{margin-left:0}.m-list__spaced .m-list__spaced,.m-list__spaced .m-list_item+.m-list_item{margin-top:1.5em}.m-list__horizontal .m-list_item{display:inline-block;margin-bottom:0;margin-right:.25em}@media only all and (max-width:37.5em){.m-list__links .m-list_item{margin-bottom:0}.m-list__links .m-list_item:nth-child(n+2) .m-list_link{border-top-width:0}}.m-list__links .m-list_link{font-weight:500}@media only all and (max-width:37.5em){.m-list__links .m-list_link{border-bottom-width:1px;border-top-width:1px;box-sizing:border-box;display:block;padding-bottom:.625em;padding-top:.625em;width:100%}.m-list__links .m-list_link .a-link_text{border-bottom-width:0}}html[lang=ar] .m-list{padding-right:0}.m-meta-header{border-bottom:1px solid #b4b5b6;overflow:auto;padding-bottom:.625em}@media only all and (min-width:37.5625em){.m-meta-header:after{clear:both;content:"";display:table}.m-meta-header_left{float:left}.m-meta-header_right{float:right}}.m-meta-header .a-heading{margin-bottom:0}.m-pull-quote_body{color:#101820;font-size:1.375em;font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:.68181818em;text-transform:inherit}@media only all and (max-width:37.5em){.m-pull-quote_body{font-size:1.125em;font-weight:500;letter-spacing:inherit;line-height:1.25;margin-bottom:.83333333em;text-transform:inherit}}.m-pull-quote_citation{color:#5a5d61;font-size:.875em;font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.07142857em;text-transform:uppercase}.m-pull-quote_citation:before{content:"\2014 "}.m-pull-quote__large .m-pull-quote_body{font-size:1.625em;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:.57692308em;text-transform:inherit}@media only all and (max-width:37.5em){.m-pull-quote__large .m-pull-quote_body{font-size:1.375em;font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:.68181818em;text-transform:inherit}}.m-slug-header{border-top:1px solid #b4b5b6}.m-slug-header .a-heading{border-top:5px solid #20aa3f;display:inline-block;font-size:.875em;font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.07142857em;margin-top:-3px;padding-top:.28571429em;text-transform:uppercase}@font-face{font-display:fallback;font-family:AvenirNextLTW01-Regular;font-style:normal;font-weight:400;src:url(/static/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"),url(/static/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff) format("woff")}@font-face{font-display:fallback;font-family:AvenirNextLTW01-Medium;font-style:normal;font-weight:500;src:url(/static/fonts/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2) format("woff2"),url(/static/fonts/f26faddb-86cc-4477-a253-1e1287684336.woff) format("woff")}@font-face{font-display:fallback;font-family:Avenir Next;font-style:normal;font-weight:400;src:url(/static/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"),url(/static/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff) format("woff")}@font-face{font-display:fallback;font-family:Avenir Next;font-style:normal;font-weight:500;src:url(/static/fonts/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2) format("woff2"),url(/static/fonts/f26faddb-86cc-4477-a253-1e1287684336.woff) format("woff")}
+.a-date{color:#5a5d61;font-size:.875em;font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.07142857em;text-transform:uppercase;white-space:nowrap}.a-heading__icon{color:#101820;font-size:1.125em;font-weight:500;letter-spacing:inherit;line-height:1.25;margin-bottom:.83333333em;text-transform:inherit}a.a-heading__icon{border-color:#101820;border-width:0;color:#101820}a.a-heading__icon.visited,a.a-heading__icon:visited{border-color:#101820;color:#101820}a.a-heading__icon.focus,a.a-heading__icon.hover,a.a-heading__icon:focus,a.a-heading__icon:hover{border-color:#0050b4;color:#0050b4}a.a-heading__icon.active,a.a-heading__icon:active{border-color:#101820;color:#101820}.a-heading__icon .cf-icon{margin-right:.11111111em}.a-link__icon,.a-link__jump{border-bottom-width:0}.a-link__icon .a-link_text,.a-link__jump .a-link_text{border-bottom-style:inherit;border-bottom-width:1px}.a-link__icon.a-link__no-wrap,.a-link__jump.a-link__no-wrap{white-space:nowrap}.a-link__jump{font-weight:500}.a-link__jump.a-link__large{font-size:1.125em}@media only all and (max-width:37.5em){.a-link__jump{border-bottom-width:1px;border-top-width:1px;box-sizing:border-box;display:block;padding-bottom:.625em;padding-top:.625em;position:relative;width:100%}.a-link__jump .a-link_text{border-bottom-width:0}.a-link__jump .cf-icon-svg{bottom:50%;margin-bottom:-.6em;position:absolute}.a-link__jump.a-link__icon-after-text{padding-right:1.25em}.a-link__jump.a-link__icon-after-text .cf-icon-svg{right:0}.a-link__jump.a-link__icon-before-text{padding-left:1.25em}.a-link__jump.a-link__icon-before-text .cf-icon-svg{left:0}}.u-block-link{border-bottom-width:1px;border-top-width:1px;box-sizing:border-box;display:block;padding-bottom:.625em;padding-top:.625em;width:100%}.u-block-link .a-link_text{border-bottom-width:0}.a-micro-copy{color:#101820;font-size:.875em}.a-tagline{grid-column-gap:10px;display:grid;font-size:.75rem;grid-template-columns:22px 1fr}.a-tagline_text{display:inline-block}.a-tagline .u-usa-flag{margin-top:1px}.a-tagline__large{font-size:1rem}.a-tagline__large .u-usa-flag{margin-top:4px}.a-tagline__xlarge{grid-column-gap:30px;font-size:1.625rem;grid-template-columns:40px 1fr}.a-tagline__xlarge .u-usa-flag{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAqCAMAAAATdiw4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADlQTFRF////sxlC2YyhCjFhKUt1R2WJGT5rhZiwOFh/Zn6co7LEdYum0djhV3GS8PL1wszYsr/O4OXrlKW6gKQKnwAAAUhJREFUeNrslM2OwzAIhN2OHf/HSd//YXfYqGroZWWUS9XlgPgOGRmY4IAFjOXIr/Qsb5PhkEbglzHy4zAS3tkg6CIFWqNAdCKoeV7Qp4SIEJhS8iFohpsNGVVxGciuAH7f/ZlhEUzo0TNiZ1mrZoNgXuVlrcnLVnmZ5vtkcIYj0x6lMOXhl0WzYSmM2DrQG7frS/Fnhk2wrlTxa2U5hmZDy6kE9lkruw0lea/ZsJTkHjTyvtPIj8PYiucF6WVk9M7062rNNmNvjuOqbpPByfhebFpKQj6MnFnGqNkgWNftaeRNFvvGhuMwKj28bUz1MPaZbTOMTX65s7GfDKOgEyPLHURrmi2CD7DR3tmslF6z4U8JcvcOIxfH6//GhqV0qiBzaghdWtU8LRj+iOmWvzBuF8cHCH5h3C+OD9jy5S3/H4cvOA4/AgwAabgYexE/bU4AAAAASUVORK5CYII=");height:21px;margin-top:6px;width:40px}@media only all and (max-width:37.5em){.a-tagline__xlarge{grid-row-gap:30px;font-size:1.375rem;grid-template-columns:none;grid-template-rows:22px 1fr}}.u-usa-flag{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAZCAMAAABAf11LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5QTFRF////sxlC7MbQ2YyhxlNxCjFhR2WJV3GSKUt1dYumOFh/GT5rhZiwwszYsr/OlKW6Zn6c0djh8PL1iR9Ko7LE4OXrl0pttKC0pXWRtYKbSuJhRQAAANFJREFUeNrkkctuwyAUREnSuW/ApHYf//+jBVdZVcJi3aORgAXcMyLBAAJEzsVG3m8TkifyI3zfPQ6nJJLo421CArSBmkgjNEWtQE4zXJmClXuCWIlU5hdQxCqbqnE1KdIz79CVDvBwZxyKfQfmHTyzl01UZSvOWSTbhZLSWeDMufWLC/1ls3amT4qQq394EjIjApxBT+/nr8eEBNuKcB9SWMpmEXalNOylmlUZNTr4vE/4VdKhpC+leQf6y/e0wzL3RdJtkfUJyzwW+ZcdfgQYAJmJD3zerW6OAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:contain;display:inline-block;height:13px;width:24px}.m-list__horizontal,.m-list__links,.m-list__unstyled{list-style-type:none;padding-left:0}.m-list__horizontal .m-list_item,.m-list__links .m-list_item,.m-list__unstyled .m-list_item{margin-left:0}.m-list__spaced .m-list__spaced,.m-list__spaced .m-list_item+.m-list_item{margin-top:1.5em}.m-list__horizontal .m-list_item{display:inline-block;margin-bottom:0;margin-right:.25em}@media only all and (max-width:37.5em){.m-list__links .m-list_item{margin-bottom:0}.m-list__links .m-list_item:nth-child(n+2) .m-list_link{border-top-width:0}}.m-list__links .m-list_link{font-weight:500}@media only all and (max-width:37.5em){.m-list__links .m-list_link{border-bottom-width:1px;border-top-width:1px;box-sizing:border-box;display:block;padding-bottom:.625em;padding-top:.625em;width:100%}.m-list__links .m-list_link .a-link_text{border-bottom-width:0}}html[lang=ar] .m-list{padding-right:0}.m-meta-header{border-bottom:1px solid #b4b5b6;overflow:auto;padding-bottom:.625em}@media only all and (min-width:37.5625em){.m-meta-header:after{clear:both;content:"";display:table}.m-meta-header_left{float:left}.m-meta-header_right{float:right}}.m-meta-header .a-heading{margin-bottom:0}.m-pull-quote_body{color:#101820;font-size:1.375em;font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:.68181818em;text-transform:inherit}@media only all and (max-width:37.5em){.m-pull-quote_body{font-size:1.125em;font-weight:500;letter-spacing:inherit;line-height:1.25;margin-bottom:.83333333em;text-transform:inherit}}.m-pull-quote_citation{color:#5a5d61;font-size:.875em;font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.07142857em;text-transform:uppercase}.m-pull-quote_citation:before{content:"\2014 "}.m-pull-quote__large .m-pull-quote_body{font-size:1.625em;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:.57692308em;text-transform:inherit}@media only all and (max-width:37.5em){.m-pull-quote__large .m-pull-quote_body{font-size:1.375em;font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:.68181818em;text-transform:inherit}}.m-slug-header{border-top:1px solid #b4b5b6}.m-slug-header .a-heading{border-top:5px solid #20aa3f;display:inline-block;font-size:.875em;font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.07142857em;margin-top:-3px;padding-top:.28571429em;text-transform:uppercase}@font-face{font-display:fallback;font-family:AvenirNextLTW01-Regular;font-style:normal;font-weight:400;src:url(/static/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"),url(/static/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff) format("woff")}@font-face{font-display:fallback;font-family:AvenirNextLTW01-Medium;font-style:normal;font-weight:500;src:url(/static/fonts/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2) format("woff2"),url(/static/fonts/f26faddb-86cc-4477-a253-1e1287684336.woff) format("woff")}@font-face{font-display:fallback;font-family:Avenir Next;font-style:normal;font-weight:400;src:url(/static/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"),url(/static/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff) format("woff")}@font-face{font-display:fallback;font-family:Avenir Next;font-style:normal;font-weight:500;src:url(/static/fonts/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2) format("woff2"),url(/static/fonts/f26faddb-86cc-4477-a253-1e1287684336.woff) format("woff")}
diff --git a/packages/cfpb-typography/src/atoms/links.less b/packages/cfpb-typography/src/atoms/links.less
index f1c3f5b21f..b3a217fa4d 100644
--- a/packages/cfpb-typography/src/atoms/links.less
+++ b/packages/cfpb-typography/src/atoms/links.less
@@ -28,6 +28,7 @@
font-size: unit((@size-iv / @base-font-size-px), em);
}
+ // Mobile size.
.respond-to-max( @bp-xs-max, {
.u-block-link();
@@ -54,31 +55,6 @@
&.a-link__icon-before-text .cf-icon-svg {
left: 0;
}
-
- &.a-link__bg {
- border: solid @jump-link_border;
- border-width: 1px 0;
-
- background: @jump-link_bg;
-
- &.a-link__icon-after-text .cf-icon-svg {
- right: 1em;
- }
-
- &.a-link__icon-before-text .cf-icon-svg {
- left: 1em;
- }
-
- &.a-link__icon-after-text {
- padding-left: 1em;
- padding-right: 2.25em;
- }
-
- &.a-link__icon-before-text {
- padding-left: 2.25em;
- padding-right: 1em;
- }
- }
} );
}
diff --git a/packages/cfpb-typography/usage.md b/packages/cfpb-typography/usage.md
index 101271231c..b9214eaa44 100644
--- a/packages/cfpb-typography/usage.md
+++ b/packages/cfpb-typography/usage.md
@@ -355,30 +355,6 @@ Jump links can also have icons before the text, like icon links.
```
-#### Jump link with background modifier (only visible on small screens)
-
-
-Jump link with grey background and
-solid borders on small screens
-{% include icons/right.svg %}
-
-
-```
-
- Jump link with grey background and
- solid borders on small screens
- {% raw %}{% include icons/right.svg %}{% endraw %}
-
-```
-
## Lists
### Unstyled list modifier