Link Types

In the CMS a content author can choose from different link types:

1. Internal
2. External
3. Email
4. Telephone
5. File download

Link Styles

In the Rich Text editor a content author can choose from different link styles:

1. Primary
2. Secondary (outline)
3. Tertiary (ghost)
4. Inline

Primary Links

• Dark Foreground → renders dark background style
• Light Foreground → renders light background style

In Rich Text, render the base size variant

• Map to an icon based on link type
• Extend to full width on mobile

Small size variant:

• Does not render an icon
• Keeps its max-content size on mobile

Secondary Links (Outline)

• Dark Foreground → renders dark border/text style
• Light Foreground → renders light border/text style

In Rich Text, render the base size variant

• Map to an icon based on link type
• Extend to full width on mobile

Small size variant:

• Does not render an icon
• Keeps its max-content size on mobile

Tertiary Links (Ghost)

• Dark Foreground → renders dark text style
• Light Foreground → renders dark border/text style

In Rich Text, render the base size variant

• Map to an icon based on link type
• Keeps its max-content size on mobile

Other size variants (not supported in rich text):

• xs: 'label-xs-med',
• sm: 'label-sm-med',
• base: 'label-base-med',
• lg: 'h6'

Inline Links

• Only external links show icons

Primary Links

Link Groups

Secondary Links (Outline)

Tertiary Links (Ghost)

Inline Links

Internal Link External Link

Telephone Link Email Link File Download Link