Dev Tools
Skip to main content
PursuitPursuit logo

Rich Text

Links

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

Primary Link
  • 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)

Secondary Link
  • 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)

Tertiary Link
  • 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

Address

100 Mountain Ave, Banff, AB, T1L 1J3

Questions?

Message Us
Links Test