From ae058cfd2b195fd85b1ff89a3ce994171eba8493 Mon Sep 17 00:00:00 2001
From: delisma <david@elismatiq.com>
Date: Thu, 23 Oct 2025 15:15:02 -0400
Subject: [PATCH] feat: add topic page templates (English/French) with CSS
 shortcuts

---
 templates/assets/icons/facebook.svg     |  12 ++
 templates/assets/icons/instagram.svg    |  13 ++
 templates/assets/icons/linkedin.svg     |  11 +
 templates/assets/icons/x.svg            |   9 +
 templates/assets/icons/youtube.svg      |  18 ++
 templates/english/topic-page/index.html | 269 ++++++++++++++++++++++++
 templates/french/page-sujet/index.html  | 269 ++++++++++++++++++++++++
 7 files changed, 601 insertions(+)
 create mode 100644 templates/assets/icons/facebook.svg
 create mode 100644 templates/assets/icons/instagram.svg
 create mode 100644 templates/assets/icons/linkedin.svg
 create mode 100644 templates/assets/icons/x.svg
 create mode 100644 templates/assets/icons/youtube.svg
 create mode 100644 templates/english/topic-page/index.html
 create mode 100644 templates/french/page-sujet/index.html

diff --git a/templates/assets/icons/facebook.svg b/templates/assets/icons/facebook.svg
new file mode 100644
index 00000000..e0bc0059
--- /dev/null
+++ b/templates/assets/icons/facebook.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+	<g transform="matrix(1,0,0,1,0,90.0476)">
+		<g transform="matrix(0.078125,0,0,0.078125,40,-50.0476)">
+			<g transform="matrix(1,0,0,1,-512,-512)">
+				<path d="M1024,512C1024,229.23 794.77,0 512,0C229.23,0 0,229.23 0,512C0,767.554 187.231,979.37 432,1017.78L432,660L302,660L302,512L432,512L432,399.2C432,270.88 508.438,200 625.39,200C681.407,200 740,210 740,210L740,336L675.438,336C611.835,336 592,375.467 592,415.957L592,512L734,512L711.3,660L592,660L592,1017.78C836.769,979.37 1024,767.554 1024,512Z" style="fill:rgb(24,119,242);fill-rule:nonzero;"/>
+				<path d="M711.3,660L734,512L592,512L592,415.957C592,375.467 611.835,336 675.438,336L740,336L740,210C740,210 681.407,200 625.39,200C508.438,200 432,270.88 432,399.2L432,512L302,512L302,660L432,660L432,1017.78C458.067,1021.87 484.784,1024 512,1024C539.216,1024 565.933,1021.87 592,1017.78L592,660L711.3,660Z" style="fill:white;fill-rule:nonzero;"/>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/templates/assets/icons/instagram.svg b/templates/assets/icons/instagram.svg
new file mode 100644
index 00000000..4889ba2f
--- /dev/null
+++ b/templates/assets/icons/instagram.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" ?>
+<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg enable-background="new 0 0 128 128" width="100%" height="100%" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<linearGradient gradientTransform="matrix(1 0 0 -1 594 633)" gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="-566.7114" x2="-493.2875" y1="516.5693" y2="621.4296">
+		<stop offset="0" style="stop-color:#FFB900"/><stop offset="1" style="stop-color:#9100EB"/>
+	</linearGradient>
+	<circle cx="64" cy="64" fill="url(#SVGID_1_)" r="64"/>
+	<g transform="matrix(0.8,0,0,0.8,12.8,12.8)">
+		<path d="M 82.333,104 H 45.667 C 33.72,104 24,94.281 24,82.333 V 45.667 C 24,33.719 33.72,24 45.667,24 H 82.333 C 94.281,24 104,33.719 104,45.667 V 82.334 C 104,94.281 94.281,104 82.333,104 Z M 45.667,30.667 c -8.271,0 -15,6.729 -15,15 v 36.667 c 0,8.271 6.729,15 15,15 h 36.666 c 8.271,0 15,-6.729 15,-15 V 45.667 c 0,-8.271 -6.729,-15 -15,-15 z" fill="#FFFFFF"/>
+		<path d="M 64,84 C 52.972,84 44,75.027 44,64 44,52.971 52.972,44 64,44 c 11.028,0 20,8.971 20,20 0,11.027 -8.972,20 -20,20 z m 0,-33.333 c -7.352,0 -13.333,5.981 -13.333,13.333 0,7.353 5.981,13.333 13.333,13.333 7.352,0 13.333,-5.98 13.333,-13.333 0,-7.352 -5.98,-13.333 -13.333,-13.333 z" fill="#FFFFFF"/>
+		<circle cx="85.25" cy="42.75" fill="#FFFFFF" r="4.583"/>
+	</g>
+</svg>
diff --git a/templates/assets/icons/linkedin.svg b/templates/assets/icons/linkedin.svg
new file mode 100644
index 00000000..73d1e013
--- /dev/null
+++ b/templates/assets/icons/linkedin.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns:serif="http://www.serif.com/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<circle fill="#2867B2" cx="16" cy="16" r="16"/>
+	<path fill="#FFFFFF" d="M20.551,9.197H9.03c-0.515,0-0.966,0.451-1.03,0.965v11.584c0,0.518,0.451,0.965,1.03,0.965h11.521 c0.516,0,0.965-0.447,1.03-0.965V10.162C21.581,9.648,21.131,9.197,20.551,9.197z M12.056,20.717H10.06v-6.436h1.996V20.717z M11.025,13.378c-0.643,0-1.158-0.514-1.158-1.156c0-0.644,0.515-1.159,1.158-1.159c0.644,0,1.158,0.516,1.158,1.159 C12.183,12.865,11.669,13.378,11.025,13.378z M19.583,20.717h-1.992v-3.156c0-0.77,0-1.735-1.031-1.735 c-1.03,0-1.221,0.838-1.221,1.672v3.219h-1.997v-6.436h1.93v0.902c0.389-0.645,1.096-1.096,1.87-1.03 c2.058,0,2.379,1.351,2.379,3.089L19.583,20.717z"/>
+	<!-- Registered symbol -->
+	<g>
+		<path fill="#FFFFFF" d="M23.047,22.803c-0.525,0-0.953-0.428-0.953-0.953s0.428-0.953,0.953-0.953S24,21.324,24,21.85 S23.572,22.803,23.047,22.803z M23.047,21.09c-0.419,0-0.76,0.342-0.76,0.76c0,0.42,0.341,0.76,0.76,0.76s0.76-0.34,0.76-0.76 C23.807,21.432,23.466,21.09,23.047,21.09z"/>
+		<path fill="#FFFFFF" d="M22.994,21.773c0.054,0,0.092-0.012,0.115-0.031s0.036-0.053,0.036-0.1c0-0.045-0.013-0.076-0.036-0.098 c-0.023-0.02-0.062-0.029-0.115-0.029h-0.108v0.258H22.994 M22.886,21.949v0.379h-0.257V21.33h0.393 c0.132,0,0.228,0.021,0.289,0.066c0.062,0.043,0.092,0.113,0.092,0.209c0,0.066-0.016,0.119-0.048,0.162 c-0.032,0.041-0.079,0.074-0.145,0.094c0.036,0.008,0.067,0.027,0.096,0.055c0.027,0.027,0.056,0.07,0.084,0.129l0.141,0.283 h-0.274l-0.122-0.248c-0.024-0.051-0.049-0.084-0.074-0.102c-0.025-0.02-0.06-0.029-0.101-0.029H22.886"/>
+	</g>
+</svg>
diff --git a/templates/assets/icons/x.svg b/templates/assets/icons/x.svg
new file mode 100644
index 00000000..d87397cc
--- /dev/null
+++ b/templates/assets/icons/x.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1197.9 1197.9" style="enable-background:new 0 0 1197.9 1197.9;" xml:space="preserve">
+<circle cx="598.9" cy="598.9" r="598.9"/>
+<path class="st0" d="M653.7,568.7l210.9-245.1h-50L631.5,536.4L485.2,323.5H316.5l221.2,321.9L316.5,902.5h50l193.4-224.8
+l154.4,224.8H883L653.7,568.7L653.7,568.7z M585.2,648.2l-22.4-32l-178.3-255h76.8L605.1,567l22.4,32l187,267.5h-76.8L585.2,648.2
+L585.2,648.2z" style="fill:white;fill-rule:nonzero;"/>
+</svg>
diff --git a/templates/assets/icons/youtube.svg b/templates/assets/icons/youtube.svg
new file mode 100644
index 00000000..a84e6b07
--- /dev/null
+++ b/templates/assets/icons/youtube.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+	<g transform="matrix(1,0,0,1,1.42109e-14,-179.959)">
+		<g id="Youtube" transform="matrix(1,0,0,1,-360,-491.843)">
+			<g serif:id="Youtube" transform="matrix(0.59477,0,0,0.640915,262.596,584.904)">
+				<ellipse cx="231.021" cy="197.995" rx="67.253" ry="62.411" style="fill:rgb(255,0,0);"/>
+			</g>
+			<g transform="matrix(0.296875,0,0,0.296875,400,711.802)">
+				<g transform="matrix(1,0,0,1,-96,-96)">
+					<g transform="matrix(1,0,0,1,78,69.8309)">
+						<path d="M0,52.338L0,0L46,26.17L0,52.338ZM102.322,-16.468C100.298,-24.09 94.334,-30.092 86.762,-32.129C73.037,-35.831 18,-35.831 18,-35.831C18,-35.831 -37.037,-35.831 -50.762,-32.129C-58.334,-30.092 -64.298,-24.09 -66.322,-16.468C-70,-2.654 -70,26.169 -70,26.169C-70,26.169 -70,54.991 -66.322,68.806C-64.298,76.428 -58.334,82.43 -50.762,84.468C-37.037,88.169 18,88.169 18,88.169C18,88.169 73.037,88.169 86.762,84.468C94.334,82.43 100.298,76.428 102.322,68.806C106,54.991 106,26.169 106,26.169C106,26.169 106,-2.654 102.322,-16.468" style="fill:white;fill-rule:nonzero;"/>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/templates/english/topic-page/index.html b/templates/english/topic-page/index.html
new file mode 100644
index 00000000..10600f9e
--- /dev/null
+++ b/templates/english/topic-page/index.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Topic page template - CSS shortcuts</title>
+    <meta name="description" content="A simple, clean template demonstrating the topic page structure with common GCDS components and CSS shortcuts." />
+    <!-- GC Design System -->
+    <link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@1.9.2/dist/gcds-utility.min.css" />
+    <link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.43.1/dist/gcds/gcds.css" />
+    <script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.43.1/dist/gcds/gcds.esm.js"></script>
+    <style>
+      /* vertical bar list style, could be used with Indigenous language toggles too */
+
+      @media (min-width: 1024px) {
+
+        ul.gc-vertical-bar li:not(:only-child)::after {
+          content: "|";
+          padding: var(--gcds-spacing-0) var(--gcds-spacing-100);
+          font-weight: var(--gcds-font-weights-bold);
+        }
+      }
+
+      .gc-feature .gc-feature-hover:hover {
+        background-color: var(--gcds-card-background-color);
+        box-shadow: var(--gcds-card-box-shadow);
+        overflow: hidden;
+        position: relative;
+      }
+
+      /* position the image properly */
+      .gc-contain-fit img {
+        object-fit: contain; /* this preserves aspect ratio, no CSS shortcuts available to fix this JM can find */
+      }
+
+      .gc-stretched-link:after {
+        bottom: 0;
+        content: "";
+        left: 0;
+        pointer-events: auto;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1
+      }
+
+      /* Social media icon styles */
+
+      .gc-social-media-item a::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 34px;
+        height: 34px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        border-radius: var(--gcds-border-radius-xl);
+      }
+
+      /* Social media icons */
+      .gc-social-media-item.facebook a::before {
+        background-image: url("../../assets/icons/facebook.svg");
+      }
+
+      .gc-social-media-item.x-social a::before {
+        background-image: url("../../assets/icons/x.svg");
+      }
+
+      .gc-social-media-item.youtube a::before {
+        background-image: url("../../assets/icons/youtube.svg");
+      }
+
+      .gc-social-media-item.instagram a::before {
+        background-image: url("../../assets/icons/instagram.svg");
+      }
+
+      .gc-social-media-item.linkedin a::before {
+        background-image: url("../../assets/icons/linkedin.svg");
+      }
+    </style>
+  </head>
+  <body>
+    <gcds-header signature-has-link="true" skip-to-href="#main-content" lang-href="../../french/page-sujet/">
+      <!-- Search component in header (optional, can be removed if not needed) -->
+      <gcds-search slot="search"></gcds-search>
+      <!-- Breadcrumbs component in header (optional, can be customized per page) -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <gcds-breadcrumbs-item href="#">GCDS Examples</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+    <main id="main-content" role="main">
+      <gcds-container size="xl" tag="section" main-container centered>
+        <gcds-grid columns="1" columns-tablet="1" columns-desktop="1fr 1fr">
+          <div class="lg:mb-300">
+            <gcds-heading tag="h1" character-limit="false">Topic page template - CSS shortcuts</gcds-heading>
+            <p class="mb-0">The introduction block pattern introduces the content of a topic page.</p>
+          </div>
+          <div class="d-flex justify-content-end gc-contain-fit">
+            <img src="https://dummyimage.com/520x200/000000/FFFFFF.png" class="lg:d-block d-none" alt="">
+          </div>
+        </gcds-grid>
+      </gcds-container>
+
+      <!-- Most Requested Section -->
+      <section class="pb-200 pt-300" style="background-color: var(--gcds-color-grayscale-50)">
+        <gcds-container size="xl" main-container centered>
+          <gcds-grid columns="1" columns-tablet="1" columns-desktop="auto 1fr">
+            <!-- Heading column -->
+            <h2 class="limit mt-0 mb-0 font-size-h3">Most requested</h2> 
+            <!-- Links column -->
+            <ul class="line-text-small font-size-text-small font-family-heading font-bold mb-200 list-disc d-grid md:grid-cols-2 gap-x-300 gap-y-200 lg:mt-100">
+              <li>
+                <gcds-link href="#">[Top task hyperlink with a very long task name that spans over two lines 1]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Top task hyperlink 2]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Top task hyperlink 3]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Top task hyperlink 4]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Top task hyperlink 5]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Top task hyperlink 6]</gcds-link>
+              </li>
+            </ul>
+          </gcds-grid>
+        </gcds-container>
+      </section>
+
+      <!-- Services and Information Section -->
+      <gcds-container size="xl" tag="section" main-container centered >
+        <h2 class="font-size-h3 mt-400 visibility-sr-only">Services and information</h2> <!-- this is usually hidden as standard, but visible to view to work -->
+        <gcds-grid columns="1" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" class="mb-400 mt-400">
+          <!-- Service Item 1 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+            <!-- <gcds-text size="small" margin-top="100" margin-bottom="200"> filed issue #293 for of responsive typography controls -->
+          </div>
+
+          <!-- Service Item 2 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 3 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 4 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 5 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 6 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 7 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 8 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+
+          <!-- Service Item 9 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p>
+          </div>
+        </gcds-grid>
+
+        <!-- Featured: single feature -->
+        <gcds-grid columns="3" columns-tablet="1" columns-desktop="2fr 1fr" class="mt-400 mb-400">
+          <div class="gc-feature">
+            <h2 class="font-size-h3 mt-0 mb-300 visibility-sr-only">Featured</h2>
+            <gcds-grid class="lg:pt-100 lg:ps-100 lg:mt-400 lg:mb-400 xs:mb-0 hydrated gap-0 position-relative gc-feature-hover" columns="1fr" columns-desktop="1fr 1fr" align-items="start">
+              <div>
+                <img class="img-responsive pe-100"src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="">
+              </div>
+              <div class="lg:mt-300 xs:mb-0 xs:mt-0">
+                <a class="mt-0 font-h5 gc-stretched-link hover:link-hover link-default" href="#">[Feature hyperlink text]</a>
+                <p class="mt-100 font-size-text-small">Brief description of the feature being promoted.</p>
+              </div>
+            </gcds-grid>
+          </div>
+        <!-- Social media -->
+          <div>
+            <section class="mb-400">
+              <h2 class="font-size-h3 mt-0 mb-300">On social media</h2>
+              <ul class="font-bold font-size-text-small ms-300 d-grid gap-y-200">
+                <li class="gc-social-media-item facebook">
+                  <a href="#" class="py-100 pe-100 facebook hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>Facebook: </gcds-sr-only>FacebookPageName&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item x-social">
+                  <a href="#" class="py-100 pe-100 x-social hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>X: </gcds-sr-only>@XAccount&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item youtube">
+                  <a href="#" class="py-100 pe-100 youtube hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>YouTube: </gcds-sr-only>YouTubeName&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item instagram">
+                  <a href="#" class="py-100 pe-100 instagram hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>Instagram: </gcds-sr-only>InstagramName&nbsp; <gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item linkedin">
+                  <a href="#" class="py-100 pe-100 linkedin hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>LinkedIn: </gcds-sr-only>LinkedInName&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </div>
+        </gcds-grid>
+
+        <gcds-grid columns="2" columns-tablet="1" columns-desktop="auto 1fr" class="mt-400 mb-400">
+          <!-- JM: another use case for responsive typography being impacted by prefixes, if I use font-size-text for the h2 it gets too small in mobile, but is perfect for desktop -->
+          <div class="lg:d-flex lg:align-items-start">
+            <h2 class="font-size-text mt-0 xs:mb-100 lg:mb-0 lg:me-100">From:</h2>
+            <ul class="gc-vertical-bar font-size-text-small font-bold line-text-small mt-0 d-grid gap-y-100 xs:list-disc lg:list-none lg:flex-wrap lg:d-flex lg:ms-0">
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Department or agency 1</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Department or agency 2</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Department or agency 3</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Department or agency 4</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Department or agency 5</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Department or agency 6</a></li>
+            </ul>
+          </div>
+        </gcds-grid>
+      </gcds-container> 
+    </main>
+    <!-- Date modified component -->
+    <gcds-container size="xl" tag="section" main-container centered>
+      <gcds-date-modified>2025-10-22</gcds-date-modified>
+    </gcds-container>
+    <gcds-footer display="full" contextual-heading="GC Design System Examples" contextual-links='{"GitHub":"https://github.com/gc-proto/gcds-examples"}'></gcds-footer>
+  </body>
+</html>
diff --git a/templates/french/page-sujet/index.html b/templates/french/page-sujet/index.html
new file mode 100644
index 00000000..a8fd4628
--- /dev/null
+++ b/templates/french/page-sujet/index.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gabarit de page de sujet - Racourcis CSS</title>
+    <meta name="description" content="Un gabarit simple et épuré démontrant la structure de la page de sujet avec des composants GCDS courants et des raccourcis CSS." />
+    <!-- GC Design System -->
+    <link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@1.9.2/dist/gcds-utility.min.css" />
+    <link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.43.1/dist/gcds/gcds.css" />
+    <script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.43.1/dist/gcds/gcds.esm.js"></script>
+    <style>
+      /* vertical bar list style, could be used with Indigenous language toggles too */
+
+      @media (min-width: 1024px) {
+
+        ul.gc-vertical-bar li:not(:only-child)::after {
+          content: "|";
+          padding: var(--gcds-spacing-0) var(--gcds-spacing-100);
+          font-weight: var(--gcds-font-weights-bold);
+        }
+      }
+
+      .gc-feature .gc-feature-hover:hover {
+        background-color: var(--gcds-card-background-color);
+        box-shadow: var(--gcds-card-box-shadow);
+        overflow: hidden;
+        position: relative;
+      }
+
+      /* position the image properly */
+      .gc-contain-fit img {
+        object-fit: contain; /* this preserves aspect ratio, no CSS shortcuts available to fix this JM can find */
+      }
+
+      .gc-stretched-link:after {
+        bottom: 0;
+        content: "";
+        left: 0;
+        pointer-events: auto;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1
+      }
+
+      /* Social media icon styles */
+
+      .gc-social-media-item a::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 34px;
+        height: 34px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        border-radius: var(--gcds-border-radius-xl);
+      }
+
+      /* Social media icons */
+      .gc-social-media-item.facebook a::before {
+        background-image: url("../../assets/icons/facebook.svg");
+      }
+
+      .gc-social-media-item.x-social a::before {
+        background-image: url("../../assets/icons/x.svg");
+      }
+
+      .gc-social-media-item.youtube a::before {
+        background-image: url("../../assets/icons/youtube.svg");
+      }
+
+      .gc-social-media-item.instagram a::before {
+        background-image: url("../../assets/icons/instagram.svg");
+      }
+
+      .gc-social-media-item.linkedin a::before {
+        background-image: url("../../assets/icons/linkedin.svg");
+      }
+    </style>
+  </head>
+  <body>
+    <gcds-header signature-has-link="true" skip-to-href="#main-content" lang-href="../../english/topic-page/">
+      <!-- Search component in header (optional, can be removed if not needed) -->
+      <gcds-search slot="search"></gcds-search>
+      <!-- Breadcrumbs component in header (optional, can be customized per page) -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <gcds-breadcrumbs-item href="#">GCDS Exemples</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+    <main id="main-content" role="main">
+      <gcds-container size="xl" tag="section" main-container centered>
+        <gcds-grid columns="1" columns-tablet="1" columns-desktop="1fr 1fr">
+          <div class="lg:mb-300">
+            <gcds-heading tag="h1" character-limit="false">Gabarit de page de sujet - Racourcis CSS</gcds-heading>
+            <p class="mb-0">Le modèle de bloc d'introduction présente le contenu d'une page de sujet.</p>
+          </div>
+          <div class="d-flex justify-content-end gc-contain-fit">
+            <img src="https://dummyimage.com/520x200/000000/FFFFFF.png" class="lg:d-block d-none" alt="">
+          </div>
+        </gcds-grid>
+      </gcds-container>
+
+      <!-- Most Requested Section -->
+      <section class="pb-200 pt-300" style="background-color: var(--gcds-color-grayscale-50)">
+        <gcds-container size="xl" main-container centered>
+          <gcds-grid columns="1" columns-tablet="1" columns-desktop="auto 1fr">
+            <!-- Heading column -->
+            <h2 class="limit mt-0 mb-0 font-size-h3">En demande</h2> 
+            <!-- Links column -->
+            <ul class="line-text-small font-size-text-small font-family-heading font-bold mb-200 list-disc d-grid md:grid-cols-2 gap-x-300 gap-y-200 lg:mt-100">
+              <li>
+                <gcds-link href="#">[Lien vers une tâche principale avec un nom de tâche très long qui s'étend sur deux lignes 1]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Lien vers une tâche principale 2]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Lien vers une tâche principale 3]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Lien vers une tâche principale 4]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Lien vers une tâche principale 5]</gcds-link>
+              </li>
+              <li>
+                <gcds-link href="#">[Lien vers une tâche principale 6]</gcds-link>
+              </li>
+            </ul>
+          </gcds-grid>
+        </gcds-container>
+      </section>
+
+      <!-- Services and Information Section -->
+      <gcds-container size="xl" tag="section" main-container centered >
+        <h2 class="font-size-h3 mt-400 visibility-sr-only">Services et informations</h2> <!-- this is usually hidden as standard, but visible to view to work -->
+        <gcds-grid columns="1" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" class="mb-400 mt-400">
+          <!-- Service Item 1 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+            <!-- <gcds-text size="small" margin-top="100" margin-bottom="200"> filed issue #293 for of responsive typography controls -->
+          </div>
+
+          <!-- Service Item 2 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 3 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 4 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 5 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 6 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 7 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 8 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+
+          <!-- Service Item 9 -->
+          <div>
+            <gcds-link class="font-family-heading font-bold mt-0" href="#">[Texte de l'hyperlien]</gcds-link>
+            <p class="font-size-text-small lg:mb-200 xs:mb-0">Utilisez des verbes d'action, ou inscrivez simplement des mots-clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée</p>
+          </div>
+        </gcds-grid>
+
+        <!-- Featured: single feature -->
+        <gcds-grid columns="3" columns-tablet="1" columns-desktop="2fr 1fr" class="mt-400 mb-400">
+          <div class="gc-feature">
+            <h2 class="font-size-h3 mt-0 mb-300 visibility-sr-only">Featured</h2>
+            <gcds-grid class="lg:pt-100 lg:ps-100 lg:mt-400 lg:mb-400 xs:mb-0 hydrated gap-0 position-relative gc-feature-hover" columns="1fr" columns-desktop="1fr 1fr" align-items="start">
+              <div>
+                <img class="img-responsive pe-100"src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="">
+              </div>
+              <div class="lg:mt-300 xs:mb-0 xs:mt-0">
+                <a class="mt-0 font-h5 gc-stretched-link hover:link-hover link-default" href="#">[Lien vers de l'élément en vedette]</a>
+                <p class="mt-100 font-size-text-small">Brève description de l'élément en vedette.</p>
+              </div>
+            </gcds-grid>
+          </div>
+        <!-- Social media -->
+          <div>
+            <section class="mb-400">
+              <h2 class="font-size-h3 mt-0 mb-300">Dans les médias sociaux</h2>
+              <ul class="font-bold font-size-text-small ms-300 d-grid gap-y-200">
+                <li class="gc-social-media-item facebook">
+                  <a href="#" class="py-100 pe-100 facebook hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>Facebook: </gcds-sr-only>NomPageFacebook&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item x-social">
+                  <a href="#" class="py-100 pe-100 x-social hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>X: </gcds-sr-only>@CompteX&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item youtube">
+                  <a href="#" class="py-100 pe-100 youtube hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>YouTube: </gcds-sr-only>NomChaîneYouTube&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item instagram">
+                  <a href="#" class="py-100 pe-100 instagram hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>Instagram: </gcds-sr-only>NomInstagram&nbsp; <gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+                <li class="gc-social-media-item linkedin">
+                  <a href="#" class="py-100 pe-100 linkedin hover:link-underline hover:link-hover focus:link-light link-no-underline link-default position-relative ps-600">
+                    <gcds-sr-only>LinkedIn: </gcds-sr-only>NomLinkedIn&nbsp;<gcds-icon name="external"></gcds-icon>
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </div>
+        </gcds-grid>
+
+        <gcds-grid columns="2" columns-tablet="1" columns-desktop="auto 1fr" class="mt-400 mb-400">
+          <!-- JM: another use case for responsive typography being impacted by prefixes, if I use font-size-text for the h2 it gets too small in mobile, but is perfect for desktop -->
+          <div class="lg:d-flex lg:align-items-start">
+            <h2 class="font-size-text mt-0 xs:mb-100 lg:mb-0 lg:me-100">De&nbsp;:</h2>
+            <ul class="gc-vertical-bar font-size-text-small font-bold line-text-small mt-0 d-grid gap-y-100 xs:list-disc lg:list-none lg:flex-wrap lg:d-flex lg:ms-0">
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Ministère ou agence 1</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Ministère ou agence 2</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Ministère ou agence 3</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Ministère ou agence 4</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Ministère ou agence 5</a></li>
+              <li class="font-family-heading"><a class="hover:link-hover link-default" href="#">Ministère ou agence 6</a></li>
+            </ul>
+          </div>
+        </gcds-grid>
+      </gcds-container> 
+    </main>
+    <!-- Date modified component -->
+    <gcds-container size="xl" tag="section" main-container centered>
+      <gcds-date-modified>2025-10-22</gcds-date-modified>
+    </gcds-container>
+    <gcds-footer display="full" contextual-heading="GC Design System Examples" contextual-links='{"GitHub":"https://github.com/cds-snc/gcds-examples"}'></gcds-footer>
+  </body>
+</html>