Color Variants
Choose a color palette that matches the link's visual context. Neutral is the default for most content; primary draws attention to key calls to action.
For complete policy details, review the official guidelines before submitting your application.
<p>For complete policy details, review the <a href="/guidelines" class="nds-link">official guidelines</a> before submitting your application.</p>
On-Color
Use the on-color variant when placing links on primary or brand-colored backgrounds to ensure sufficient contrast.
Explore available programs and register your organization today.
<div style="background: var(--button-background-primary-default); padding: var(--spacing-xl); border-radius: var(--radius-md);">
<p style="color: var(--text-oncolor-primary);">Explore <a href="/programs" class="nds-link nds-oncolor">available programs</a> and register your organization today.</p>
</div>
External Links
Links to a different domain are detected and marked with the external icon automatically. Use nds-icon to add an inline link icon to internal links. Apply data-no-external to any link or ancestor to opt out of automatic external treatment.
Consult the Saudi Open Data portal for published datasets.
Review the ITU accessibility guidelines before publishing your service.
<!-- JS detects the external hostname and adds nds-external + target="_blank". Cross-domain links also get rel="noopener noreferrer". Subdomain links are trusted and skip rel. -->
<p>Consult the <a href="https://www.data.gov.sa/" class="nds-link">Saudi Open Data portal</a> for published datasets.</p>
<p>Review the <a href="https://www.itu.int/en/Pages/default.aspx" class="nds-link nds-primary">ITU accessibility guidelines</a> before publishing your service.</p>
Download the Accessibility Compliance Report for the current quarter.
<p>Download the <a href="/reports/accessibility-q1" class="nds-link nds-icon">Accessibility Compliance Report</a> for the current quarter.</p>
This partner portal skips external treatment on a single link.
All links in this container are also excluded: trusted site and related service.
<!-- On a single link -->
<a href="https://partner.example.com" class="nds-link" data-no-external>partner portal</a>
<!-- On a container: all links inside are excluded -->
<div data-no-external>
<a href="https://example.com" class="nds-link">trusted site</a>
<a href="https://other.com" class="nds-link">related service</a>
</div>
Built-in Features
Runs on every page at load time. No selector required, no manual call needed.
Neutral, primary, and on-color palettes with hover and active states driven by design tokens.
Compares each link's hostname against the current page origin and marks cross-domain links with the external icon automatically.
External links open in a new tab automatically. Cross-domain links also receive rel="noopener noreferrer". Subdomain links are treated as trusted and skip the rel attribute.
Add data-no-external to any link or ancestor element to prevent automatic external treatment on that link or the entire container.
Add nds-underline to reinforce link identity in dense text where color alone may not be sufficient.
Usage Guidelines
Best Practices
- Use
nds-linkon<a>elements for inline text links within paragraphs, alert messages, card footers, and other content areas - Use
nds-primaryfor calls to action embedded in body text where the primary color signals importance, such as "Learn more" or "Apply now" links - Use
nds-oncolorwhen placing links on primary or dark backgrounds. Neutral and primary variants do not have sufficient contrast on colored surfaces - Add
nds-underlinein dense reading content where adjacent text without underlines could make links hard to distinguish from surrounding copy - Add
nds-neutralon links inside.nds-content-section nds-demo-sectionif you need them to stay neutral. By default, all links in a content section use the primary color - Do not use
nds-linkon standalone navigation items. Use Breadcrumb, Side Navigation, or Tabs for navigation structure - Do not use a link when an action is intended rather than navigation. Use
nds-btn nds-subtlefor text-like interactive controls that trigger behavior - External links (different domain) are detected and marked automatically. You do not need to add
target="_blank"orrel="noopener noreferrer"manually for cross-domain URLs - Use
data-no-externalon a link or a wrapper element when you want to suppress the external icon and new-tab behavior, such as for trusted partner sites or embedded widgets from a known domain - Icon-only buttons (
nds-btn nds-icon-only) that happen to be links are automatically excluded from external treatment since they have no visible label to accompany the external icon
Modifier Classes
| Class | Description |
|---|---|
nds-primary | Primary color palette: uses the brand color for default, hover, and active states |
nds-color | Alias for nds-primary |
nds-oncolor | On-color palette for links placed on dark or branded backgrounds |
nds-neutral | Explicitly neutral color. Use inside .nds-content-section nds-demo-section to opt out of the primary default |
nds-underline | Adds underline decoration to reinforce link identity in dense text |
nds-icon | Shows a generic link icon after the text. Use for internal links that benefit from a visual anchor cue |
nds-external | Shows the external-link icon after the text. Applied automatically by JS to cross-domain links |
Data Attributes
| Attribute | Description |
|---|---|
data-no-external | Place on an <a> or any ancestor element. Links matching or contained within the element skip external detection: no nds-external class, no target="_blank", no rel |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--link-color | --link-neutral | Text color in the default state. Set on the element or an ancestor to override the variant |
--link-hover | --link-neutral-hovered | Text color on hover |
--link-pressed | --link-neutral-pressed | Text color on active press |
--link-focused | --link-neutral-focused | Text color when focused |
--link-visited | --link-neutral-visited | Text color for visited links. Active inside .nds-content-section where the :visited state is applied |
JavaScript API
NDS.Link runs automatically at page load. Call NDS.Link.init() after injecting link elements dynamically to apply external-link detection to the new markup.
// Runs automatically on page load. No manual call needed.
// After inserting links dynamically, call init() to process the new elements:
NDS.Link.init();