Special Links

Special Links is a footer-oriented group of one or more Link items. It keeps link styling and behaviour consistent while allowing mixed destinations, including internal routes and external domains.

CSS
React

Maintained by Platform and Foundation

Ready to use

Design CSS React Accessibility

Special Links groups footer links in a compact, responsive block. It extends the base Link pattern, so typography, icon treatment, and destination cues stay consistent with the wider system.

Anatomy

Get in touch Book a testdrive

Special links group
Internal link
External link
External icon

When to use it

Use Special Links when:

You need a short footer list of navigational links.
Links can be a mix of internal and external destinations.
You want Link styling and behaviour without custom footer variants.

Avoid Special Links when:

The content is a long sitemap or hierarchical navigation block.
The actions are in-page interactions rather than navigation.

Properties

Layout

Single column on small viewports (gap: --tng-spacing-xl), wrapping into rows from the md breakpoint, with wider column-gap: --tng-spacing-4xl from xl. The group renders as a tng-container with align-items-baseline so mixed link sizes align on their text baseline.

Link behaviour

Every item is a Link rendered at the md size. Internal links navigate within the site; external links resolve to their external destination, can carry the external-link icon, and open in a new window when configured.

New-window label

An opensInNewWindowLabel string is passed through to each Link so new-tab destinations expose a visually hidden “opens in new window” cue in their accessible name. Provide a localised value.

Content

Keep labels short and descriptive. Prefer destination-driven wording like “Get in touch” or “Book a testdrive”.

Platform considerations

Desktop

Use row-wrap layout with clear horizontal rhythm so links scan as a compact group.

Tablet

Keep grouping and spacing intact; preserve enough gap to avoid accidental taps.

Mobile

Use the default stacked layout for legibility and touch comfort.

Best practices

Do

Reuse Link styles, keep copy concise, and visually indicate external destinations consistently.

Don't

Don’t hide destination context for links that open new tabs.

Content guidelines

Write labels as clear destinations, not generic prompts. If a link opens a new tab or leaves the site, ensure the accessible name communicates that change.

Styles

Special Links is a wrapper around one or more Link items. The component renders a dxp-special-links group; its own CSS (shipped from @tmedxp/aem-react-components) lays the links out — stacked with gap: --tng-spacing-xl, wrapping into rows from md, and widening to column-gap: --tng-spacing-4xl from xl. Each item is a Link at the md size.

<div class="dxp-special-links" style="display: flex; gap: 24px">
  <a class="tng-link is-neutral" href="/contact">
    <span>Get in touch</span>
  </a>
  <a
    class="tng-link is-neutral"
    href="https://www.toyota-europe.com"
    target="_blank"
    rel="noopener noreferrer"
  >
    <span>Book a testdrive</span>
    <i class="tng-icon icon-external-link" aria-hidden="true"></i>
    <span class="sr-only">Opens in new window</span>
  </a>
</div>

Neutral
Contrast

Get in touch Book a testdrive

The <span class="sr-only"> cue is emitted from the component’s opensInNewWindowLabel prop for links that open in a new window. Pass a localised label.

Description

Special Links renders a footer group of one or more Link items. Each entry in links is rendered as a Link at the md size, and the group carries the footer navigation analytics attributes.

Component

Import the SpecialLinks component from @tmedxp/aem-react-components.

Properties

Prop	Type	Description	Required
`links`	`LinkModel[]`	Collection of link items to render in the group.	✅
`opensInNewWindowLabel`	`string`	Localised label read by screen readers for links that open a new window.	✅

LinkModel properties

Prop	Type	Description	Required
`linkType`	`LinkType`	`INTERNAL_PATH` or `EXTERNAL_PATH`; selects the resolved destination.	✅
`linkText`	`string`	Visible label and default accessible name of the link.	✅
`internalLink`	`string`	Internal destination path.	✅
`externalLink`	`string`	External destination URL.	✅
`ctaType`	`CtaType`	Analytics CTA type; `'empty'` falls back to `linkText`.	✅
`internalLinkBehaviour`	`LinkBehaviour`	Same-tab / new-tab behaviour for internal destinations.	✅
`externalLinkBehaviour`	`LinkBehaviour`	Same-tab / new-tab behaviour for external destinations.	✅
`internalTitle`	`string`	`title` attribute used for internal destinations.	✅
`overlayTitleInternal`	`string`	Overlay title for internal destinations.	✅
`overlayTitleExternal`	`string`	Overlay title for external destinations.	✅
`disableNoreferrer`	`boolean`	Omits `noreferrer` from `rel` when opening a new tab.	✅

Example

import {
  LINK_BEHAVIOUR_CONFIGURATION,
  LINK_TYPE,
  SpecialLinks,
} from '@tmedxp/aem-react-components';

const SpecialLinksExample = () => {
  return (
    <SpecialLinks
      opensInNewWindowLabel="(opens in a new window)"
      links={[
        {
          linkType: LINK_TYPE.INTERNAL_PATH,
          linkText: 'Get in touch',
          internalLink: '/content/toyota/france/fr/contact.html',
          externalLink: '',
          ctaType: 'empty',
          internalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          externalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          internalTitle: 'Contact Toyota',
          overlayTitleInternal: '',
          overlayTitleExternal: '',
          disableNoreferrer: false,
        },
        {
          linkType: LINK_TYPE.EXTERNAL_PATH,
          linkText: 'Book a testdrive',
          internalLink: '',
          externalLink: 'https://www.toyota-europe.com',
          ctaType: 'empty',
          internalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          externalLinkBehaviour:
            LINK_BEHAVIOUR_CONFIGURATION.DEFAULT_SITE_BEHAVIOUR,
          internalTitle: '',
          overlayTitleInternal: '',
          overlayTitleExternal: '',
          disableNoreferrer: false,
        },
      ]}
    />
  );
};

export { SpecialLinksExample };

Special Links is a list of native links. Accessibility therefore depends on correct link semantics, descriptive names, visible focus, and explicit context change cues for new-tab destinations.

For designers

Keep link text and focus states clearly visible against the footer surface. Source: WCAG 1.4.3 Contrast (Minimum).
Distinguish links by more than colour alone (underline and/or icon cues). Source: WCAG 1.4.1 Use of Color.
Ensure focus indication is clearly visible and distinct from hover. Source: WCAG 2.4.7 Focus Visible.
The recommended limit is 33 characters (total per row) for accessibility reasons, ensuring that links remain on a single line and maintain readability. If one link exceeds 33 characters, the remaining links should use fewer characters so that the total length still fits within one line. From an accessibility and usability perspective, if all links exceed the recommended limits and cause wrapping or layout issues, this scenario is not supported.

For developers

Build items as native <a href> links. Use links only for navigation destinations (internal or external), not for in-page actions. When a link opens in a new tab/window, communicate this in the accessible name and pair target="_blank" with rel="noopener".

Focus order

Tab order follows document order through each link in the group.

Get in touch Book a testdrive

First link
Second link

Labelling elements

Link

Use native <a href>. The visible link text is the accessible name unless replaced/extended by aria-label. Names must describe destination and stand on their own in a links list.

Source: WCAG 4.1.2 Name, Role, Value.