La version française suit.

GC Design System Components

Use GC Design System web components directly in HTML. These components are framework-agnostic and behave similarly to native HTML elements.

Use this option for:

- Static sites
- CMS platforms
- Node.js
- Java
- Svelte
- .NET

If you’re using React, Angular, or Vue frameworks, browse the installation page for framework-specific options.

Documentation

You can find the full documentation for GC Design System Components on https://design-system.alpha.canada.ca/.

Npm installation instructions

$3

Navigate to your project’s root folder and run the following command:

``js
npm install @cdssnc/gcds-components
`

$3

Add the following link tags inside the head tag of your HTML files to load GC Design System:

`html

rel="stylesheet"
href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css"
/>
type="module"
src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"
>
`

$3

Once you've installed the design system, start building! Browse our available components and templates to pull the code you need into your project.

CDN installation instructions

$3

You have two options to receive updates from the CDN:

1. Use pinned version for stability (recommended).


2. Use @latest to get automatic updates.



#### a. Use pinned version (recommended)

It’s highly recommended to use this option to ensure stability and predictability in your project.

Add the following code to the head tag of your HTML files to load GC Design System. Make sure the current version is listed.

`html

rel="stylesheet"
href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@/dist/gcds/gcds.css"
/>
type="module"
src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@/dist/gcds/gcds.esm.js"
>
`

Note:
`

$3

Une fois le système de design installé, commencez à créer! Parcourez nos composants et modèles pour y trouver le code dont vous avez besoin pour votre projet.

Instructions d’installation avec CDN

$3

Vous avez deux options pour recevoir des mises à jour du CDN :

1. Utiliser la version épinglée pour la stabilité (recommandé).


2. Utiliser @latest pour obtenir des mises à jour automatiques.



#### a. Utiliser la version épinglée (recommandé)

Il est fortement recommandé d’utiliser cette option pour garantir la stabilité et la prévisibilité de votre projet.

Ajoutez le code suivant à la balise head de vos fichiers HTML pour charger Système de design GC. Assurez-vous d’indiquer la version actuelle.

`html

rel="stylesheet"
href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@/dist/gcds/gcds.css"
/>
type="module"
src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@/dist/gcds/gcds.esm.js"
>
`

Remarque :