Cross-linking between services

Introduction

Intility services are part of a larger ecosystem, and users regularly move between them. Cross-linking is how we help them do that — a link, button or tag that takes the user from one service to another. Using the service logo in these links makes the destination recognizable at a glance.

Keep in mind that the most important elements of cross-linking between services are:

• Use the destination service's logo. Always show the logo of the service the user is navigating to, rather than the service they are leaving.

• Clearly identify the destination. Use the service's full name where possible. In some cases, a specific page name within that service may be more appropriate, but then a description is nice to have.

• Use the appropriate arrow. Use an arrow-up-right () to indicate that the link takes the user to another service. Use a simple arrow-right () when the link leads to another page within the same service.

Buttons

Place the logo on the left side of the label, and use an arrow on the right to signal that the user is leaving the current service. Keep the label to the service name, or a short action followed by the service name, e.g. "Open in Network Manager". You can use the filled variant as well, but keep in mind that the logo can be less visible on a colored background.

Tags

Tags with a logo work well for compact sections of links, e.g. in a table or a list of items. Keep the logo small enough to sit inside the tag without increasing its height.

Article card / Box

You can also cross-link between services with an article card (Box component). The logo should always be on the left side of the card, and the arrow on the right side. A description of the destination is optional, but can help users understand what they'll find when they follow the link. See more about Article cards.

Dropdowns

You can also cross-link to another service in a dropdown menu like this:

In a paragraph

When linking to another service from a paragraph of text, use the service name as the link text and add an arrow icon after it. No need for a logo in this context.

Static information

The logo can also indicate that data comes from a specific service without functioning as a link. For example, it can be displayed alongside a short label in the section header, with a tooltip showing the service name. In this case the data is from another service.

In a table, the logo and service name can be shown in a badge to indicate which service each row comes from. Keep a header or other context nearby that explains the data is from another service.

Best practices

• Use the official logo: Always use the logo from the Figma library. Don't recolor, crop or redraw it.
• Be consistent: The same service should look the same everywhere it is linked — same logo, same name.
• Use the full name: Prefer the service name users know over abbreviations or internal names.
• Do not change color: Keep button styling as is, do not change the text color to match the logo color (Theming will handle this automatically).

Related components