Design
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
Section titled “Anatomy”- Special links group
- Internal link
- External link
- External icon
When to use it
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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.