Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Link

Sign In
View in ClayDocumentation

Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.

single link example, text not surrounded

Usage

  • Only use links for navigation. A link must not trigger another kind of action.
  • Do not use a link to trigger an action that could trigger a button. If you want to trigger a button, use a button link instead.

Types

Use an inline link when you need a link to flow naturally with a sentence or paragraph.

inline link example in a paragraph

Attributes:

  • Color: primary blue
  • Font weight: inherit
  • Hover: primary blue hover color + underline

A single link is used for stand-alone hyperlinks. They can be text or an image.

single link example, text not surrounded

Attributes:

  • Primary Text Link Color: primary blue Font weight: semi bold * Hover: primary blue darken 5% color + underline
  • Secondary Text Link Color: secondary gray Font weight: semibold * Hover: primary gray color + underline
  • Image * No styling

A title link is used for list item titles, such as Dataset Display (stacked list, table, or cards), asset title, blog entry teaser title, etc.

Example 1:

title link example in a table

Example 2:

title link example in a list

Example 3:

title link example in an asset

Attributes:

  • Color: inherit
  • Font weight: inherit
  • Hover: underline

The image below demonstrates all the available implementations:

link example in asset context with several pointers on hover

Use external links to point to (target) external resources that are available on domains other than the current domain (source). Lexicon indicates this behavior with a tooltip.

external link with tooltip on hover action

For accessibility purposes, we also provide an icon to illustrate this behavior. This icon is visually hidden by default and only accessible on focus or when using assistive technologies such as screen readers.

external link with external link icon on focus action

Something to improve? Report an issue!
Menu