<!--TODO : Enlever les commentaires avant de déployer votre code en production. -->
<!DOCTYPE html>
<html dir="ltr" lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--TODO: Ajouter une description de la page pour améliorer le référencement naturel/SEO ainsi que les aperçus de partage. -->
<meta
name="description"
content="Ajouter une description qui résume brièvement le contenu."
/>
<!--TODO : Insérer un titre concis et descriptif qui résume le contenu de votre page. -->
<title>Modèle de page de base (FR)</title>
<!---------- Système de design GC Raccourcis CSS ---------->
<!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes de Raccourcis CSS du Système de design GC. Tout changement important sera consigné dans le journal des modifications: https://github.com/cds-snc/gcds-css-shortcuts/blob/main/CHANGELOG.md -->
<link
rel="stylesheet"
href="https://cdn.design-system.canada.ca/@gcds-core/css-shortcuts@1.2.0/dist/gcds-css-shortcuts.min.css"
/>
<!---------- GC Design System Components ---------->
<!-- TODO : Remplacez <version-number> par le numéro de version le plus récent pour recevoir les mises à jour correspondantes des composants de Système de design GC. Tout changement important sera consigné dans le journal des modifications https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
<link
rel="stylesheet"
href="https://cdn.design-system.canada.ca/@gcds-core/components@1.6.0/dist/gcds/gcds.css"
/>
<script
type="module"
src="https://cdn.design-system.canada.ca/@gcds-core/components@1.6.0/dist/gcds/gcds.esm.js"
></script>
<!-- Styles personnalisés -->
<!--TODO : Au besoin, décommenter et lier votre fichier CSS personnalisé ici. -->
<!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
</head>
<body>
<!---------- Header ---------->
<!--TODO : Modifier le lang-href pour définir l'URL de la bascule de langue. -->
<!--TODO : Mettre à jour le skip-to-href avec l'attribut <id> du conteneur du contenu principal. -->
<gcds-header lang-href="#" skip-to-href="#main-content">
<!-- L'attribut slot="search" ajoute le composant recherche à l'en-tête. -->
<gcds-search slot="search"></gcds-search>
<!-- L'attribut slot="breadcrumb" ajoute le composant chemin de navigation à l'en-tête. -->
<gcds-breadcrumbs slot="breadcrumb">
<!--À faire : Remplacer les liens du chemin de navigation avec les liens valides pour votre site. -->
<gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
<gcds-breadcrumbs-item href="#">Lien</gcds-breadcrumbs-item>
</gcds-breadcrumbs>
</gcds-header>
<!---------- Main content ---------->
<!--TODO : Confirmez que l'attribut id correspond à l'attribut id de skip-to-href dans l'en-tête. -->
<gcds-container
id="main-content"
layout="page"
tag="main"
>
<!--TODO : Mettre à jour le contenu du titre et du texte. -->
<section>
<gcds-heading tag="h1">Page de base</gcds-heading>
<gcds-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
egestas maecenas pharetra convallis posuere morbi leo urna.
</gcds-text>
</section>
<section>
<gcds-heading tag="h2">Section 1</gcds-heading>
<gcds-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
egestas maecenas pharetra convallis posuere morbi leo urna.
</gcds-text>
<gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
<gcds-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
egestas maecenas pharetra convallis posuere morbi leo urna.
</gcds-text>
<gcds-heading tag="h3">Titre de la sous-section</gcds-heading>
<gcds-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
egestas maecenas pharetra convallis posuere morbi leo urna.
</gcds-text>
</section>
<section>
<gcds-heading tag="h2">Section 2</gcds-heading>
<gcds-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
egestas maecenas pharetra convallis posuere morbi leo urna.
</gcds-text>
</section>
<section>
<gcds-heading tag="h2">Section 3</gcds-heading>
<gcds-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
egestas maecenas pharetra convallis posuere morbi leo urna.
</gcds-text>
</section>
<!--TODO : Mettre à jour la date pour qu'elle reflète le changement le plus récent de la page. -->
<gcds-date-modified>22-08-2024</gcds-date-modified>
</gcds-container>
<!---------- Footer ---------->
<!--TODO : Au besoin, mettre à jour ou enlever le titre et les liens de la bande contextuelle du pied de page. -->
<gcds-footer
display="full"
contextual-heading="Service numérique canadien"
contextual-links='{ "Pourquoi Notification GC": "#","Fonctionnalités": "#", "Activité sur Notification GC": "#"}'
>
</gcds-footer>
</body>
</html>