Inline link

The Inline link element, with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Content within each inline link should indicate the link's destination. If the href attribute is present, pressing Enter while focused on the inline link will activate it.

— Definition from the MDN web docs

Text

Links usually integrate into a larger block of text:

Live Editor

<p>
  Our <qds-inline-link href="/help">help center</qds-inline-link> provides video tutorials and detailed instructions to use your product.
</p>

Writing guidelines

Follow the 4Ss from NNGroup guidelines for writing good link labels:

Specific: tell users what they will find at the destination.
Sincere: what the link promises is found at the destination
Substantial: the link destination is clear even when not reading the surrounding text (e.g. when users scan the page).
Succinct: keep links short without sacrificing the other principles. Frontload links with information-carrying language.

Link targets

External URL

Set the rel="external" flag to designate a link as external. This will display an icon indicator next to the link:

TODO: In Figma, etc.

Live Editor

<p>
  For more information on this topic, visit the
  <qds-inline-link href="https://www.example.com" rel="external">
    help center
  </qds-inline-link> section.
</p>

Absolute URL

Live Editor

<qds-inline-link href="https://www.example.com">Example</qds-inline-link>

Relative URLs

Live Editor

<div className="flex flex-col">
  <qds-inline-link href="//example.com">Scheme-relative URL</qds-inline-link>
  <qds-inline-link href="/build/components/inline-link">Origin-relative URL</qds-inline-link>
  <qds-inline-link href="../inline-link">Directory-relative URL</qds-inline-link>
</div>

Element on the same page

Live Editor

<qds-inline-link href="#examples">Jump to the examples</qds-inline-link>

Email address

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

Live Editor

<qds-inline-link href="mailto:nowhere@example.com">Send email to nowhere</qds-inline-link>

Telephone numbers

To create links that open in the user's telephone program to let them make a telephone call, use the tel: scheme:

Live Editor

<div className="flex flex-col">
  <qds-inline-link href="tel:+49.157.0156">+49 157 0156</qds-inline-link>
  <qds-inline-link href="tel:+1(800)555-0123">(800) 555-0123</qds-inline-link>
</div>

Additional options

Disabled

Use the disabled attribute to disable an inline link. Clicks will be suppressed until the disabled state is removed.

Live Editor

<qds-inline-link href="https://example.com" disabled>Disabled</qds-inline-link>

Implementation tips

Security and privacy

<qds-inline-link> elements can have consequences for users' security and privacy. Make sure to read and understand the Referer header: privacy and security concerns guidelines.

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import
Bundler
Angular
React
Vue

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsInlineLink } from 'https://cdn.jsdelivr.net/npm/@quartzds/core@next+esm'
defineCustomElementQdsInlineLink()

To import this component using a bundler:

import { defineCustomElementQdsInlineLink } from '@quartzds/core'
defineCustomElementQdsInlineLink()

To import this component as an Angular component:

import { QdsInlineLink } from '@quartzds/core-angular'

To import this component as a React component:

import { QdsInlineLink } from '@quartzds/core-react'

To import this component as a Vue component:

import { QdsInlineLink } from '@quartzds/core-vue'

Component reference

Properties

Attribute / Property

Type

Description

Default

disabled

boolean

Prevents the inline link from being interacted with: it cannot be pressed or focused.

false

download

boolean | string | undefined

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

Without a value, the browser will suggest a filename/extension, generated from various sources:
- The Content-Disposition HTTP header
- The final segment in the URL path
- The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
filename: defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

undefined

href

string | undefined

The URL that the inline link points to. Inline links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

Sections of a page with document fragments
Specific text portions with text fragments
Pieces of media files with media fragments
Telephone numbers with tel: URLs
Email addresses with mailto: URLs
While web browsers may not support other URL schemes, websites can with registerProtocolHandler()

undefined

hreflang

string | undefined

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

undefined

importance

"emphasized" | "standard" | "subdued" | undefined

The inline link's importance.

'standard'

referrerpolicy / referrerPolicy

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined

How much of the referrer to send when following the inline link.

no-referrer: The Referer header will not be sent.
no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe because it leaks origins and paths from TLS-protected resources to insecure origins.

undefined

rel

string | undefined

The relationship of the linked URL as space-separated link types.

The following list includes some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

alternate: Alternate representations of the current document.
author: Author of the current document or article.
bookmark: Permalink for the nearest ancestor section.
external: The referenced document is not part of the same site as the current document. An icon will be rendered next to the text if this value is specified.
help: Link to context-sensitive help.
license: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
me: Indicates that the current document represents the person who owns the linked content.
next: Indicates that the current document is a part of a series and that the next document in the series is the referenced document.
nofollow: Indicates that the current document's original author or publisher does not endorse the referenced document.
noopener: Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate target attribute value).
noreferrer: No Referer header will be included. Additionally, has the same effect as noopener.
opener: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
prev: Indicates that the current document is a part of a series and that the previous document in the series is the referenced document.
search: Gives a link to a resource that can be used to search through the current document and its related pages.
tag: Gives a tag (identified by the given address) that applies to the current document.

undefined

target

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>. The following keywords have special meanings for where to load the URL:

_blank: usually a new tab, but users can configure browsers to open a new window instead.
_parent: the parent browsing context of the current one. If no parent, behaves as _self.
_self: the current browsing context.
_top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.

undefined

Events

Event

Type

Description

Bubbles

Cancelable

Composed

qdsBlur

{ readonly relatedTarget: EventTarget | null; }

Emitted when the inline link loses focus.

qdsFocus

{ readonly relatedTarget: EventTarget | null; }

Emitted when the inline link gains focus.

Text​

Writing guidelines​

Link targets​

External URL​

Absolute URL​

Relative URLs​

Element on the same page​

Email address​

Telephone numbers​

Additional options​

Disabled​

Implementation tips​

Security and privacy​

Importing​

Component reference​

Properties​

Events​

Text

Writing guidelines

Link targets

External URL

Absolute URL

Relative URLs

Element on the same page

Email address

Telephone numbers

Additional options

Disabled

Implementation tips

Security and privacy

Importing

Component reference

Properties

Events