MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Link

Link styles supported by the Maersk Design System.

Best practice

  • The purpose of the link should be understandable from the link text alone.
  • The link text should be descriptive and clear.
  • Use descriptive keywords that reflect the topic or keywords the link target is trying to convey.
  • An icon can be added to the link to add more context.
  • State in the link text, if the link points to something else than another webpage e.g. a PDF document.
  • Don’t link an entire sentence, but only the text that describes the target.
  • Make all links on a page unique, unless they do the same thing.

Avoid terms like “Click here” and “Read more”

Avoid using generic phrases like “click here”, “click for more information”, “read more” etc. Try to make the link text more descriptive.

Do

You can find more information on pricing in our pricing tool.

Don't

Want to know more about our pricing? Click here.

Avoid including the preceding articles (a, an, the etc.)

Do

Read the installation guide for details.

Don't

Read the installation guide for details.

Don’t include punctuation marks

Do

You can find more information on pricing in our pricing tool.

Don't

You can find more information on pricing in our pricing tool.

Accessibility

Well-written link text help all users but is especially helpful for users of assistive technologies e.g. screen readers. On WCAG’s website, you can find more information on link purpose and accessibility.

Inline vs stand-alone

There are two link variants supported by the Maersk Design System, inline and stand-alone.

Inline

Inline is the default variant for links and is typically used within paragraphs, sentences, body copy etc. Inline links are visualised by an underline text style which disappears on hover.

Do

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use inline links within text.
Don't

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Do not use the stand-alone variant within text.

Stand-alone

Stand-alone links reside outside of paragraphs, sentences, body copy etc. such as navigation links etc.

Do
Use the stand-alone variant for links that are not placed inside text.
Don't
Do not use the inline variant for links that are placed outside text.

An icon can be added to the link to help communicate the behaviour of the link e.g. that it is an external link opening in a new window. Adding this additional visual cue makes it easier for users to differentiate between different kinds of links.

Please visit the Maersk Design System website as an external link example.

External link opening in a new window with announcement icon.