diff --git a/_data/common.json b/_data/common.json index 4e89a210d8..216b5cbc17 100644 --- a/_data/common.json +++ b/_data/common.json @@ -484,6 +484,40 @@ ] } } +,{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Spacing", + "fr": "Espacement" + }, + "description": { + "en": "Utility classes to add spacing between elements.", + "fr": "Classes utilitaires pour ajouter de l'espacement entre des éléments." + }, + "modified": "2024-11-22", + "componentName": "spacing", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Spacing", + "language": "en", + "path": "spacing-en.html" + }, + { + "title": "Espacement", + "language": "fr", + "path": "spacing-fr.html" + } + ] + } +} ,{ "@context": { "@version": 1.1, diff --git a/_data/templates.json b/_data/templates.json index 3f4fb2910f..dfbb567d52 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -83,6 +83,134 @@ ] } } +,{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "All services", + "fr": "Tous les services" + }, + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "modified": "2024-11-21", + "componentName": "all-services", + "status": "stable", + "version": "1.0", + "pages": { + "examples": [ + { + "title": "All services", + "language": "en", + "path": "all-services-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-fr.html" + } + ], + "docs": [ + { + "title": "All services", + "language": "en", + "path": "all-services-doc-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-doc-fr.html" + } + ] + }, + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "All services", + "fr": "Tous les services" + }, + "status": "stable", + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "iteration": "_:iteration_allservices_1", + "example": [ + { + "en": { "href": "all-services-en.html", "text": "All services" }, + "fr": { "href": "all-services-fr.html", "text": "Tous les services" } + } + ], + "implementation": [ + "_:implement_allservices" + ], + "history": [ + { + "en": "November 2024 - Initial implementation of the page template.", + "fr": "Novembre 2024 - Implémentation initiale du gabarit de page." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_allservices", + "iteration": "_:iteration_allservices_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for publishers adding the template manually into an AEM page.", + "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM." + + }, + "instructions": { + "en": [ + "Refer to the working example and guidance for more information on how to implement this page template." + ], + "fr": [ + "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page." + ] + }, + "ajaxSourceCode": { + "en": "all-services-en.html main > *:not(.pagedetails)", + "fr": "all-services-fr.html main > *:not(.pagedetails)" + } + } + ], + "iteration": [ + { + "@id": "_:iteration_allservices_1", + "name": "All services page - Iteration 1", + "date": "2024-11", + "detectableBy": "Three navigation bands followed by a series of
elements for all goc themes and topics." + } + ], + "changesets": [ + { + "@id": "_:cs_allservices", + "name": "Topic page", + "status": "stable", + "baseOnIteration": "_:iteration_allservices_1", + "detectableBy": "By the sequence of elements.", + "layout": [ + "Top serches navigation band", + "Most requested services navigation band", + "Supporting through life's transitions navigation band", + "Most requested - version 1 (optional)", + "Series of
elements for all goc themes and topics" + ] + } + ] +} ,{ "@context": { "@version": 1.1, diff --git a/common/colour/_colours.scss b/common/colour/_colours.scss new file mode 100644 index 0000000000..65593ccf7f --- /dev/null +++ b/common/colour/_colours.scss @@ -0,0 +1,9 @@ +/* + * + * @title: Colours + * + */ + +.bg-light { + background-color: $well-bg; +} diff --git a/common/colour/colour-en.html b/common/colour/colour-en.html index 4524f0756b..300f11aaf1 100644 --- a/common/colour/colour-en.html +++ b/common/colour/colour-en.html @@ -8,6 +8,8 @@ } --- +
+

This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: bg-primary, text-center, text-white and others.

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

@@ -288,7 +290,7 @@

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
 	<h5 class="mrgn-tp-md">Heading</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div>

bg-dark

Set a dark background to an element.

@@ -302,4 +304,18 @@

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
 	<h5 class="mrgn-tp-md">Heading</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div> + +

bg-light

+

Set a light background to an element.

+

Working example

+
+
Heading
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

+
+ +

Code sample

+
<div class="bg-light">
+	<h5>Heading</h5>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
+</div>
diff --git a/common/colour/colour-fr.html b/common/colour/colour-fr.html index 323b3c19e4..7739ae05a3 100644 --- a/common/colour/colour-fr.html +++ b/common/colour/colour-fr.html @@ -8,6 +8,8 @@ } --- +
+

Cette page présente les fonctionnalités de l'utilitaire wet-boew, y compris certaines intégrations de Bootstrap 4 telles que: bg-primary, text-center, text-white et d'autres.

Veuillez noter que certaines classes Bootstrap 4 rétroportées ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale de la petite vue (sm) est de 768px dans Bootstrap 3.4, par opposition à 576px dans Bootstrap 4.

@@ -261,20 +263,20 @@

Exemple de code

<h5 class="mrgn-tp-md">Titre</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p> </div> - </div> +</div> -

bg-gctheme

-

définir l'arrière-plan du gctheme

-

Exemple

-
-
Titre
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

-
-

Exemple de code

- 
<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
-			<h5 class="mrgn-tp-md">Titre</h5>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+

bg-gctheme

+

définir l'arrière-plan du gctheme

+

Exemple

+
+
Titre
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

+
+

Exemple de code

+
<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
+	<h5 class="mrgn-tp-md">Titre</h5>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
+</div>

bg-darker

Définissez un arrière-plan noir sur un élément.

@@ -288,7 +290,7 @@

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
 	<h5 class="mrgn-tp-md">Titre</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div>

bg-dark

Définissez un arrière-plan sombre sur un élément.

@@ -302,4 +304,18 @@

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
 	<h5 class="mrgn-tp-md">Titre</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div> + +

bg-light

+

Définissez un arrière-plan pâle sur un élément.

+

Exemple

+
+
Titre
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

+
+ +

Exemple de code

+
<div class="bg-light">
+	<h5>Titre</h5>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
+</div>
diff --git a/common/list/_lists.scss b/common/list/_lists.scss index f4b2a202b5..0e8e6f2c99 100644 --- a/common/list/_lists.scss +++ b/common/list/_lists.scss @@ -175,3 +175,16 @@ div.list-advanced.circle>ul, ul.circle { div.list-advanced.square>ul, ul.square { list-style-type:square; } + +/* + * GCWeb/AEM: Custom CSS for list styling with navigation links. + */ + +ul.nav-links { + li { + font-family: Lato, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 1.5em; + } +} diff --git a/common/list/lists-en.html b/common/list/lists-en.html index 0963b25895..3e6488929f 100644 --- a/common/list/lists-en.html +++ b/common/list/lists-en.html @@ -408,3 +408,16 @@

Inline description list

<dt>Term :</dt> <dd>Short description</dd> </dl> + + + diff --git a/common/list/lists-fr.html b/common/list/lists-fr.html index b41618d241..cc9315dd08 100644 --- a/common/list/lists-fr.html +++ b/common/list/lists-fr.html @@ -411,3 +411,16 @@

Liste descriptive en ligne

<dt>Terme :</dt> <dd>Description courte</dd> </dl> + + + diff --git a/common/spacing/_spacing.scss b/common/spacing/_spacing.scss new file mode 100644 index 0000000000..2816e82ac5 --- /dev/null +++ b/common/spacing/_spacing.scss @@ -0,0 +1,85 @@ +/* + * + * @title: Spacing + * + */ + +.pddng-lft-0 { + padding-left: 0; +} + +.pddng-lft-sm { + padding-left: 5px; +} + +.pddng-lft-md { + padding-left: 15px; +} + +.pddng-lft-lg { + padding-left: 30px; +} + +.pddng-lft-xl { + padding-left: 50px; +} + +.pddng-bttm-0 { + padding-bottom: 0; +} + +.pddng-bttm-sm { + padding-bottom: 5px; +} + +.pddng-bttm-md { + padding-bottom: 15px; +} + +.pddng-bttm-lg { + padding-bottom: 30px; +} + +.pddng-bttm-xl { + padding-bottom: 50px; +} + +.pddng-tp-0 { + padding-top: 0; +} + +.pddng-tp-sm { + padding-top: 5px; +} + +.pddng-tp-md { + padding-top: 15px; +} + +.pddng-tp-lg { + padding-top: 30px; +} + +.pddng-tp-xl { + padding-top: 50px; +} + +.pddng-rght-0 { + padding-right: 0; +} + +.pddng-rght-sm { + padding-right: 5px; +} + +.pddng-rght-md { + padding-right: 15px; +} + +.pddng-rght-lg { + padding-right: 30px; +} + +.pddng-rght-xl { + padding-right: 50px; +} diff --git a/common/spacing/index.json-ld b/common/spacing/index.json-ld new file mode 100644 index 0000000000..62e9c8df6c --- /dev/null +++ b/common/spacing/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Spacing", + "fr": "Espacement" + }, + "description": { + "en": "Utility classes to add spacing between elements.", + "fr": "Classes utilitaires pour ajouter de l'espacement entre des éléments." + }, + "modified": "2024-11-22", + "componentName": "spacing", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Spacing", + "language": "en", + "path": "spacing-en.html" + }, + { + "title": "Espacement", + "language": "fr", + "path": "spacing-fr.html" + } + ] + } +} diff --git a/common/spacing/spacing-en.html b/common/spacing/spacing-en.html new file mode 100644 index 0000000000..0dc3276b65 --- /dev/null +++ b/common/spacing/spacing-en.html @@ -0,0 +1,153 @@ +--- +{ + "title": "Spacing", + "language": "en", + "altLangPage": "spacing-fr.html", + "description": "Utility classes to add spacing between elements.", + "dateModified": "2024-11-22" +} +--- + +
+ +

Utility classes to add spacing between elements.

+ +

This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: p-0, mt-auto, pr-sm-3 and others.

+

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

+ +

pddng-[position]-[size]

+

Add padding to an element.

+

Available positions:

+ +

Available sizes:

+ +

Working examples

+

0

+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+

sm

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

md

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

lg

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

xl

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

Code sample

+
<h4><code>0</code></h4>
+<div class="pddng-tp-0 pddng-rght-0 pddng-bttm-0 pddng-lft-0 well">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
+<h4><code>sm</code></h4>
+<p class="pddng-tp-sm pddng-rght-sm pddng-bttm-sm pddng-lft-sm bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>md</code></h4>
+<p class="pddng-tp-md pddng-rght-md pddng-bttm-md pddng-lft-md bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>lg</code></h4>
+<p class="pddng-tp-lg pddng-rght-lg pddng-bttm-lg pddng-lft-lg bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>xl</code></h4>
+<p class="pddng-tp-xl pddng-rght-xl pddng-bttm-xl pddng-lft-xl bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+ +

mrgn-[position]-[size]

+

Add margin to an element.

+

Available positions:

+ +

Available sizes:

+ +

Working examples

+

0

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

sm

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

md

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

lg

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

xl

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

Code sample

+
<h4><code>0</code></h4>
+<p class="mrgn-tp-0 mrgn-rght-0 mrgn-bttm-0 mrgn-lft-0 bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>sm</code></h4>
+<p class="mrgn-tp-sm mrgn-rght-sm mrgn-bttm-sm mrgn-lft-sm bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>md</code></h4>
+<p class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>lg</code></h4>
+<p class="mrgn-tp-lg mrgn-rght-lg mrgn-bttm-lg mrgn-lft-lg bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>xl</code></h4>
+<p class="mrgn-tp-xl mrgn-rght-xl mrgn-bttm-xl mrgn-lft-xl bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+ +

p-0

+

Set a padding of 0px.

+

Working example

+

Suspendisse faucibus nisl at consectetur.

+

Code sample

+
<p class="p-0 primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

p-sm-3

+

Set a padding of 15px in small view and over.

+

Working example

+

Suspendisse faucibus nisl at consectetur.

+

Code sample

+
<p class="p-sm-3 primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

px-sm-3

+

Set a left and right padding of 15px in small view and over.

+

Working example

+

Suspendisse faucibus nisl at consectetur.

+

Code sample

+
<p class="px-sm-3 bg-primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

pr-sm-3

+

Set a right padding of 15px in small view and over.

+

Working example

+

Suspendisse faucibus nisl at consectetur.

+

Code sample

+
<p class="pr-sm-3 bg-primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

mb-sm-5

+

Set a bottom margin of 50px in small view and over.

+

Working example

+

Suspendisse faucibus nisl at consectetur.

+

Code sample

+
<p class="mb-sm-5 bg-primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

mt-auto

+

Set a top margin to auto. When used jointly with flexbox, it will stick an element to the bottom.

+

Working example

+

Please test on a tablet or desktop to get the full picture of this utility.

+
+
+

I'm at the bottom.

+
+
+

Example text. Example text. Example text. Example text.

+
+
+

Code sample

+
<div class="row wb-eqht-grd">
+	<div class="col-xs-6">
+		<p class="mt-auto mrgn-bttm-0 bg-primary">Example text.</p>
+	</div>
+	<div class="col-xs-6">
+			<p class="mrgn-bttm-0 bg-primary">Example text. Example text. Example text. Example text.<span class="hidden-xs hidden-sm"> Example text. Example text. Example text. Example text.</span></p>
+	</div>
+</div>
diff --git a/common/spacing/spacing-fr.html b/common/spacing/spacing-fr.html new file mode 100644 index 0000000000..c5fce784b1 --- /dev/null +++ b/common/spacing/spacing-fr.html @@ -0,0 +1,153 @@ +--- +{ + "title": "Spacing", + "language": "fr", + "altLangPage": "spacing-en.html", + "description": "Classes utilitaires pour ajouter de l'espacement entre des éléments.", + "dateModified": "2024-11-22" +} +--- + +
+ +

Classes utilitaires pour ajouter de l'espacement entre des éléments.

+ +

Cette page présente les fonctionnalités de l'utilitaire wet-boew, y compris certaines intégrations de Bootstrap 4 telles que: p-0, mt-auto, pr-sm-3 et d'autres.

+

Veuillez noter que certaines classes Bootstrap 4 rétroportées ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale de la petite vue (sm) est de 768px dans Bootstrap 3.4, par opposition à 576px dans Bootstrap 4.

+ +

pddng-[position]-[grosseur]

+

Ajoute du remplissage à un élément.

+

Positions disponibles :

+ +

Grosseurs disponibles :

+ +

Exemples pratiques

+

0

+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+

sm

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

md

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

lg

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

xl

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

Exemple de code

+
<h4><code>0</code></h4>
+<div class="pddng-tp-0 pddng-rght-0 pddng-bttm-0 pddng-lft-0 well">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
+<h4><code>sm</code></h4>
+<p class="pddng-tp-sm pddng-rght-sm pddng-bttm-sm pddng-lft-sm bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>md</code></h4>
+<p class="pddng-tp-md pddng-rght-md pddng-bttm-md pddng-lft-md bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>lg</code></h4>
+<p class="pddng-tp-lg pddng-rght-lg pddng-bttm-lg pddng-lft-lg bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>xl</code></h4>
+<p class="pddng-tp-xl pddng-rght-xl pddng-bttm-xl pddng-lft-xl bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+ +

mrgn-[position]-[grosseur]

+

Ajoute un marge à un élément.

+

Positions disponibles :

+ +

Grosseurs disponibles :

+ +

Exemples pratiques

+

0

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

sm

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

md

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

lg

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

xl

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.

+

Exemple de code

+
<h4><code>0</code></h4>
+<p class="mrgn-tp-0 mrgn-rght-0 mrgn-bttm-0 mrgn-lft-0 bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>sm</code></h4>
+<p class="mrgn-tp-sm mrgn-rght-sm mrgn-bttm-sm mrgn-lft-sm bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>md</code></h4>
+<p class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>lg</code></h4>
+<p class="mrgn-tp-lg mrgn-rght-lg mrgn-bttm-lg mrgn-lft-lg bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+<h4><code>xl</code></h4>
+<p class="mrgn-tp-xl mrgn-rght-xl mrgn-bttm-xl mrgn-lft-xl bg-primary">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque molestiae cum reiciendis voluptatum doloribus doloremque ab harum sequi quam. Laboriosam possimus libero officiis blanditiis nemo.</p>
+ +

p-0

+

Défini un remplissage de 0px.

+

Exemple pratique

+

Suspendisse faucibus nisl at consectetur.

+

Exemple de code

+
<p class="p-0 primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

p-sm-3

+

Défini un remplissage de 15px dans la petite vue et plus.

+

Exemple pratique

+

Suspendisse faucibus nisl at consectetur.

+

Exemple de code

+
<p class="p-sm-3 primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

px-sm-3

+

px-sm-3

+

Exemple pratique

+

Suspendisse faucibus nisl at consectetur.

+

Exemple de code

+
<p class="px-sm-3 bg-primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

pr-sm-3

+

Défini un remplissage à droite de 15px dans la petite vue et plus.

+

Exemple pratique

+

Suspendisse faucibus nisl at consectetur.

+

Exemple de code

+
<p class="pr-sm-3 bg-primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

mb-sm-5

+

Défini une marge en-dessous de 50px dans la petite vue et plus.

+

Exemple pratique

+

Suspendisse faucibus nisl at consectetur.

+

Exemple de code

+
<p class="mb-sm-5 bg-primary">Suspendisse faucibus nisl at consectetur.</p>
+ +

mt-auto

+

Défini une marge au-dessus automatique. Lorsque utilisé conjointement avec "flex", l'élément ira se coller au bas de son conteneur.

+

Exemple pratique

+

Veuillez tester sur tablette ou ordinateur de bureau afin d'obtenir l'effet escompté de cet utilitaire.

+
+
+

I'm at the bottom.

+
+
+

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

+
+
+

Exemple de code

+
<div class="row wb-eqht-grd">
+	<div class="col-xs-6">
+		<p class="mt-auto mrgn-bttm-0 bg-primary">Exemple de texte.</p>
+	</div>
+	<div class="col-xs-6">
+			<p class="mrgn-bttm-0 bg-primary">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.<span class="hidden-xs hidden-sm"> Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</span></p>
+	</div>
+</div>
diff --git a/sites/theme.scss b/sites/theme.scss index c3aa3bbe4f..1b14294b4d 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -34,6 +34,7 @@ @import "bootstrap-sass/assets/stylesheets/bootstrap/type"; @import "wet-boew/src/base/bootstrap-overrides/core-heading"; @import "baseline/heading"; +@import "../common/colour/colours"; @import "../common/list/lists"; @import "wet-boew/src/base/bootstrap-overrides/core"; @import "wet-boew/src/base/details/base"; @@ -215,6 +216,7 @@ @import "wet-boew/src/base/proximity/base"; @import "wet-boew/src/base/bootstrap-4"; @import "wet-boew/src/base/component"; +@import "../common/spacing/spacing"; /* diff --git a/templates/all-services/all-services-doc-en.html b/templates/all-services/all-services-doc-en.html new file mode 100644 index 0000000000..73166a30e5 --- /dev/null +++ b/templates/all-services/all-services-doc-en.html @@ -0,0 +1,9 @@ +--- +title: All services +description: Documentation for the all services page template. +language: en +altLangPage: all-services-doc-fr.html +dateModified: 2024-11-22 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/all-services/all-services-doc-fr.html b/templates/all-services/all-services-doc-fr.html new file mode 100644 index 0000000000..4c8042cacd --- /dev/null +++ b/templates/all-services/all-services-doc-fr.html @@ -0,0 +1,9 @@ +--- +title: Tous les services +description: Documentation du gabarit de page de tous les services. +language: fr +altLangPage: all-services-doc-en.html +dateModified: 2024-11-22 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/all-services/all-services-en.html b/templates/all-services/all-services-en.html new file mode 100644 index 0000000000..e5b5c74a30 --- /dev/null +++ b/templates/all-services/all-services-en.html @@ -0,0 +1,738 @@ +--- +{ +"title": "Government of Canada services", +"language": "en", +"altLangPage": "all-services-fr.html", +"dateModified": "2024-11-21", +"layout": "no-container", +"css": ["https://use.fontawesome.com/releases/v5.8.1/css/all.css"] +} +--- + +
+

Government of Canada services

+
+ +
+
+

Top searches

+ +
+
+ +
+
+

Most requested services

+ +
+
+ +
+
+

Supporting you through life's transitions

+ +
+
+ +
+

Access services by topic

+ +
+ Immigration and citizenship +
+
+

Information on

+
+
+ +
+
+
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Taxes +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Jobs +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Travel and tourism +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Benefits +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Environment and natural resources +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Business and industry +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Health +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Money and finances +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Canada and the world +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Youth +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Indigenous Peoples +
+
+

More topics

+
+
+ +
+
+
+ +
+ Culture, history and sport +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ National security and defence +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Veterans and military +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Transport and infrastructure +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Policing, justice and emergencies +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Science and innovation +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
diff --git a/templates/all-services/all-services-fr.html b/templates/all-services/all-services-fr.html new file mode 100644 index 0000000000..72971da96f --- /dev/null +++ b/templates/all-services/all-services-fr.html @@ -0,0 +1,742 @@ +--- +{ + "title": "Services du government du Canada", + "language": "fr", + "altLangPage": "all-services-en.html", + "dateModified": "2024-11-21", + "layout": "no-container", + "css": ["https://use.fontawesome.com/releases/v5.8.1/css/all.css"] +} +--- + +
+

Services du government du Canada

+
+ +
+ +
+
+

Top searches

+ +
+
+ +
+
+

Most requested services

+ +
+
+ +
+
+

Supporting you through life's transitions

+ +
+
+ +
+

Access services by topic

+ +
+ Immigration and citizenship +
+
+

Information on

+
+
+ +
+
+
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Taxes +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Jobs +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Travel and tourism +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Benefits +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Environment and natural resources +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Business and industry +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Health +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Money and finances +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Canada and the world +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Youth +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Indigenous Peoples +
+
+

More topics

+
+
+ +
+
+
+ +
+ Culture, history and sport +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ National security and defence +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Veterans and military +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Transport and infrastructure +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Policing, justice and emergencies +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Science and innovation +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
diff --git a/templates/all-services/index.json-ld b/templates/all-services/index.json-ld new file mode 100644 index 0000000000..5edebf91fc --- /dev/null +++ b/templates/all-services/index.json-ld @@ -0,0 +1,128 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "All services", + "fr": "Tous les services" + }, + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "modified": "2024-11-21", + "componentName": "all-services", + "status": "stable", + "version": "1.0", + "pages": { + "examples": [ + { + "title": "All services", + "language": "en", + "path": "all-services-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-fr.html" + } + ], + "docs": [ + { + "title": "All services", + "language": "en", + "path": "all-services-doc-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-doc-fr.html" + } + ] + }, + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "All services", + "fr": "Tous les services" + }, + "status": "stable", + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "iteration": "_:iteration_allservices_1", + "example": [ + { + "en": { "href": "all-services-en.html", "text": "All services" }, + "fr": { "href": "all-services-fr.html", "text": "Tous les services" } + } + ], + "implementation": [ + "_:implement_allservices" + ], + "history": [ + { + "en": "November 2024 - Initial implementation of the page template.", + "fr": "Novembre 2024 - Implémentation initiale du gabarit de page." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_allservices", + "iteration": "_:iteration_allservices_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for publishers adding the template manually into an AEM page.", + "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM." + + }, + "instructions": { + "en": [ + "Refer to the working example and guidance for more information on how to implement this page template." + ], + "fr": [ + "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page." + ] + }, + "ajaxSourceCode": { + "en": "all-services-en.html main > *:not(.pagedetails)", + "fr": "all-services-fr.html main > *:not(.pagedetails)" + } + } + ], + "iteration": [ + { + "@id": "_:iteration_allservices_1", + "name": "All services page - Iteration 1", + "date": "2024-11", + "detectableBy": "Three navigation bands followed by a series of
elements for all goc themes and topics." + } + ], + "changesets": [ + { + "@id": "_:cs_allservices", + "name": "Topic page", + "status": "stable", + "baseOnIteration": "_:iteration_allservices_1", + "detectableBy": "By the sequence of elements.", + "layout": [ + "Top serches navigation band", + "Most requested services navigation band", + "Supporting through life's transitions navigation band", + "Most requested - version 1 (optional)", + "Series of
elements for all goc themes and topics" + ] + } + ] +}