Links
Provides styles for the different types of links. Note that in order to reduce user confusion, we use different link colors for visited and new destinations.
Default Link
Provides styles for default links using the .link class. These links are meant
to be used in long-form text in a paragraph or the body section of a web page.
The punctuation should not be linked.
Title Link
Provides styles for title links adding the .link--title class to a link.
Primarily used to direct users to an existing resource by clicking on media
titles or articles. Always preserve source punctuation (Title Case)
when using title links.
My Berkeley Externship Experience with the Common Sense Privacy Program
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin orci eu rhoncus lobortis. Proin fringilla magna vitae purus congue vestibulum. Mauris nec diam neque. Sed faucibus egestas risus, ut eleifend neque iaculis eget. Sed ac erat tincidunt, rhoncus mauris id, pharetra mauris.
CTA Link
Provides styles for short and independent text links adding the .link--cta
class to a link. Can be used to invite a direct response and commitment
from the user: Join, Get started, Support Common Sense
(primary use case). Offer less risky option for staying engaged:
Learn more, Continue reading, Get the free guide
(secondary use case). This gives users the choice to learn more, continue
reading etc. Free of any punctuation (except, occasionally, question marks).
Written in sentence case (capitalize only the first word and any proper nouns).
Reverse Link
Provides styles for reversed links adding the .link--reverse
class to a link. Used on dark background (same style as default link, modified
with different color for visibility).
Reverse title link.
Link with icon
Provides support to use links along with inline icons. Icons are not ready yet, so using a symbol instead. We can update and use the icon when ready.
Accessibility
Text links should be descriptive, actionable, clear and concise.
Linked text should be unique within a page, should be meaningful when read out of context, and should help users to know something about their destination if they click on it. (“Click here” and “More” fail to meet these criteria.) This is important because screen reader users can create a list of links to navigate or select a link with a voice command, so redundant or vague CTAs are not helpful in this case.
Correct use: Find more information in the Family Engagement Toolkit.
Incorrect use: For more information, click here.
Download
Get a bundle with all form control styles.
Download