# Cdn



# CDN usage

> Mark Design System components can be used directly via CDN without setting up a build system. Here's how to include the necessary files.

You can also experiment with Mark Design System components directly in CodePen. Look for `Edit in CodePen` button in our component examples to try them out instantly with the correct CDN configuration.

## Required Files

Add these files to your HTML:

<CdnExample />

## Usage Example

Here's a complete example showing how to use Mark Design System components:

<FullExample />

## Version Information

The CDN URLs include version numbers to ensure stability in your applications. We recommend pinning to specific versions to avoid unexpected changes. The examples above use our latest stable versions:

- UI Components v{uiVersion}
- Tokens v{tokensVersion}
- Fonts v{fontsVersion}

## Subresource Integrity

For enhanced security, you can add integrity checks to your CDN imports. The integrity values for each file can be found at: `https://cdn.grade.design/mark/{package}/{version}/integrity.json`

Example with integrity:

```html
<script
  type="module"
  src="https://cdn.grade.design/mark/ui/${uiVersion}/index.js"
  integrity="[value from integrity.json]"
  crossorigin="anonymous"
></script>
```