Opportunity Standard

Guidance on links can be found on the U.S. Web Design System (USWDS) site. Links within the Opportunity Standard emphasize the following guidelines from the USWDS;

---

• Don’t rely on color alone to distinguish links.

• Clearly identify external links.

• Use unique, meaningful link text

---

Additionally, links within the Opportunity Standard encourage the following practices;

---

• Visited links are the same color as their parent element (inherit) so that they stand out but aren’t as obvious as unvisited links (if a color is desired to distinguish visited links, use a shade of purple, or similar to the browser default color for visited links).

• Per plain language guidelines, normal case is preferred over all caps for text labels.

• Links with an icon but without text labels are discouraged.

• New browser or tab links should include the rel attribute with a value of nofollow noopener per CityWide Application Security guidelines.

• If a link wraps text at the end of a sentence, the period should be excluded from the a tag.

• If a link wraps quoted text, it must include both quotes in order for quotations to be rendered correctly.

Links with icons in the Opportunity Standard use the class link-icon on the link and icon on the SVG icon. A span element is also required around the label. This helps center icons with the label and add a small amount of space between the label and the icon. Icons may be added on either side of the label.

---

Links with an icon but without text labels are discouraged. The icon and text label combination is the most certain way of communicating the meaning of the icon. Test with users or follow the guidance from Nielson Norman Group on “Icon Usability.”

External links should use the external link icon. Internal links lead to content on the same website or domain name (including the subdomain). External content exists in an entirely separate domain.

---

Internal content should generally open in the existing window, and external content may open in a new tab. Test with users or follow the guidance from Nielson Norman Group on “Opening Links in New Browser Windows and Tabs.”

---

New browser or tab links should include the rel attribute with a value of nofollow noopener per CityWide Application Security guidelines.