Content Delivery Network

Overview

Packages

URL Structure

Subresource Integrity

Versions

Nord Design System serves all of its packages via a Content Delivery Network for better performance and stability. Nord CDN also makes it faster to implement and use our packages in production.

A Content Delivery Network (CDN) is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are. CDNs cache content like web pages, images, and video in proxy servers near to your physical location. Some of the benefits of using Nord’s CDN includes:

Faster load times and better performance for all users
CDN scales more rapidly during heavy traffic
Minimizes risk of traffic spikes at point of origin, ensuring stability
Decreases infrastructure costs due to traffic offloading
Faster to get up and running with development work

Available packages

The following packages are available for usage via Nord CDN:

Web Components: https://nordcdn.net/ds/components/
Design Tokens: https://nordcdn.net/ds/tokens/
Themes: https://nordcdn.net/ds/themes/
Webfonts: https://nordcdn.net/ds/fonts/
CSS Framework: https://nordcdn.net/ds/css/
Nordicons: https://nordcdn.net/ds/icons/
Color Utilities: https://nordcdn.net/ds/color/
Ag Theme Nord: https://nordcdn.net/ds/ag-theme-nord/

URL structure

Nord CDN uses the following URL structure for the hosted packages:

Copy code

https://nordcdn.net/ds/<package
  >/<version>/<file> </file></version
></package>

To fetch e.g. the Webfonts using the above format, you would write it like:

Copy code

https://nordcdn.net/ds/fonts/2.0.0/fonts.css

To find URLs for Webfonts, see Webfonts documentation
To find URLs for Design Tokens, see Design Tokens documentation
To find URLs for Themes, see Themes documentation
To find URLs for Nordicons, see Nordicons documentation
To find URLs for Color Utilities, scroll down.
To find URLs for AG Theme Nord, scroll down.

Subresource Integrity

Subresource Integrity is a security feature that enables browsers to verify that resources they fetch from a CDN are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match (source: MDN).

Our documentation automatically provides cryptographic hashes for the latest available package versions. To enable SRI verification, use the following tags in the <head> of your application:

Design Tokens

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/8.0.1/tokens.custom-properties.css" integrity="sha384-qCiPLdt2VjJz4MEQ7ND7HvInjq2aKTxPgKJQjD/nMFXhSvqFWJ8ya6T/JCkXN+Qa" crossorigin="anonymous" />

Webfonts

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/fonts/3.0.4/fonts.css" integrity="sha384-5aBiATiGs6DP0TWJ2YBM9sLGrpH6OKSFkRhK27vqs+dqKsXPOoy44FP3ckbUZwB8" crossorigin="anonymous" />

Web Components

Copy code

<script type="module" src="https://nordcdn.net/ds/components/4.12.5/index.js" integrity="sha384-M9tJ/oXCOP8I0FhpxlyBA5sKzbrAWDC+b7AlBgeDMOVGfiesm4gK6ldRcCRN2FOo" crossorigin="anonymous"></script>

CSS Framework

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/css/4.4.0/nord.min.css" integrity="sha384-1QZZLXO6H3XMIwxgdtR6ryCeueSTyFtyfQEp6ijhaPA1wmp+psPo2CK8k6g68Lwt" crossorigin="anonymous" />

Nordicons

Copy code

<img src="https://nordcdn.net/ds/icons/3.15.0/assets/[ICON NAME].svg" height="24" width="24" alt="" />

Themes

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.1/nord.css" integrity="sha384-SqCxn7Q5+e2kzU7wWzE+mNMFM3sj+NB2hkJ7d5kGl3dLYCp0Xi4sKr4AIqENr9HN" crossorigin="anonymous" />

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.1/nord-high-contrast.css" integrity="sha384-+dERGpT4xGBLgPh6CdDJqHx/5gKONuQBFHC9cbpCMYpL8kLYKbGJKkPN+kp+bj6D" crossorigin="anonymous" />

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.1/nord-dark.css" integrity="sha384-4mfQkitA1YUssjHukrfVhopnhPw9eM2tX8Z05rZ/5NJRmDJN1fQp2gGfwydx2SzL" crossorigin="anonymous" />

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.1/nord-dark-high-contrast.css" integrity="sha384-rCKmQhE5hwQkw/+xvIuXL0kY0s6bPfv/yJXQ5I0q5YXDSNMGpJ7xb3f/1rP/tX0d" crossorigin="anonymous" />

Color Utilities

Copy code

<script src="https://nordcdn.net/ds/color/3.0.5/index.min.js" integrity="sha384-vxMH8BuLBSPx9sxDlOP3gLxWgErLnxJPyF5dL2cpT8/TqaYMWkx0LGPxffdHPN4f" crossorigin="anonymous"></script>

AG Theme Nord

Copy code

<link rel="stylesheet" href="https://nordcdn.net/ds/ag-theme-nord/3.0.6/ag-theme-nord.min.css" integrity="sha384-KtxxzG0CfkTvOLBp5WW/cz3EPs7CjEn8Tv0SJ5xwy7BjEI5xb5vKD1NFfCIFj/v7" crossorigin="anonymous" />

Available versions

Nord CDN includes versioned releases of the following packages starting from:

@nordhealth/tokens: 1.0.0 and newer
@nordhealth/themes: 2.0.0 and newer
@nordhealth/fonts: 2.0.0 and newer
@nordhealth/components: 1.0.0-alpha.23 and newer
@nordhealth/css: 1.0.0-alpha.0 and newer
@nordhealth/color: 1.0.0 and newer
@nordhealth/ag-theme-nord: 1.0.0 and newer

Can I use Nord CDN in my own project?

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see the terms of use for full license details.

Getting support

Need help with Nord CDN? Please head over to the Support page for more guidelines and ways to contact us.

Content Delivery Network

Was this page helpful?