diff --git a/docs/pages/links.md b/docs/pages/links.md index 08c0017e8a..05c79c6a18 100644 --- a/docs/pages/links.md +++ b/docs/pages/links.md @@ -1,12 +1,7 @@ --- -title: Links layout: variation section: components status: Released -description: Links lead users to a different page or further information. In - contrast, [buttons](/design-system/components/buttons) are used to signal - actions. Users should be able to identify links without relying on color or - styling alone. variation_groups: - variation_group_name: Standard links variations: @@ -34,7 +29,7 @@ variation_groups: within a paragraph like this one). variation_name: Inline links - variation_implementation: '' + variation_implementation: "" variation_specs: >- [Color variables for links](https://cfpb.github.io/design-system/development/variables#typography-1) @@ -42,39 +37,41 @@ variation_groups: #### Default - * Pacific Blue + * Avenir Next Regular, 16 px + + * Pacific Blue (#0072ce) - * 1px dotted bottom border + * Border bottom: 1 px, dotted #### Hover - * Dark Pacific Blue + * Dark Pacific Blue (#0050b4) - * 1px solid bottom border + * Border bottom: 1px, solid #### Focus - * Pacific Blue + * Pacific Blue (#0072ce) - * 1px dotted bottom border + * Border bottom: 1 px, dotted - * Thin dotted outline + * Outline: Thin dotted #### Active - * Navy Blue + * Navy Blue (#254b87) - * 1px solid bottom border + * Border bottom: 1px, solid #### Visited - * Teal + * Teal (#257675) - * 1px solid bottom border + * Border bottom: 1px, solid - variation_name: Call-to-action links variation_code_snippet: >-
The document icon should emphasize a link that contains a @@ -143,16 +158,14 @@ variation_groups: for further details.
variation_name: Standard link with icon - variation_description: - To prevent the link’s underline from extending under the + variation_description: To prevent the link’s underline from extending under the icon, wrap the link text with a `span.icon-link_text`. There can be no whitespace between the text and the opening and closing span tags. Include the icon either prior to or after the `a-link_text`. It is important the text and icon are siblings to correctly handle underlines. - variation_name: Non-wrapping icon links - variation_description: - Icons added to inline links can sometimes break onto the + variation_description: Icons added to inline links can sometimes break onto the next line. If you want to prevent this, you can add the `__no-wrap` modifier to `.a-link__icon`. variation_code_snippet: |- @@ -191,9 +204,9 @@ variation_groups: small screens by converting to full block links that have a finger-friendly touch area. Reduce screen size to see these in action. - variation_group_name: Printed links - variation_group_description: '' + variation_group_description: "" variations: - - variation_name: '' + - variation_name: "" variation_description: When a page is printed from [consumerfinance.gov](https://www.consumerfinance.gov/), links should appear in the following style and include both the original link text @@ -228,8 +241,14 @@ variation_groups: variation_implementation: When a page is printed, cf.gov's [print stylesheet](https://github.com/cfpb/consumerfinance.gov/blob/c9637160e14da5093b43c78fc2c87fa0ba190887/cfgov/unprocessed/css/print.less) appends link URLs in parentheses next to their link text. -use_cases: '' -guidelines: '' +guidelines: "" +eyebrow: Form elements +title: Links +description: Links lead users to a different page or further information. In + contrast, [buttons](/design-system/components/buttons) are used to signal + actions. Users should be able to identify links without relying on color or + styling alone. +use_cases: "" behavior: >- ### Default links @@ -254,7 +273,6 @@ accessibility: >- In situations where that's untenable, you can improve the situation for screen reader users by coding the link with the `aria-label` attribute and adding more descriptive link text, which will be read aloud by screen readers. -research: '' related_items: >- * [Variables](https://cfpb.github.io/design-system/development/variables#typography-1) @@ -265,5 +283,5 @@ related_items: >- * [Iconography](https://cfpb.github.io/design-system/foundation/iconography) last_updated: 2019-09-17T14:52:22.684Z -eyebrow: Form elements +research: "" ---