Link is text that users can select to access websites or subsequent pages.

Usage

A link UI example

Use text links to guide users to a webpage or a content page in the browser or to anchor users to a section within a page. For an action that results in a change to Firefox, use a button instead. See buttons

Types

internal link example

An internal link directs users to a page inside the Mozilla properties (e.g., SUMO, Pocket) or anchors users to a specific section on the same page.

external link example

An external link directs users to a page not produced by or affiliated with Mozilla.

An Open In New icon should be paired with the external link.

Styles

All platforms (except for Linux) follow the spec below. On Linux, use the system color for links.

Typography

font style of the link

Font size: Same as the body text
Font weight: Normal

Behaviors

normal state example

Normal
Font color: Blue 60 #0060df

hover state example

Hover
Font color: Blue 60 #0060df

pressed state example

Pressed
Font color: Blue 70 #003eaa

focused state example

Focused
Box Shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3)

Placement

A link may stand alone after a sentence or an option. To highlight the relationship, place the link next to the sentence or option.

use 8px for margin between a link and a body

Checkmark icon indicating a good choice Do

do not use margin larger than 8px

Cross icon indicating a bad choice Don’t

Copy Rules

  • Links should be sentence case when embedded in a sentence or when standing alone (e.g., Learn more).

  • Do not use ellipses in a link to indicate that there is more information available at the destination. This should be assumed.

  • Do not use punctuation at the end of the link, or navigation element unless you are using an exclamation point or question mark or the link is embedded in running text.