CSS

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

Get in touch Book a testdrive Opens in new window

Contrast

Get in touch Book a testdrive Opens in new window

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.